Material Design之視圖狀態改變

視圖狀態改變是通過StateListAnimator動畫集來改變View的狀態的，它可以使View在不同狀態下發生不同的變化，如下是在drawable目錄下定義一個StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="10"
            android:valueType="floatType"/>
    </set>
</item>
<item android:state_pressed="false">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="0"
            android:valueType="floatType"/>
    </set>
</item>
</selector>

上述動畫是定義了在視圖按下時候，視圖往Z軸正方向提升，鬆開時候又恢復到原始位置，然後把該StateListAnimator設置給對應的View即可：android:stateListAnimator=""

---

設置StateListAnimator有兩種方式：

1、通過xml設置：

設置android:stateListAnimator=“”

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_margin="16dp"
        android:clickable="true"
        android:stateListAnimator="@drawable/style3"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        app:cardUseCompatPadding="false" />

2、通過代碼設置：

StateListAnimator listAnimator = AnimatorInflater.loadStateListAnimator(this, R.drawable.list_animator);
mView.setStateListAnimator(listAnimator);

如下是個Demo：

第一個動畫的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="10"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="45"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>  

第二個動畫的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="10"
            android:valueType="floatType"/>
    </set>
</item>
<item android:state_pressed="false">
    <set>
        <objectAnimator android:propertyName="translationZ"
            android:duration="@android:integer/config_shortAnimTime"
            android:valueTo="0"
            android:valueType="floatType"/>
    </set>
</item>
</selector>

第三個動畫的StateListAnimator：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="360"
                android:valueType="floatType"/>
        </set>
    </item>
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="rotationX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>