這是專案總結第三篇，前兩篇分別為：
1. Android 專案總結(1)- 之弧形ViewPager 和弧形HeaderView
2 . Android專案總結（二）時間、數字選擇器和省市區三級聯動
今天為大家分享一個簡單的登入背景動畫，圖片迴圈播放動畫，具體效果是啥樣子的呢？先上一張效果圖：
一、需求
我們開發APP的時候，一般都有一個註冊登入的入口頁面，這個頁面的呈現有很多種方式，如：
- 靜態背景圖 + 註冊登入按鈕
- 視訊背景 + 註冊登入按鈕
- 背景動畫 + 註冊登入按鈕
今天分享的就是第三種 ，背景動畫，效果圖如上所示，接下來就分析一下這個動畫：
1 . 有 N 張圖片切換（專案中用的4張） 2 . 圖片切換過渡：當前圖片放大並且淡出，下一張顯示的圖片淡入。 3 . 圖片迴圈播放，顯示到最後一張時又從第一張開始。
二、實現
上面對照效果圖分析了動畫的幾個點，那麼接下來就看怎麼實現，我們選擇用屬性動畫來實現，具體實現思路如下:
本例中有4張圖片：A,B,C,D 有4組動畫： A->B B->C C->D D->A
這樣4組就實現了迴圈切換
然後就是每一組動畫的實現，其實很簡單，一個Scale 放大效果+ 一個 alpha 效果：
A -> B:
ObjectAnimator animator1 = ObjectAnimator.ofFloat(mBgView1, "alpha", 1.0f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mBgView2, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale1 = ObjectAnimator.ofFloat(mBgView1, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale2 = ObjectAnimator.ofFloat(mBgView1, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet1 = new AnimatorSet();
animatorSet1.setDuration(5000);
animatorSet1.play(animator1).with(animator2).with(animatorScale1).with(animatorScale2);
複製程式碼B->C:
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mBgView2, "alpha", 1.0f, 0f);
ObjectAnimator animator4 = ObjectAnimator.ofFloat(mBgView3, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale3 = ObjectAnimator.ofFloat(mBgView2, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale4 = ObjectAnimator.ofFloat(mBgView2, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet2 = new AnimatorSet();
animatorSet2.setDuration(5000);
animatorSet2.play(animator3).with(animator4).with(animatorScale3).with(animatorScale4);
複製程式碼C->D:
ObjectAnimator animator5 = ObjectAnimator.ofFloat(mBgView3, "alpha", 1.0f, 0f);
ObjectAnimator animator6 = ObjectAnimator.ofFloat(mBgView4, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale5 = ObjectAnimator.ofFloat(mBgView3, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale6 = ObjectAnimator.ofFloat(mBgView3, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet3 = new AnimatorSet();
animatorSet3.setDuration(5000);
animatorSet3.play(animator5).with(animator6).with(animatorScale5).with(animatorScale6);
複製程式碼D->A:
ObjectAnimator animator7 = ObjectAnimator.ofFloat(mBgView4, "alpha", 1.0f, 0f);
ObjectAnimator animator8 = ObjectAnimator.ofFloat(mBgView1, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale7 = ObjectAnimator.ofFloat(mBgView4, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale8 = ObjectAnimator.ofFloat(mBgView4, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet4 = new AnimatorSet();
animatorSet4.setDuration(5000);
animatorSet4.play(animator7).with(animator8).with(animatorScale7).with(animatorScale8);
複製程式碼上面的程式碼展示了每一組動畫，將每組動畫中的幾個動畫放在一個AnimatorSet 中，設定為同時播放。最後我們需要將這4組動畫按照順序連結起來，怎麼連結呢？用AnimatorSet的playSequentially方法。如下：
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(animatorSet1, animatorSet2, animatorSet3, animatorSet4);
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// 這個是實現迴圈播放的關鍵
animation.start();
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorSet.start();
複製程式碼其中有一個關鍵點：在監聽動畫結束的回撥方法中，呼叫animation.start(); 實現迴圈播放。
你以為到此這篇文章就結束了嗎？ 當然還沒有，上面的程式碼其實效果已經出來了，但是還是有點問題？什麼問題呢？就是當播放完第一次，後面迴圈播放的時候會有一個跳動。 為什麼呢？ 看看上面的程式碼就會發現，當執播放完一輪後，4張圖片都放大了 1.3 倍數。
ObjectAnimator animatorScale1 = ObjectAnimator.ofFloat(mBgView1, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale2 = ObjectAnimator.ofFloat(mBgView1, "scaleY", 1.0f, 1.3f);
複製程式碼然後重複播放的時候，又會執行scale 動畫，從 1.0 -> 1.3 ，因此實際上會先從 1.3 -> 1.0。再執行縮放動畫，這就是跳動的原因，因此在播放完一輪後，我們要將放大的View 先復位到原大小，然後在執行動畫。在onAnimationEnd 方法中復位。
最終程式碼如下：
ObjectAnimator animator1 = ObjectAnimator.ofFloat(mBgView1, "alpha", 1.0f, 0f);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mBgView2, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale1 = ObjectAnimator.ofFloat(mBgView1, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale2 = ObjectAnimator.ofFloat(mBgView1, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet1 = new AnimatorSet();
animatorSet1.setDuration(5000);
animatorSet1.play(animator1).with(animator2).with(animatorScale1).with(animatorScale2);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mBgView2, "alpha", 1.0f, 0f);
ObjectAnimator animator4 = ObjectAnimator.ofFloat(mBgView3, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale3 = ObjectAnimator.ofFloat(mBgView2, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale4 = ObjectAnimator.ofFloat(mBgView2, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet2 = new AnimatorSet();
animatorSet2.setDuration(5000);
animatorSet2.play(animator3).with(animator4).with(animatorScale3).with(animatorScale4);
ObjectAnimator animator5 = ObjectAnimator.ofFloat(mBgView3, "alpha", 1.0f, 0f);
ObjectAnimator animator6 = ObjectAnimator.ofFloat(mBgView4, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale5 = ObjectAnimator.ofFloat(mBgView3, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale6 = ObjectAnimator.ofFloat(mBgView3, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet3 = new AnimatorSet();
animatorSet3.setDuration(5000);
animatorSet3.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// 放大的View復位
mBgView1.setScaleX(1.0f);
mBgView1.setScaleY(1.0f);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorSet3.play(animator5).with(animator6).with(animatorScale5).with(animatorScale6);
ObjectAnimator animator7 = ObjectAnimator.ofFloat(mBgView4, "alpha", 1.0f, 0f);
ObjectAnimator animator8 = ObjectAnimator.ofFloat(mBgView1, "alpha", 0f, 1.0f);
ObjectAnimator animatorScale7 = ObjectAnimator.ofFloat(mBgView4, "scaleX", 1.0f, 1.3f);
ObjectAnimator animatorScale8 = ObjectAnimator.ofFloat(mBgView4, "scaleY", 1.0f, 1.3f);
AnimatorSet animatorSet4 = new AnimatorSet();
animatorSet4.setDuration(5000);
animatorSet4.play(animator7).with(animator8).with(animatorScale7).with(animatorScale8);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(animatorSet1, animatorSet2, animatorSet3, animatorSet4);
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// 將放大的View 復位
mBgView2.setScaleX(1.0f);
mBgView2.setScaleY(1.0f);
mBgView3.setScaleX(1.0f);
mBgView3.setScaleY(1.0f);
mBgView4.setScaleX(1.0f);
mBgView4.setScaleY(1.0f);
// 迴圈播放
animation.start();
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorSet.start();
複製程式碼xml程式碼：
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/login_bg_image4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/login_bg4" />
<ImageView
android:id="@+id/login_bg_image3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/login_bg3" />
<ImageView
android:id="@+id/login_bg_image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/login_bg2" />
<ImageView
android:id="@+id/login_bg_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/login_bg1" />
</FrameLayout>
複製程式碼注意ImageView的順序，第一張圖應該在最上面。
注意： 四個View復位的地方不一樣，第一個是在第二組動畫執行完畢後復位的，為什麼沒有和其他幾個一起放到最後呢？ 因為 D -> A 的時候就需要顯示A,這個時候這一輪是沒有播放完的，因此D->A 的時候會跳動。所以我們把他放到前面復位。
三、總結
很簡單的一個迴圈過渡動畫，本文是用屬性動畫實現的。當然肯定還有其他實現方式，如：放一個gif圖或者幀動畫也是可以的，但是這樣可能就需要切很多張圖，增加了我們apk 的體積。其他方法大家可以去探索一下，歡迎交流。