[轉]Android 5.0——Material Design詳解（動畫篇）

標籤：

Material Design：Google推出的一個全新的設計語言，它的特點就是擬物扁平化。

Material Design包含了很多內容，今天跟大家分享一下Material新增的動畫：

在Android L中新增了如下幾種動畫：

* middot;Touch feedback（觸摸反饋）

* middot;Reveal effect（揭露效果）

* middot;Activity transitions（Activity轉換效果）

* middot;Curved motion（曲線運動）

* middot;View state changes （檢視狀態改變）

* middot;Animate Vector Drawables（可繪向量動畫）

本篇文章先介紹下上面6種中比較常用前三種。

觸摸反饋

在Android 5.0中加入了觸摸反饋動畫。

其中最明顯，最具代表性的就是波紋動畫，比如當點擊按鈕時會從點擊的位置產生類似于波紋的擴散效果。

波紋效果（Ripple）：

當你使用了Material主題後，波紋動畫會自動應用在所有的控制項上，我們當然可以來設定其屬性來調整到我們需要的效果。

可以通過如下代碼設定波紋的背景：

android:background="?android:attr/selectableItemBackground"波紋有邊界

android:background="?android:attr/selectableItemBackgroundBorderless"波紋超出邊界

使用效果如下：

B1是不設任何背景的按鈕

B2設定了?android:attr/selectableItemBackground

B3設定了?android:attr/selectableItemBackgroundBorderless

 

設定顏色：

我們也可以通過設定xml屬性來調節動畫顏色，從而可以適應不同的主題：

android:colorControlHighlight：設定波紋顏色

android:colorAccent：設定checkbox等控制項的選中顏色

比如下面這個比較粉嫩的主題，就需要修改動畫顏色來匹配：

 

Circular Reveal

Circular Reveal是Android L新增的一個動畫效果。

 

使用方法：

應用ViewAnimationUtils.createCircularReveal()方法可以去建立一個RevealAnimator動畫ViewAnimationUtils.createCircularReveal源碼如下：

 

1 2 3 4

public static Animator createCircularReveal(View view,           int centerX,  int centerY, float startRadius, float endRadius) {       return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);   }

源碼非常簡單，就是通過createCircularReveal方法根據5個參數來建立一個RevealAnimator動畫對象。這5個參數分別是：

* middot;view 操作的視圖

* middot;centerX 動畫開始的中心點X

* middot;centerY 動畫開始的中心點Y

* middot;startRadius 動畫開始半徑

* middot;startRadius 動畫結束半徑

根據下面的和代碼可以很容易的瞭解這幾個參數的作用：          

 

程式碼範例：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

final View oval = this.findViewById(R.id.oval);   oval.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {           Animator animator = ViewAnimationUtils.createCircularReveal(                   oval,                   oval.getWidth()/2,                   oval.getHeight()/2,                   oval.getWidth(),                   0);           animator.setInterpolator(new AccelerateDecelerateInterpolator());           animator.setDuration(2000);           animator.start();       }   });       final View rect = this.findViewById(R.id.rect);       rect.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {           Animator animator = ViewAnimationUtils.createCircularReveal(                   rect,                   0,                   0,                   0,                   (float) Math.hypot(rect.getWidth(), rect.getHeight()));           animator.setInterpolator(new AccelerateInterpolator());           animator.setDuration(2000);           animator.start();       }   });

 

總結：

RevealAnimator和之前的動畫使用沒什麼區別，同樣可以設定監聽器和加速器來實現各種各樣的特效。這些效果常用在視圖的添加，刪除，狀態，大小改變的時候。

Activity Transition

Activity Transition是Material Design中提供的一種動畫效果。它通過運動和切換不同狀態之間的元素來產生各種動畫效果。

簡介

Activity Transition提供了兩種Transition類型：

1、Enter（進入）：進入一個Activity的效果

2、Exit（退出）：退出一個Activity的效果

 

