[Android] Instagram愛心/FB按讚點擊效果實現 (Icon放大旋轉)

 這次來記錄IG 按愛心或FB按讚時，Icon會有動畫效果的模仿，效果以Icon放大並旋轉一點角度的動畫為目標，核心概念透過StateListAnimators來實現這個效果，如下圖。

StateListAnimators可以設定當view是checked/enable/focused/pressed...要呈現的效果，這邊我以最簡單的checked來做，先建立一個CheckBox且放上一個因應checked狀態顯示不同Icon的Selector。

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/ic_baseline_thumb_up_selected" android:state_checked="true" />
	<item android:drawable="@drawable/ic_baseline_thumb_up" android:state_checked="false" />
	</selector>

view raw icon_selector.xml hosted with ❤ by GitHub

	<CheckBox
	...
	android:button="@drawable/icon_selector" />

view raw checkbox.xml hosted with ❤ by GitHub

寫一個StateListAnimators的xml，裡面包含了放大與旋轉的數值設定，有需要的可以自行更改動畫時間或數值。

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_checked="true">
	<set xmlns:android="http://schemas.android.com/apk/res/android">
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="scaleX"
	android:valueTo="1.525"
	android:valueType="floatType" />
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="scaleY"
	android:valueTo="1.525"
	android:valueType="floatType" />
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="rotation"
	android:valueTo="-20" />
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="scaleX"
	android:valueTo="1.0"
	android:startOffset="@android:integer/config_shortAnimTime"
	android:valueType="floatType" />
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="scaleY"
	android:startOffset="@android:integer/config_shortAnimTime"
	android:valueTo="1.0"
	android:valueType="floatType" />
	<objectAnimator
	android:duration="@android:integer/config_shortAnimTime"
	android:propertyName="rotation"
	android:startOffset="@android:integer/config_shortAnimTime"
	android:valueTo="0" />
	</set>
	</item>
	</selector>

view raw animators.xml hosted with ❤ by GitHub

最後，將CheckBox的StateListAnimators指定我們所寫的StateListAnimators，就大功造成了!

	<CheckBox
	...
	android:stateListAnimator="@drawable/animators"
	android:button="@drawable/icon_selector" />

view raw checkbox_statelistanimators.xml hosted with ❤ by GitHub

資料參考:Creating an Instagram “Like” Animation With StateListAnimators