高仿微信搶紅包動畫特效

昨天與一個兄弟聊天時他說想搞個翻轉動畫，類似於微信搶紅包時硬幣旋轉的效果。平時這個動畫沒怎麼注意，當時就裝作一臉矇蔽的樣子讓他給我發紅包。（哈哈，可惜他沒上當...）

最後自發自搶體驗了一下（輕噴..）感覺這個動畫還是蠻不錯的。第一感覺就是用屬性動畫進行Y軸旋轉180度。在好奇的心情下開啟了AS準備折騰一番...

ok，蛋疼的前序扯完了，進入今天的主題：高仿微信搶紅包動畫。就是模仿點選紅包然後，開啟紅包的翻轉過程。好了，開車吧~

先來看下今天的效果：

            

原諒我沒有做Gif圖，大家可以腦補一下。或者在文章末下載原始碼自己體驗一發。

（1）動畫過程：

          我們將紅包分為兩個佈局介面，一個是上面顯示的，另一個是翻轉後顯示的。進入介面後會首先顯示搶到紅包的介面，此時點選紅包，紅包會啟動一個類似於翻牌的180度旋轉特效，當翻轉到一半時即90度，我們需要讓背面的佈局介面顯示，正面的隱藏，然後顯示紅包已搶完的背面介面。（淚流滿面.,..）

（2）原理：

        從上面動畫過程的分析，我們可以拆分為以下幾個實現過程：

        1> 紅包佈局的單擊事件。

        2> 單擊事件中，開啟紅包翻轉動畫。

        3> 翻轉的同時，正面隱藏，背面顯示出來，完成一次翻轉過程。

（3）實現：

        在實現之前，還是一句話介紹下屬性動畫：屬性動畫是Android3.0之後Google退出的最新動畫Api。屬性動畫主要的特點是可以改變View的屬性值，使View在動畫的效果下發生實質性的改變。

今天我們主要講解的是如何實現翻轉的過程。瞭解屬性動畫的朋友肯定都想到了，旋轉嘛，RotationY就可以啦。如果還不瞭解屬性動畫的，可以看我之前寫的動畫系列專欄文章：

Android動畫之旅

好了，既然是旋轉，那麼我們就先了解下屬性動畫中關於旋轉的Api

ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(view,"RotationY",0,180);

從上圖我們可以看到，我們使用了ofFloat來構造旋轉動畫，分別有三個引數：

（1）動畫作用的目標View。

（2）動畫執行的效果。

（3）起始值

（4）結束值

上面是使用Java程式碼進行建立，我們還可以在res下進行xml的建立：

首先需要res下建立animator資原始檔目錄（預設是不存在的），然後在其中建立animator資源：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 旋轉 -->
    <objectAnimator
        android:duration="@integer/anim_time"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180"
        />
</set>

動畫的建立很簡單，相信大家都滾瓜爛熟了。有些朋友可能對翻轉度數模糊不清，那麼我們就拿0-180，-180-0，180-0這幾個度數範圍從手機螢幕的角度來簡單說一下:

0-180：即從0度旋轉到180度，目標View會從左向右方向旋轉。

180-0：即從180度旋轉到0度，目標View會先初始化到旋轉180度後的狀態，然後從右向左旋轉。

-180-0：即從-180度旋轉到0度，目標View會先初始化到旋轉180度後的狀態，然後從左向右旋轉。

0 - -180：即從0度旋轉到-180度，目標View會從右向左方向旋轉。

ok，瞭解了這些。想必大家對於今天的效果已經胸有成竹了吧。

再來理解下紅包翻轉動畫的流程：

正面會從左向右旋轉180度（0-180），當旋轉到90度的時候讓其隱藏，此時背景的佈局也同時旋轉著當旋轉到一半後顯示出來，背景的佈局怎麼旋轉呢？背景的佈局給我們的感覺是從裡向外的顯示，那麼肯定是-180度到0度的過程。記住，整個過程都是需要從左向右新旋轉。所以從上面四個選項旋轉雙選題你也會了吧。

ok,知道了旋轉角度，以及隱藏顯示的時機，那麼看下面程式碼，我們直接在xml中定義動畫：

從0-180度旋轉，旋轉到90度後隱藏，即紅包正面的旋轉動畫：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 旋轉 -->
    <objectAnimator
        android:duration="@integer/anim_time"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180"
        />
    <!-- 消失 -->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:startOffset="@integer/anim_half_time"
        />
</set>

上面程式碼中，首先讓正面佈局在anim_time的時間段內從0度旋轉到180度，旋轉的同時，控制正面佈局的消失，我們使用alpha來控制透明度。startOffset用來控制動畫開始的時機。

<!-- 消失 -->
<objectAnimator
    android:duration="0"
    android:propertyName="alpha"
    android:valueFrom="1.0"
    android:valueTo="0.0"
    />
<!-- 旋轉 -->
<objectAnimator
    android:duration="@integer/anim_time"
    android:propertyName="rotationY"
    android:valueFrom="-180"
    android:valueTo="0"
    />
<!-- 顯示 -->
<objectAnimator
    android:duration="0"
    android:propertyName="alpha"
    android:startOffset="@integer/anim_half_time"
    android:valueFrom="0.0"
    android:valueTo="1.0"
    />

上面是紅包背面佈局的動畫程式碼：

首先讓其透明度為0，既給人隱藏的效果。然後從-180度在anim_time的時間段旋轉到0度，同時在旋轉到90度時變為可見狀態。那麼這樣一個翻紅包的動畫效果就輕鬆實現了！

由於在翻轉時，如果View太大，(接近螢幕大小），此時旋轉會出現View超出螢幕的效果，所以還需要我們控制鏡頭的距離，即設定正面背面佈局的鏡頭焦距：

//設定視角間距，防止旋轉時超出邊界區域
private void setCameraDistance() {
    int distance = 6000;
    float scale = getResources().getDisplayMetrics().density * distance;
    llyFront.setCameraDistance(scale);
    llyBack.setCameraDistance(scale);
}

最後就是開啟動畫啦~

ok，關於翻轉紅包的動畫效果就介紹到這裡了，相信大家對旋轉到翻轉的特效有了更新的認識，有問題的朋友及時給我留言，thks~!

原始碼下載