LoginSignup
7
4

More than 5 years have passed since last update.

タップ時のリフトアニメーション

Last updated at Posted at 2018-03-02

きっかけ

  • ボタンをクリック時のアニメーションがリップル(波紋のように広がるエフェクト)だけだと寂しい画面があるのでもう少し何か足したい。
  • リップルと併用できるものないか調べる。マテリアルデザインのモーションにタップ時にボタンを浮き上がらせる(リフト)アニメーションがあったので試してみました。
  • インタラクションデザイン(応答性があるデザイン)を実現したい

動作イメージ

  • CardViewにタップ時のリフトアニメーションを実装

環境

  • Android Studio 3.0.1
    • support Library Version = '25.4.0'
  • Lolipop以降(API 21以上)

Implementation :writing_hand_tone2:


res/animator-v21/lift_on_touch.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item // クリックされた時にZ軸を8dp移動するアニメーションを200mm実行する。
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="@dimen/dimen_8dp"/>
    </item>
    <item>
        <objectAnimator             android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"/><!-- default -->
    </item>
</selector>

res/layout/HogeActivity.xml
    <android.support.v7.widget.CardView
        android:id="@+id/lift-on-tap"
        cardUseCompatPadding="true" // lolipop未満でshadowを表示する
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dimen_8dp"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground" // リップル
        android:stateListAnimator="@animator/lift_on_touch.xml" //タップ時のアニメーションを指定
        tools:targetApi="lollipop"
        >

これだけです。:thumbsup_tone2:


再現できます。:shamrock:


実装はわかったので、他のアプリの使用状況を調べてみます(好きなアプリから選んでます:nose_tone1:


  • FRIL

    • 目立つ場所では使っていないようです。(一部では使用)
  • Google Play

  • Play Books

  • Eventbrite Organizer (Material Design Award 2017)

  • NPR One (Material Design Award 2017)

    • 使用箇所は見つけられませんでした。タップ時はリップルやアニメーションでインタラクションを表現しているようです。
    • アイテム間の余白が狭いデザインは、タップ時のshadowを広げるアニメーションは使いづらいのかも。:eyes:

他のアプリの使用状況(独断と偏見まみれ)

  • リフトアニメーションの使用は少ないよう :eyes:
  • 余白が狭いデザインは、shadowが広がるモーションは相性が悪いのかもしれない。:rolling_eyes:
  • インタラクションな表現も、デザインやレイアウトによって効果が出ない場合がありそう。

せっかく作ったので

  • デザイナーに見てもらった。最初はエフェクトに気づいてもらえなかった:sob:
  • 一旦、余白が広いボタンで使ってみることに。
  • ただ、いつでも元に戻せるようにしておく。(最終的な判断はデザイナーにあります。:relaxed:)

終わりに

  • Lolipopから簡単にリフトアニメーションが作成出来ます。
  • 画面のデザイン次第で逆の効果が出そうな気がする。
  • これに懲りずにインタラクションデザインをどんどん突っ込んでいきたい。良くなければ元に戻す。

CardViewのおまけ

カードには、写真、テキスト、および単一のテーマに関するリンクが含まれている場合があります


参考記事

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4