1. 程式人生 > >Android Animation動畫詳解(二): 組合動畫特效

Android Animation動畫詳解(二): 組合動畫特效

前言

    上一篇部落格Android Animation動畫詳解(一): 補間動畫 我已經為大家介紹了Android補間動畫的四種形式,相信讀過該部落格的兄弟們一起都瞭解了。如果你還不瞭解,那點連結過去研讀一番,然後再過來跟著我一起學習如何把簡單的動畫效果組合在一起,做出比較酷炫的動畫特效吧。

一、 動畫的續播

    如題,大家想想,如果一個頁面上包含了許多動畫,這些動畫要求按順序播放,即一個動畫播放完成後,繼續播放另一個動畫,使得這些動畫具有連貫性。那該如何實現呢? 有開發經驗或者是邏輯思維的人肯定會想,對動畫進行監聽啊,如果這個動畫播放完了,再去播放另一個動畫不就好了。

    Congratulations, 你和我想的是一樣一樣的。

    我們看下通過這種動畫播放監聽如何去做:

 private void continueAnim(){
        // 先載入第一個動畫
        Animation translate = AnimationUtils.loadAnimation(getActivity(), R.anim.translate_animation);
        // 在載入第二個動畫
        final Animation scale = AnimationUtils.loadAnimation(getActivity(), R.anim.scale_animation);

        // 接下來,我們隊第一個動畫進行監聽,當它播放完成後,我們播放第二個動畫
        translate.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                imgView.startAnimation(scale);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        imgView.startAnimation(translate);
    }

    註釋我已經寫得挺詳細了,可以說,這種方法so easy,沒啥可說的。

    除了上面介紹的使用監聽器監聽動畫播放結束之外,還有一個更easy方法,也是我們優先推薦使用的,那就是Animation Set。

    這裡,我們要引入一個動畫的屬性:startOffset。 如何去使用呢?看下定義動畫的程式碼:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:fillEnabled="true">

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="3000"/>

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:startOffset="3000"
        />
</set>

  仔細看下translate定義的動畫,它其中就有一個屬性startOffset,這個屬性的值,其實就是alpha動畫的duration的值,他的意思是,延遲三秒後播放,其實也就是第一個alpha動畫播放完成後再播放。

Animation continueAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.continue_animation);
imgView.startAnimation(continueAnim);

好啦,寫到這,讓我們看下執行的效果吧:

二、 動畫的重播

    重播動畫,故名思議,就是動畫重複播放。大家看下上面那個gif的動態圖,其實就是重複播放動畫。那Android如何重複播放動畫呢?

   其實very easy,因為Android本身為定義動畫提供了兩個屬性repeatCount和repeatMode,只要為你的動畫設定上這兩個屬性,那就ok了!

   為了方便記憶,讓我們稍微看下程式碼吧:

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:repeatCount="5"
        android:repeatMode="restart"
        />

這裡我們指定了repeatCount為5,則動畫要播放5次,repeatMode為“restart”,則動畫每次都是重複播放。repeatMode還有個取值“reverse”,這是指讓動畫倒敘播放。 看下效果。

三、 Activity的切換動畫

    說道Activity切換動畫,我想大家肯定都不陌生,比如你玩淘寶、美團啥的,你會發現它們的頁面切換都是從右向左滑動進入的,這其實就是Activity切換動畫的應用。或許大家初始會覺得挺難,但我要告訴你的是,其實這玩意真簡單,如果你已經會了如何定義動畫(特指補間動畫),那麼你只要再理解下一個方法——overridePendingTransition即可。

    先讓我們一起看下這個方法的定義:

/**
     * @param enterAnim A resource ID of the animation resource to use for
     * the incoming activity.  Use 0 for no animation.
     * @param exitAnim A resource ID of the animation resource to use for
     * the outgoing activity.  Use 0 for no animation.
     */
    public void overridePendingTransition(int enterAnim, int exitAnim) {
        try {
            ActivityManagerNative.getDefault().overridePendingTransition(
                    mToken, getPackageName(), enterAnim, exitAnim);
        } catch (RemoteException e) {
        }
    }
第一個引數enterAnim就是說新的要啟動的Activity進入時的動畫,第二個引數exitAnim,說的其實是原先的Activity退出時的動畫效果。

接下來讓我們定義兩個動畫資源:fade_in.xml和hold_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    >
    <alpha
        android:fromAlpha="0.2"
        android:toAlpha="1.0"
        android:duration="1000"
        />
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        android:duration="1000"
        />
</set>

定義動畫結束後,那我們只需要在啟動新Activity或者結束Activity時,複寫overridePendingTransition方法,並傳入動畫就好啦:
Intent intent = new Intent(getActivity(),SecondActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.fade_in,R.anim.hold_out);

或者是:

public void back(View view){
        finish();
        overridePendingTransition(R.anim.fade_in,R.anim.hold_out);
}
看下效果吧:


有沒有被驚歎道,原來就這麼easy啊! 趕快自己也動手試下吧。

Follow Me:

    其實Android簡單的動畫就這麼些個,複雜的動畫無非也是把這些動畫整合在一起使用而已,大家遇到複雜的動畫不要太慌,只要分析清楚它的實現原理,一步步的來解鎖,都是可以搞定的啦。

    之後,我會再寫兩篇部落格,介紹我在開發過程中使用過的兩次動畫,當然,並不是很難的那種,只是分享經驗而已,敬請期待,歡迎指點。