ANDROID L——Material Design詳解（動畫篇），androiddesign

ANDROID L——Material Design詳解（動畫篇），androiddesign

轉載請註明本文出自大苞米的部落格（http://blog.csdn.net/a396901990），謝謝支援！

Android L：

Google已經確認Android L就是Android Lollipop（5.0）。

前幾天發現Android5.0正式版的sdk已經可以下載了，而且首次搭載Android L系統的Nexus 6和 Nexus 9也即將上市。

所以是時候開始學習Android L了！

關於Android L如何配置模擬器和建立項目，如果大家有興趣的話可以看看我之前的一篇文章：

Android L——模擬器配置及建立項目

Material Design：

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

Material Design包含了很多內容，我大致把它分為四部分：

主題和布局——ANDROID L——Material Design詳解（主題和布局）

視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）

UI控制項——ANDROID L——Material Design詳解（UI控制項）

動畫——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:

Circular Reveal是一個Android L新增的動畫效果，但我始終不知道如何翻譯這個名字，圓形揭示？

使用方法：

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

ViewAnimationUtils.createCircularReveal源碼如下：

    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動畫對象。
這五個參數分別是： view 操作的視圖 centerX 動畫開始的中心點X centerY 動畫開始的中心點Y startRadius 動畫開始半徑 startRadius 動畫結束半徑
根據下面的和代碼可以很容易的瞭解這幾個參數的作用：

        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類型：

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裡面的元素就是之前介紹過的，使用方法和以前的AnimationSet差不多，具體如何使用大家可以參考官方文檔。

代碼：

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

// 允許使用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：

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());</span>

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

        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分為如下四部分：

主題和布局——ANDROID L——Material Design詳解（主題和布局）

視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）

UI控制項——ANDROID L——Material Design詳解（UI控制項）

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

十一放假回來開始學習Android L，連更了6篇文章終於把Material Design中大部分特性介紹完畢（動畫篇還剩幾個小內容，過幾天研究明白了再給補上）

接下來準備寫幾個小例子，把視圖陰影，動畫和新增的UI控制項充分結合起來。

Android 5.0真的做出了很大的變化，有一種脫胎換骨的感覺，但說實話模擬器用的真心不爽，啥時候Genymotion可以支援5.0啊。。。

Material Design是什？

Google推出了全新的設計語言Material Design。Google表示，這種設計語言旨在為手機、平板電腦、台式機和“其他平台”提供更一致、更廣泛的“外觀和感覺”。
Google安卓作業系統使用者體驗主管馬蒂亞斯·杜拉特（Matias Durate）在今天的I/O開發人員大會主題演講中表示：“我們想象著，如果像素不僅有顏色，還有深度，那會是怎樣的一番情景？如果有一種材料可以改變它的質地，那又會如何？這種暢想最終讓我們開發出了我們稱之為Material Design的設計語言。”
Material Design語言的一些重要功能包括 系統字型Roboto的升級版本 ，同時顏色更鮮豔，動畫效果更突出。杜拉特還簡要談到了新架構的一些變化——這個新架構也於今天在 google.com/design 公開發布。Google的想法是讓Google平台上的開發人員掌握這個新架構，從而讓所有應用就有統一的外觀，就像是蘋果向開發人員提出的設計原則一樣。
Google還基於這種新的設計語言對本公司旗艦應用進行了重新設計，包括安卓和網頁端的Gmail和Calendar。大家可能還會記得，最近曾看到過有關這些變動的文章， 有些部落格 已經掌握了外泄截屏，顯示經過了重新設計的Gmail，介面更乾淨、更簡約。
在安卓平台上，這種新介面被稱為Material，支援各種新動畫效果，具有內建的即時UI陰影，以及可在不同螢幕之間切換的hero元素。
 
我是一個Android初學者，Android l的發布，對初學者意味著什？

不意味著什麼，初學就要學最新的。Android L重大的變化主要體現在UI與功能上，Google提出了Material Design的設計理念。我認為這個版本的代碼結構和之前的Android版本在大體上沒什麼不同，因此大多數的文檔還是可以用的。推薦去Google下載一份Android L的開發文檔，看看代碼上有沒有什麼變動。因為你初學，建議你在設計時優先學習卡片式布局、Fragment等等，盡量不要用Android 2.3以後被摒棄掉的方法和類。我也是一個Android開發人員，做過一些小應用，有問題歡迎來提問。希望這些能協助到你。