而這每種類型又分為普通和共用元素Transition。

普通Transition

explode：從情境的中心移入或移出 

slide：從情境的邊緣移入或移出 

fade：調整透明度產生漸層效果

Shared Elements Transition 共用元素轉換

它的作用就是共用兩個acitivity中共同的元素，在Android 5.0下支援如下效果：

changeBounds -  改變目標視圖的布局邊界

changeClipBounds - 裁剪目標視圖邊界

changeTransform - 改變目標視圖的縮放比例和旋轉角度

changeImageTransform - 改變靶心圖表片的大小和縮放比例

下面是我寫的一個小示範Demo，相信大家看後就知道這幾個動畫是如何工作的了：

 

 

Activity Transition使用

使用Activity Transition十分簡單，只需要如下兩個步驟：

步驟一：設定允許使用transition，並且設定transition。

xml：

首先，如果要使用transition需要先修改style檔案，在繼承了material主題的style.xml中添加如下屬性：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style name="myTheme" parent="android:Theme.Material">           <!-- 允許使用transitions -->           <item name="android:windowContentTransitions">true</item>               <!-- 指定進入和退出transitions -->           <item name="android:windowEnterTransition">@transition/explode</item>           <item name="android:windowExitTransition">@transition/explode</item>               <!-- 指定shared element transitions -->           <item name="android:windowSharedElementEnterTransition">               @transition/change_image_transform</item>           <item name="android:windowSharedElementExitTransition">               @transition/change_image_transform</item>   </style>

 

下面再來看看如何定義transition動畫：

 

1 2 3 4 5 6 7

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">       <explode/>       <changeBounds/>       <changeTransform/>       <changeClipBounds/>       <changeImageTransform/>   </transitionSet>

 

transition裡面的元素使用方法和以前的AnimationSet差不多，具體如何使用大家可以參考官方文檔。

代碼：

在代碼中同樣可以完成對於transition的設定：

 

1 2 3 4 5

// 允許使用transitions getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);   // 設定一個exit transition getWindow().setExitTransition(new Explode());

 

可以通過如下方法在代碼總設定transition效果：

 

Window.setEnterTransition()：普通transition的進入效果

Window.setExitTransition()：普通transition的退出效果

Window.setSharedElementEnterTransition()：共用元素transition的進入效果

Window.setSharedElementExitTransition()：共用元素transition的退出效果

步驟二：啟動Activity。

當你已經設定了允許使用Transition並設定了Transition動畫，你就可以通過ActivityOptions.makeSceneTransitionAnimation()方法啟動一個新的Activity來啟用這個Transition：

啟用普通的Transition：

1 2	startActivity(intent,               ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

 

啟用共用元素Transition：

啟動shared element transition和普通的transition稍有不同，在所有需要共用視圖的Activity中，使用android:transitionName屬性對於需要共用的元素分配一個通用的名字。

 

1 2 3 4 5 6

Intent intent = new Intent(this, Activity2.class);   // shareView: 需要共用的視圖   // "shareName": 設定的android:transitionName="shareName"   ActivityOptions options = ActivityOptions           .makeSceneTransitionAnimation(this, shareView, "shareName");   startActivity(intent, options.toBundle());</span>

 

如果有多個View需要共用，則通過Pair.create()方法建立多個匹配對然後傳入ActivityOptions.makeSceneTransitionAnimation。

代碼如下：

 

1 2 3

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,           Pair.create(view1, "agreedName1"),           Pair.create(view2, "agreedName2"));

 

如果不想使用transition可以設定options bundle為null。當需要結束當前Activity並回退這個動畫時調用Activity.finishAfterTransition()方法。

相容性：

上面介紹的幾個新動畫的APIs只允許在Android L中使用：

* middot;Activity transitions

* middot;Touch feedback

* middot;Reveal animations

所以為了相容早期版本，則需要在調用這些api的時候先進行檢查系統版本。

 

[轉]Android 5.0——Material Design詳解（動畫篇）