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

## きっかけ

* ボタンをクリック時のアニメーションがリップル（波紋のように広がるエフェクト）だけだと寂しい画面があるのでもう少し何か足したい。
* リップルと併用できるものないか調べる。マテリアルデザインの[モーション](https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move)にタップ時にボタンを浮き上がらせる（リフト）アニメーションがあったので試してみました。
* インタラクションデザイン（応答性があるデザイン）を実現したい


----
## 動作イメージ
* CardViewにタップ時のリフトアニメーションを実装

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/i0SVmJLRg9">pic.twitter.com/i0SVmJLRg9</a></p>&mdash; yst.i (@yst_i) <a href="https://twitter.com/yst_i/status/967933364572381187?ref_src=twsrc%5Etfw">2018年2月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

----
## Implementation :writing_hand_tone2:
----
```java: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>
```
---
```java: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:

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/i0SVmJLRg9">pic.twitter.com/i0SVmJLRg9</a></p>&mdash; yst.i (@yst_i) <a href="https://twitter.com/yst_i/status/967933364572381187?ref_src=twsrc%5Etfw">2018年2月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

----
## 実装はわかったので、他のアプリの使用状況を調べてみます（好きなアプリから選んでます: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のおまけ
* cardViewをボタンとして扱っても良いのか？
    * [問題なさそう](https://material.io/guidelines/components/cards.html)

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

----
## 参考記事
* [CardView](https://developer.android.com/reference/android/support/v7/widget/CardView.html)
* [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator.html)
* [Delightful details: Lift-on-touch animation for CardView](https://vickychijwani.me/cardview-material-response/)