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

Android

Last updated at 2018-03-10Posted at 2018-03-02

きっかけ

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

動作イメージ

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

pic.twitter.com/i0SVmJLRg9
— yst.i (@yst_i) 2018年2月26日

環境

Android Studio 3.0.1
- support Library Version = '25.4.0'
Lolipop以降（API 21以上）

Implementation

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"
        >

これだけです。

再現できます。

pic.twitter.com/i0SVmJLRg9
— yst.i (@yst_i) 2018年2月26日

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

FRIL
- 目立つ場所では使っていないようです。(一部では使用）
Google Play
Play Books
Eventbrite Organizer （Material Design Award 2017）
NPR One （Material Design Award 2017）
- 使用箇所は見つけられませんでした。タップ時はリップルやアニメーションでインタラクションを表現しているようです。
- アイテム間の余白が狭いデザインは、タップ時のshadowを広げるアニメーションは使いづらいのかも。