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
|
<explode/> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> </transitionSet> |
transition裏面的元素使用方法和以前的AnimationSet差不多，具體如何使用大家可以參考官方文檔。
代碼：
在代碼中同樣可以完成對於transition的設置：
|
1
2
3
4
5
|
// 允許使用transitionsgetWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);// 設置一個exit transitiongetWindow().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，該博主還寫了另外一篇文章：Android L——RecyclerView,CardView的導入和使用，感興趣的親們可以前往查看一下哦。