仿噹噹App首頁按鈕漸變動畫效果

昨天群裡有個朋友說噹噹App首頁頂部的那幾個按鈕漸變動畫效果如何實現。然後果斷安裝了當當App，開啟檢視下是什麼樣的動畫。來看下噹噹App首頁：

可以看到當我滑動一些距離後，頂部三個淺紅色的按鈕從右邊第一個依次以從小到大的，然後再恢復到原大小的動畫效果。還不能體會的朋友可以安裝噹噹的App親自體驗一下。

我們都知道Android為我們提供了三種動畫實現，我之前寫過動畫的系列部落格，分別講解了Android三種動畫的實現方式和具體分析。這裡我就不再過多介紹了，如果想了解更多的話，可以看這裡：Android動畫之旅

今天我們要實現的動畫效果簡單分析後流程如下：按鈕從右到左以漸變和縮放的效果來展示。核心的地方就是動畫的組合播放和次序播放。相信瞭解屬性動畫的朋友都不陌生。

ok，來看我們今天實現的效果：

如何該實現這樣的動畫效果呢？ 上面我們分析了動畫的核心就是組合動畫播放以及次序的播放。

屬性動畫的實現可以分為兩種方式：

（1）程式碼中實現

（2）XML種配置實現

我們採用第二種方式。首先我們要在res目錄下建立animator資料夾。/res/animator

在animator中建立我們objectAniamtor動畫。我們分析了，動畫首先是透明度漸變和X,Y軸的放大，當放大完畢後再縮放到圖片本身大小。ok，很簡單，直接看程式碼：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- 透明度漸變動畫 -->
    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="0.5"
        android:valueTo="1.0"
        android:duration="700"
        />
    <!-- X軸方向放大 -->
    <objectAnimator
        android:propertyName="scaleX"
        android:valueFrom="0.7"
        android:valueTo="1.1"
        android:duration="700"
        />
    <!-- Y軸方向放大 -->
    <objectAnimator
        android:propertyName="scaleY"
        android:valueFrom="0.7"
        android:valueTo="1.1"
        android:duration="700"
        />
    <!-- X軸方向縮放到圖片大小 -->
    <objectAnimator
        android:propertyName="scaleX"
        android:valueFrom="1.1"
        android:valueTo="1.0"
        android:duration="700"
        android:startOffset="700"
        />
    <!-- Y軸方向縮放到圖片大小 -->
    <objectAnimator
        android:propertyName="scaleY"
        android:valueFrom="1.1"
        android:valueTo="1.0"
        android:duration="700"
        android:startOffset="700"
        />
</set>

基本的實現過程我都標記了註釋，startOffset屬性來指定動畫在*ms後開始執行。即當放大透明度動畫完成後開始縮放到原來大小。因為動畫是第一個--->第二個---->第三個逐漸去改變的，給使用者帶來層次感的效果。所以我們還需要使用Animator的setStartDelay()方法設定一下動畫的延遲播放：

twoSet.setStartDelay(100);
threeSet.setStartDelay(250);

三個動畫的效果基本一致，只是縮放的係數不同，大家可以自行調節。

到這裡相信大家對動畫的實現原理都瞭解了。大家可以動手體驗一下。ok，今天的部落格就寫到這了，工作！！！ thks~

原始碼下載