簡(jiǎn)評(píng)：使用 StateListAnimator 輕松實(shí)現(xiàn) Material Design 效果。

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

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

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

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

那我們?cè)趺磥韺?shí)現(xiàn)組件在 z 軸（高度）上的變化效果呢？這就需要用到今天講到的 StateListAnimator 了。

首先，讓我們創(chuàng)建一個(gè) animator 資源文件夾，在其中創(chuàng)建一個(gè) 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>

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

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

• translationX, translationY: 控制組件沿 x 和 y 軸移動(dòng)多少距離。
• rotation, rotationX, rotationY: 繞中心點(diǎn)旋轉(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è)置組件的中心點(diǎn)在哪里，scale 和 rotation 都會(huì)根據(jù)設(shè)置的中心點(diǎn)來變化，默認(rèn)為幾何中心。
• x, y: 組件最終要出現(xiàn)在相對(duì)其父容器的位置。
• alpha: 組件的透明度，值的范圍從 0 到 1，為 0 時(shí)完全透明。

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

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

因?yàn)橹醪恢С?gif，感興趣的同學(xué)可以點(diǎn)擊原文鏈接查看實(shí)現(xiàn)效果。

原文：StateListAnimator

總結(jié)

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

最新評(píng)論