簡評：使用 StateListAnimator 輕松實現(xiàn) Material Design 效果。

Material Design 中最基礎(chǔ)的一條原則就是 'motion provides meaning'，也就是當(dāng)用戶和你的 app 交互時應(yīng)當(dāng)提供合理的視覺反饋。標(biāo)準做法是使用官方提供的 StateListDrawable 來為控件實現(xiàn)交互效果。

StateListAnimator 是和 Material Design 一同在 API 21 引入的，可以用來方便的實現(xiàn)交互反饋的視覺效果，今天這篇文章就講解了 StateListAnimator 的用法。

在以前，我們處理 Button，TextView 等控件的點擊效果時，通常是定義一個 selector，為按下和普通情況分別設(shè)置顏色。但這樣的效果一方面不夠動人，另一方面也不符合 Material Design 的規(guī)范。

Material Design 規(guī)范推薦 Button 等控件應(yīng)當(dāng)以材質(zhì)的方式表現(xiàn)，當(dāng)接觸到手指時上升。因此 Material Design 對組件有了 z 軸這個概念，也就是高度。z 值越大，組件離界面底層（水平面）越遠，投影越重。

那我們怎么來實現(xiàn)組件在 z 軸（高度）上的變化效果呢？這就需要用到今天講到的 StateListAnimator 了。

首先，讓我們創(chuàng)建一個 animator 資源文件夾，在其中創(chuàng)建一個 selector_animator.xml：

<?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:duration="@android:integer/config_shortAnimTime"
  android:propertyName="scaleX"
  android:valueTo="1.025"
  android:valueType="floatType" />
  <objectAnimator
  android:duration="@android:integer/config_shortAnimTime"
  android:propertyName="scaleY"
  android:valueTo="1.025"
  android:valueType="floatType" />
  <objectAnimator
  android:duration="@android:integer/config_shortAnimTime"
  android:propertyName="translationZ"
  android:valueTo="4dp"
  android:valueType="floatType" />
 </set>
 </item>
 
 <item>
 <set>
  <objectAnimator
  android:duration="@android:integer/config_shortAnimTime"
  android:propertyName="scaleX"
  android:valueTo="1.0"
  android:valueType="floatType" />
  <objectAnimator
  android:duration="@android:integer/config_shortAnimTime"
  android:propertyName="scaleY"
  android:valueTo="1.0"
  android:valueType="floatType" />
  <objectAnimator
  android:duration="@android:integer/config_shortAnimTime"
  android:propertyName="translationZ"
  android:valueTo="0dp"
  android:valueType="floatType" />
 </set>
 </item>
 </selector>

代碼很簡單，當(dāng)處于按下情況時，組件沿 x, y 軸擴大 1.025 倍并升高 4dp（會在組件四周產(chǎn)生投影效果）。

需要注意其中的 propertyName 屬性目前支持：

• translationX, translationY: 控制組件沿 x 和 y 軸移動多少距離。
• rotation, rotationX, rotationY: 繞中心點旋轉(zhuǎn)，設(shè)置 rotation 是 2D 平面旋轉(zhuǎn)，rotationX 和 rotationY 分別是從屏幕內(nèi)向屏幕外旋轉(zhuǎn)和從左到右旋轉(zhuǎn)，均為 3D 旋轉(zhuǎn)。
• scaleX, scaleY: 沿 x, y 軸的縮放比例，設(shè)置為 1.5 即 1.5 倍。
• pivotX, pivotY: 設(shè)置組件的中心點在哪里，scale 和 rotation 都會根據(jù)設(shè)置的中心點來變化，默認為幾何中心。
• x, y: 組件最終要出現(xiàn)在相對其父容器的位置。
• alpha: 組件的透明度，值的范圍從 0 到 1，為 0 時完全透明。

然后在 layout 文件中設(shè)置組件的 stateListAnimator 值就可以啦：

<TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 ... 
 android:stateListAnimator="@animator/selector_animator" />

因為知乎不支持 gif，感興趣的同學(xué)可以點擊原文鏈接查看實現(xiàn)效果。

原文：StateListAnimator

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

最新評論