Android項目總結(3)-登陸頁圖片循環過渡播放動畫效果

時間  2019-11-17
標籤 android 項目 總結 登陸 圖片 循環 過渡 播放 動畫 效果 欄目 Android 简体版
原文   原文鏈接

這是項目總結第三篇，前兩篇分別爲：java

1. Android 項目總結(1)- 之弧形ViewPager 和弧形HeaderViewandroid

2 . Android項目總結（二）時間、數字選擇器和省市區三級聯動ide

今天爲你們分享一個簡單的登陸背景動畫，圖片循環播放動畫，具體效果是啥樣子的呢？先上一張效果圖： 動畫

login_alpha

login_alpha2.gif

1、需求

咱們開發APP的時候，通常都有一個註冊登陸的入口頁面，這個頁面的呈現有不少種方式，如：spa

  • 靜態背景圖 + 註冊登陸按鈕
  • 視頻背景 + 註冊登陸按鈕
  • 背景動畫 + 註冊登陸按鈕

今天分享的就是第三種 ，背景動畫，效果圖如上所示，接下來就分析一下這個動畫：code

1 . 有 N 張圖片切換（項目中用的4張） 2 . 圖片切換過渡：當前圖片放大而且淡出，下一張顯示的圖片淡入。 3 . 圖片循環播放，顯示到最後一張時又從第一張開始。cdn

2、實現

上面對照效果圖分析了動畫的幾個點，那麼接下來就看怎麼實現，咱們選擇用屬性動畫來實現，具體實現思路以下:視頻

本例中有4張圖片：A,B,C,D 有4組動畫： A->B B->C C->D D->Axml

這樣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 的時候會跳動。因此咱們把他放到前面復位。

3、總結

很簡單的一個循環過渡動畫，本文是用屬性動畫實現的。固然確定還有其餘實現方式，如：放一個gif圖或者幀動畫也是能夠的，可是這樣可能就須要切不少張圖，增長了咱們apk 的體積。其餘方法你們能夠去探索一下，歡迎交流。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程