ANDROID L - Material Design詳解（動畫篇）

今天就先來說說第四部分——Material新增的動畫：

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

• Touch feedback（觸摸反饋）
• Reveal effect（揭露效果）
• Activity transitions（Activity轉換效果）
• Curved motion（曲線運動）
• View state changes （視圖狀態改變）
• Animate Vector Drawables（可繪矢量動畫）

這篇文章先介紹上面6種中比較常用前三種，由于后三種現在資料不多，而且好像不是特別常用，等我研究明白了再給補上。

觸摸反饋：

在Android L5.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:

使用方法：

 

應用ViewAnimationUtils.createCircularReveal()方法可以去創建一個RevealAnimator動畫

ViewAnimationUtils.createCircularReveal源碼如下：

[java] view plain copy print ?

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

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

    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提供了兩種Transition類型：

Enter（進入）：進入一個Activity的效果
Exit（退出）：退出一個Activity的效果

而這每種類型又分為普通Transition和共享元素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中添加如下屬性：

    <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動畫：

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

代碼：

在代碼中同樣可以完成對于transition的設置：

    // 允許使用transitions  
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  

    // 設置一個exit transition  
    getWindow().setExitTransition(new Explode());  

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

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

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

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

步驟二：啟動Activity：

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

啟用普通的Transition：

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

啟用共享元素Transition：

啟動shared element transition和普通的transition稍有不同

在所有需要共享視圖的Activity中，使用android:transitionName屬性對于需要共享的元素分配一個通用的名字。

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

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

如果不想使用transition可以設置options bundle為null。

當需要結束當前Activity并回退這個動畫時調用Activity.finishAfterTransition()方法

兼容性：

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

• Activity transitions
• Touch feedback
• Reveal animations

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

寫在最后：

我將Material Design分為如下四部分：