Android 動畫之 ---- View Animation (視圖動畫,補間動畫)

View Animation通過在兩個關鍵幀之間補充漸變的動畫效果來實現,其優點是可以節省空間。Android目前支持:
     alpha:漸變透明度動畫效果          AlphaAnimation(透明度)
     scale: 漸變縮放動畫效果      ScaleAnimation(縮放)
     translate: 漸變位置移動動畫效果      TranslateAnimation(位移)
     rotate: 漸變旋轉動畫效果           RotateAnimation(旋轉)
     組合動畫:在一起完成酷炫的動畫效果。      AnimationSet(組合)

java類名 xml關鍵字 描述信息
AlphaAnimation alpha 放置在res/anim/目錄下 漸變透明度動畫效果
RotateAnimation rotate 放置在res/anim/目錄下 畫面轉移旋轉動畫效果
ScaleAnimation scale 放置在res/anim/目錄下 漸變尺寸伸縮動畫效果
TranslateAnimation translate 放置在res/anim/目錄下 畫面轉換位置移動動畫效果
AnimationSet set 放置在res/anim/目錄下 一個持有其它動畫元素alpha、scale、translate、rotate或者其它set元素的容器

    
實現動畫的方式有兩種:
     1.代碼創建
     2.xml佈局
可以看出來Animation抽象類是所有補間動畫類的基類,所以基類會提供一些通用的動畫屬性方法,如下我們就來詳細看看這些屬性:

xml屬性 java方法 解釋
android:detachWallpaper setDetachWallpaper(boolean) 是否在壁紙上運行
android:duration setDuration(long) 動畫持續時間,毫秒爲單位
android:fillAfter setFillAfter(boolean) 控件動畫結束時是否保持動畫最後的狀態, 設置的是在這個動畫結束後是否保留這個動畫的最後一幀的效果填充後面的動畫,它的設置不受fillEnabled的影響
android:fillBefore setFillBefore(boolean) 控件動畫結束時是否還原到開始動畫前的狀態,如果fillEnabled的值爲true,它的值纔有意義,否則沒有意義默認值是true,視圖會停留在動畫開始的狀態
android:fillEnabled setFillEnabled(boolean) 與android:fillBefore效果相同
android:interpolator setInterpolator(Interpolator) 設定的插值器,它主要用來爲動畫設置一些特殊的效果,比方說:加速運動、減速運動、動畫結束的時候彈起等等。
android:repeatCount setRepeatCount(int) 動畫重複的次數(注意是重複的次數),可以是你想循環播放的次數,也是可以是infinite:表示無限循環
android:repeatMode setRepeatMode(int) 重複類型,reverse:表示倒序回訪,restart:表示重新放一遍這個屬性必須與repeatCount聯合使用,因爲它的前提是重複,即重複播放時的播放類型。
android:startOffset setStartOffset(long) 調用start函數之後等待開始運行的時間,單位爲毫秒
android:zAdjustment setZAdjustment(int) 表示被設置動畫的內容運行時在Z軸上的位置(top/bottom/normal),默認爲normal

android:fillAfter 這個屬性設置的是在這個動畫結束後是否保留這個動畫的最後一幀的效果填充後面的動畫,true表示停留在最後一幀,false表示不停留在最後一幀

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "0"  
             android:toDegrees= "300"  
             android:pivotX= "50%"  
             android:pivotY= "50%"  
             android:fillAfter= "true"  
             android:duration= "1000">  
    </rotate>  

這裏寫圖片描述
上面的xml屬性動畫的配置中,我們將fillAfter的值設置爲true,可以看到它停留在了最後一幀。

android:fillBefore 它表示View動畫結束時是否會停留在動畫開始的狀態

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "0"  
             android:toDegrees= "300"  
             android:pivotX= "50%"  
             android:pivotY= "50%"  
             android:fillEnabled= "true"  
             android:fillBefore= "true"  
             android:duration= "1000">  
    </rotate>  

這裏寫圖片描述

可以看到圖片旋轉300度後又回到了最開始的狀態。
android:repeatMode 重複類型,取值爲reverse|restart,reverse:表示倒序回放,restart:表示重新放一遍,這個屬性必須與repeatCount聯合使用,因爲它的前提是重複,即重複播放時的播放類型。
也就是說,無論我們補間動畫的哪一種都已經具備了這種屬性,也都可以設置使用這些屬性中的一個或多個。

<?xml version="1.0" encoding= "utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
         android:fromDegrees= "0"  
         android:toDegrees= "360"  
         android:pivotX= "50%"  
         android:pivotY= "50%"  
         android:repeatMode= "restart"  
         android:repeatCount= "2"  
         android:fillEnabled= "true"  
         android:fillBefore= "true"  
         android:duration= "1000">  
</rotate> 

reverse:表示倒序回放,restart:表示重新放一遍
android:repeatMode=”restart”                android:repeatMode=”reverse”
這裏寫圖片描述 這裏寫圖片描述

在上述xml文件配置中我們將repeatCount設置爲2,從運行效果可以看出兩者的區別restart是連續播放,而reverse播放一遍後倒序播放了一遍。
android:repeatCount 動畫重複的次數(注意是重複的次數),可以是你想循環播放的次數數值,也是可以取值infinite:表示無限循環,這個屬性在上面也介紹用到了,就不再上圖片了。

那接下來我們就看看每種補間動畫特有的一些屬性說明吧.

2-2-2 Alpha屬性詳解

xml屬性 java方法 解釋
android:fromAlpha AlphaAnimation(float fromAlpha, …) 動畫開始的透明度(0.0到1.0,0.0是全透明,1.0是不透明)
android:toAlpha AlphaAnimation(…, float toAlpha) 動畫結束的透明度,同上

其實它的意義很好理解,一個View透明度變化,肯定是從一個透明度變爲另一個透明度。這樣就需要兩個屬性fromAlpha和toAlpha,這個變化的過程是android自動幫我們實現的,也就是說假如從完全透明,到完全不透明這中間的過程是谷歌工程師爲我們提供好的,當然我們也可以改變。
2-2-2-1 Alpha xml實現

<?xml version="1.0" encoding= "utf-8"?>  
<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromAlpha= "0.0"  
        android:toAlpha= "1.0"  
        android:repeatCount= "2"  
        android:duration= "3000"  
        android:fillAfter= "true" >  
</alpha> 

這裏寫圖片描述

在上面的xml配置中我們設置了圖片的透明度從0逐漸變化到1,可以看到運行效果從完全不透明變化到完全透明。
2-2-2-2 Alpha代碼實現
針對alpha動畫所特有的屬性,將設置的數據傳遞到AlphaAnimation的構造方法中即可,AlphaAnimation所有的構造函數如下圖所示:
這裏寫圖片描述
可以看到它一共有兩個構造函數,第一個構造函數我們一般不會用到,這裏主要來看第二個構造函數,可以看到它接收兩個float類型的值,一個是fromAlpha另外一個是toAlpha。也就是在上面xml文件中配置的,所以要想完成上述xml文件中的效果,這裏的fromAlpha和toAlpha需要傳的值分別是0和1,表示透明度從完全透明變化到完全不透明。對於公共的屬性的設置,直接調用公共的方法進行設置就ok了。所以經過上述分析我們可以想到,上述xml文件的代碼實現是下面這樣的

AlphaAnimation alphaAnimation=new AlphaAnimation(0,1);
alphaAnimation.setDuration(3000);
alphaAnimation.setRepeatCount(2);
alphaAnimation.setFillAfter(true);
ivImage.setAnimation(alphaAnimation);

運行效果:
這裏寫圖片描述

2-2-3 Rotate屬性詳解

xml屬性 java方法 解釋
android:fromDegrees RotateAnimation(float fromDegrees, …) 旋轉開始角度,正代表順時針度數,負代表逆時針度數
android:toDegrees RotateAnimation(…, float toDegrees, …) 旋轉結束角度,正代表順時針度數,負代表逆時針度數
android:pivotX RotateAnimation(…, float pivotX, …) 縮放起點X座標(數值、百分數、百分數p,譬如50表示以當前View左上角座標加50px爲初始點、50%表示以當前View的左上角加上當前View寬高的50%做爲初始點、50%p表示以當前View的左上角加上父控件寬高的50%做爲初始點)
android:pivotY RotateAnimation(…, float pivotY) 縮放起點Y座標,同上規律

fromeDegress和toDegress這兩個屬性很好理解fromDegress表示從動畫開始時旋轉的角度,而toDegress當然就表示動畫結束時旋轉的角度了,如果你還不能理解透徹,相信下面的兩個小例子可以幫助你,首先來看看運行效果。

這裏寫圖片描述

2-2-3-1 Rotate xml實現
它的xml配置文件如下:

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "0"  
             android:toDegrees= "360"  
             android:duration= "1000">  
    </rotate>  

最後XML文件是編寫好了,那麼我們如何在代碼中把文件加載進來並將動畫啓動呢?這是就要藉助AnimationUtils這個類了,只需調用如下代碼即可:

    Animation animation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);  
    ivGirl.startAnimation(animation);  

從運行效果我們可以看到它從起始的0度旋轉了360度。另外我們還能得出一個結論:
默認的旋轉的起始點是View的左上角頂點爲起始點。需要注意的是這裏開始旋轉角度fromDegree與結束時的旋轉角度toDegrees都是是相對於起始位置而言的.
什麼意思呢?看下面這個例子你就會徹底理解。我們修改下xml配置文件,修改如下:

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "60"  
             android:toDegrees= "90"  
             android:fillAfter= "true"  
             android:duration= "10000">  
    </rotate>  

運行效果圖:
這裏寫圖片描述這裏寫圖片描述

在上述xml中我們設置的fromDegress是60度,toDegress是90度,從運行效果中可以看出點擊運行按鈕後,View首先立即旋轉了60度作爲旋轉動畫的起始位置,之後又旋轉了30度到了90度,所以大家一定要理解清楚這裏的toDegress是相對於起始位置而言的。

“pivotX”表示旋轉點X軸座標,也就是我們的View是以哪個點爲基準而旋轉的,它的值可以是數值、百分數、百分數p 三種樣式,比如50、50%、50%p,
當爲50時,表示在當前View的左上角,即原點處加上50px,做爲旋轉點X座標;
當爲50%時, 表示在當前控件的左上角加上自己寬度的50%做爲旋轉點X座標;
當爲50%p時,表示在當前的左上角加上父控件寬度的50%做爲旋轉點X座標。
“pivotY”屬性與”pivotX”屬性一樣。接下來就分別結合實例來詳細理解下這三種取值吧。

取值爲數值

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "0"  
             android:toDegrees= "360"  
             android:pivotX= "75"  
             android:pivotY= "125"  
             android:duration= "10000">  
    </rotate>  

從上面的解釋可以知道,這裏的旋轉的X點的座標是在原點的基礎之上增加75px,而Y點的座標是在原點的基礎之上增加125px。由於圖片的高度和寬度分別爲150、250,運行在這是480*320的模擬器此時1dp=1px)所以我們設置的pivotX=75,pivotY=125也就剛好在圖片的正中間,運行效果如下
這裏寫圖片描述這裏寫圖片描述
注意在這張美女圖片的下巴上有個小白點,這個小白點是圖片的中心位置。我們發現它的旋轉點就是這個View的中心點。

取值爲百分數

取值爲百分數後加p表示旋轉點在原點的基礎之上加上父控件的百分值。如pivotX取值爲50%p就表示旋轉點的x座標在原點基礎之上父控件寬度的50%。經計android:pivotX=”23%p”,android:pivotY=”26%p”時旋轉的點處於View的中間,480*26/100約等於125,即旋轉點的Y座標在座標原點的基礎之上加上125與(1)類似

    <?xml version="1.0" encoding= "utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
             android:fromDegrees= "0"  
             android:toDegrees= "360"  
             android:pivotX= "23%p"  
             android:pivotY= "26%p"  
             android:duration= "10000">  
    </rotate>  

運行效果與上面一樣,就不再上圖了。

取值爲百分數後面加p

<?xml version="1.0" encoding= "utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
         android:fromDegrees= "0"  
         android:toDegrees= "360"  
         android:pivotX= "23%p"  
         android:pivotY= "26%p"  
         android:duration= "10000">  
</rotate>

運行效果與上面一樣,就不再上圖了。
2-2-3-1 Rotate 代碼實現
看看它的構造函數
這裏寫圖片描述
可以看到第二個構造函數中需要兩個參數fromDegrees、toDegrees這個構造函數默認的旋轉的起點是View的左上角的那個點。
第三個構造函數在第二個的基礎之上增加了pivotX和pivotY,用來調整View圍繞旋轉的那個點。它默認的pivotType是Animation.ABSOLUTE及相當於xml中取值爲數值。
第四個構造函數就比較全面了,增加了每個值得pivotType與上面ScaleAnimaion中pivotType是一致的。

RotateAnimation rotateAnimation=new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);
ivImage.startAnimation(rotateAnimation);

2-2-4 Scale屬性詳解

xml屬性 java方法 解釋
android:fromXScale ScaleAnimation(float fromX, …) 初始X軸縮放比例,1.0表示無變化
android:toXScale ScaleAnimation(…, float toX, …) 結束X軸縮放比例
android:fromYScale ScaleAnimation(…, float fromY, …) 初始Y軸縮放比例
android:toYScale ScaleAnimation(…, float toY, …) 結束Y軸縮放比例
android:pivotX ScaleAnimation(…, float pivotX, …) 縮放起點X軸座標(數值、百分數、百分數p,譬如50表示以當前View左上角座標加50px爲初始點、50%表示以當前View的左上角加上當前View寬高的50%做爲初始點、50%p表示以當前View的左上角加上父控件寬高的50%做爲初始點)
android:pivotY ScaleAnimation(…, float pivotY) 縮放起點Y軸座標,同上規律

android:fromXScale起始的X方向上相對自身的縮放比例,類型float,比如1.0代表自身無變化,0.5代表起始時縮小一倍,2.0代表放大一倍
android:toXScale:結尾的X方向上相對自身的縮放比例,類型float
android:fromYScale:起始的Y方向上相對自身的縮放比例,類型float
android:toYScale:結尾的Y方向上相對自身的縮放比例,類型float
android:pivotX: 縮放起點X軸座標,可以是數值、百分數、百分數p ,具體意義roate中已經演示
android:pivotY:縮放起點Y軸座標,取值及意義與pivotX一樣
2-2-4-1 Scale xml實現

    <?xml version="1.0" encoding= "utf-8"?>   
    <scale xmlns:android="http://schemas.android.com/apk/res/android"  
           android:fromXScale= "2.0"  
           android:toXScale= "1.0"  
           android:fromYScale= "2.0"  
           android:toYScale= "1.0"  
           android:pivotX= "50%"  
           android:pivotY= "50%"  
           android:duration= "5000">  

    </scale>  

這裏寫圖片描述

可以清楚的看到這張圖片先是放大了兩倍然後逐漸恢復原狀。
2-2-4-2 Scale 代碼實現
來看看它的構造函數
這裏寫圖片描述
看到它一共有四個構造函數,同樣我們只看它的第二、三、四個構造函數,從構造函數中我們可以清楚的看到它構造函數中所需傳的參數基本與xml文件中的配置一致,其中

ScaleAnimation scaleAnimation=new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);

可能大家看到這個構造函數中的兩個參數有點陌生:pivotXType和pivotXValue(這裏以X爲例)。我們知道xml文件中pivotX的取值可以爲數值、百分數、百分數p,如50,50%,50%p。當爲數值時,表示在當前View的左上角,即原點處加上50px,做爲旋轉點X座標;如果是50%表示在當前控件的左上角加上自己寬度的50%做爲旋轉點X座標;如果是50%p,那麼就是表示在當前控件的左上角加上父控件寬度的50%做爲旋轉點X座標。
這裏的pivotXType就是用來指定我們採取的是哪種數值的。它有三種值:Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT

取值 意義
Animation.ABSOLUTE 表示取值爲數字
Animation.RELATIVE_TO_SELF 表示取值爲百分數
Animation.RELATIVE_TO_PARENT 表示取值爲百分數p

代碼如下:

ScaleAnimation scaleAnimation=new ScaleAnimation(2.0f, 1.0f, 2.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(5000);
ivImage.startAnimation(scaleAnimation);

2-2-5 Translate屬性詳解

xml屬性 java方法 解釋
android:fromXDelta TranslateAnimation(float fromXDelta, …) 起始點X軸座標(數值、百分數、百分數p,譬如50表示以當前View左上角座標加50px爲初始點、50%表示以當前View的左上角加上當前View寬高的50%做爲初始點、50%p表示以當前View的左上角加上父控件寬高的50%做爲初始點)
android:fromYDelta TranslateAnimation(…, float fromYDelta, …) 起始點Y軸從標,同上規律
android:toXDelta TranslateAnimation(…, float toXDelta, …) 結束點X軸座標,同上規律
android:toYDelta TranslateAnimation(…, float toYDelta) 結束點Y軸座標,同上規律

2-2-5-1 Translate xml實現

    <?xml version="1.0" encoding= "utf-8"?>  
    <translate  
        xmlns:android ="http://schemas.android.com/apk/res/android"   
        android:fromXDelta="0"  
        android:fromYDelta="0"  
        android:toXDelta="200"  
        android:toYDelta="300"  
        android:duration="5000">  
    </translate>  

運行效果:

這裏寫圖片描述

2-2-5-1 Translate 代碼實現
首先來看看它的構造函數
這裏寫圖片描述

可以看到它有三個構造函數,其中第三個構造函數中fromXType、fromXValue中的fromXType的取值與上面ScaleAnimaion中的pivotXType的取值是一樣的,具體可以看看上面那個表格。
第二個構造函數需要傳遞fromXDelta、toXDelta、fromYDelta、toYDelta,當採用這個構造函數時默認的是使用Animation.ABSOLUTE,對應xml中的取值爲數值。
代碼實現如下:

TranslateAnimation translateAnimation=new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 200, Animation.ABSOLUTE, 300);
translateAnimation.setDuration(5000);
ivImage.setAnimation(translateAnimation);

2-2-6 AnimationSet詳解

AnimationSet繼承自Animation,是上面四種的組合容器管理類,沒有自己特有的屬性,他的屬性繼承自Animation,所以特別注意,當我們對set標籤使用Animation的屬性時會對該標籤下的所有子控件都產生影響。
接着們就來看一個組合動畫吧
2-2-6-1 AnimationSet xml 實現

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

        <alpha  
            android:fromAlpha= "0.0"  
            android:toAlpha= "1.0"  
            android:duration= "3000" />  

        <scale  
            android:fromXScale= "0.0"  
            android:toXScale= "1.0"  
            android:fromYScale= "0.0"  
            android:toYScale= "1.0"  
            android:pivotX= "50%"  
            android:pivotY= "50%"  
            android:duration= "3000" />  

        <rotate  
            android:fromDegrees= "0"  
            android:toDegrees= "720"  
            android:pivotX= "50%"  
            android:pivotY= "50%"  
            android:duration= "3000"/>  

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

        <alpha  
            android:startOffset= "4000"  
            android:fromAlpha= "1.0"  
            android:toAlpha= "0.0"  
            android:duration= "1000" />  

    </set>  

我們用它來實現一個稍微酷炫點的動畫

這裏寫圖片描述

2-2-6-2 AnimationSet 代碼 實現
首先來看看它的構造函數
這裏寫圖片描述
一般我們都是用到第一個構造函數,可以看到它的第一個參數是boolean shareInterpolator從名字也能看出來它的作用是標識是否將AnimationSet中的插值器運用到集合中的所有動畫,爲true表示AnimationSet集合中的所有動畫都用AnimationSet中設置的插值器,false表示AnimatonSet集合中的動畫想用哪個動畫,需要自己設置。
代碼實現如下

ScaleAnimation scaleAnimation=new ScaleAnimation(0f, 1f, 0f, 1f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(3000);

RotateAnimation rotateAnimation=new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);

TranslateAnimation translateAnimation=new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 85, Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 0);
translateAnimation.setDuration(1000);
translateAnimation.setStartOffset(3000);

AlphaAnimation alphaAnimation=new AlphaAnimation(1f,0f);
alphaAnimation.setDuration(1000);
alphaAnimation.setStartOffset(4000);

AnimationSet animationSet=new AnimationSet(false);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);

ivImage.startAnimation(animationSet);

上面就是一個標準的使用我們定義的補間動畫的模板。至於補間動畫的使用,Animation還有如下一些比較實用的方法介紹:

Animation類的方法 解釋
reset() 重置Animation的初始化
cancel() 取消Animation動畫
start() 開始Animation動畫
setAnimationListener(AnimationListener listener) 給當前Animation設置動畫監聽
hasStarted() 判斷當前Animation是否開始
hasEnded() 判斷當前Animation是否結束

既然補間動畫只能給View使用,那就來看看View中和動畫相關的幾個常用方法吧,如下:

View類的常用動畫操作方法 解釋
startAnimation(Animation animation) 對當前View開始設置的Animation動畫
clearAnimation() 取消當View在執行的Animation動畫

到此整個Android的補間動畫常用詳細屬性及方法全部介紹完畢,如有特殊的屬性需求可以訪問Android Developer查閱即可。如下我們就來個綜合大演練。

2-4 視圖動畫注意事項

補間動畫執行之後並未改變View的真實佈局屬性值。切記這一點,譬如我們在Activity中有一個 Button在屏幕上方,我們設置了平移動畫移動到屏幕下方然後保持動畫最後執行狀態呆在屏幕下方,這時如果點擊屏幕下方動畫執行之後的Button是沒 有任何反應的,而點擊原來屏幕上方沒有Button的地方卻響應的是點擊Button的事件。

2-5 視圖動畫Interpolator插值器詳解
2-5-1 插值器簡介
首先來看下官網給出的interpolator的定義:interpolaotor定義了動畫變化的速率,它允許基礎動畫(alpha, scale, translate, rotate)加速,減速,重複變化等等。在補間動畫中,我們一般只定義關鍵幀(首幀和尾幀),然後由系統自動生成中間幀,生成中間幀的這個過程可以成爲“插值”。插值器定義了動畫變化的速率,提供不同的函數定義變化值相對於時間的變化規則,可以定義各種各樣的非線性變化函數,比如加速、減速等,我們先來看一幅圖,如下:
這裏寫圖片描述

可以看見其實各種插值器都是實現了Interpolator接口而已,同時可以看見系統提供了許多已經實現OK的插值器,具體如下:

java類 xml id值 描述
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 動畫始末速率較慢,中間加速
AccelerateInterpolator @android:anim/accelerate_interpolator 動畫開始速率較慢,之後慢慢加速
AnticipateInterpolator @android:anim/anticipate_interpolator 開始的時候從後向前甩
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 類似上面AnticipateInterpolator
BounceInterpolator @android:anim/bounce_interpolator 動畫結束時彈起
CycleInterpolator @android:anim/cycle_interpolator 循環播放速率改變爲正弦曲線
DecelerateInterpolator @android:anim/decelerate_interpolator 動畫開始快然後慢
LinearInterpolator @android:anim/linear_interpolator 動畫勻速改變
OvershootInterpolator @android:anim/overshoot_interpolator 向前彈出一定值之後回到原來位置
PathInterpolator 新增, 定義路徑座標後按照路徑座標來跑。

如上就是系統提供的一些插值器,下面我們來看看怎麼使用他們。
2-5-2 插值器使用方法
它的用法也非常簡單隻需要在xml文件中加一句話就行了

<?xml version="1.0" encoding="utf-8"?>  
<translate   
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/bounce_interpolator"   
    android:fromXDelta="0"  
    android:fromYDelta="0"  
    android:toXDelta="200"  
    android:toYDelta="300"  
    android:duration="5000">  
</translate> 

如果只簡單地引用這些插值器還不能滿足需要的話,我們要考慮一下個性化插值器。我們可以創建一個插值器資源修改插值器的屬性,比如修改AnticipateInterpolator的加速速率,調整

CycleInterpolator的循環次數等。爲了完成這種需求,我們需要創建XML資源文件,然後將其放於/res/anim下,然後再動畫元素中引用即可。我們先來看一下幾種常見的插值器可調整的屬性:

插值器名稱 可修改屬性
accelerateDecelerateInterpolator
accelerateInterpolator android:factor 浮點值,加速速率,默認爲1
anticipateInterploator android:tension 浮點值,起始點後退的張力、拉力數,默認爲2
anticipateOvershootInterpolator android:tension 同上 android:extraTension 浮點值,拉力的倍數,默認爲1.5(2 * 1.5)
bounceInterpolator
cycleInterplolator android:cycles 整數值,循環的個數,默認爲1
decelerateInterpolator android:factor 浮點值,減速的速率,默認爲1
linearInterpolator
overshootInterpolator 浮點值,超出終點後的張力、拉力,默認爲2

接下來就來看幾個不是特別好理解的插值器的運行效果,沒有演示到的,大家可以自己動手運行看看效果

anticipateInterploator

先回退一小步然後加速前進

    <?xml version="1.0" encoding="utf-8"?>  
    <translate   
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@android:anim/anticipate_interpolator"  
        android:fromXDelta="0"  
        android:fromYDelta="0"  
        android:toXDelta="0"  
        android:fillAfter="true"  
        android:toYDelta="480"  
        android:duration="3000">  
    </translate>  

運行效果:
這裏寫圖片描述

可以看到它先回退一段距離然後再加速前進。
在上面我們也提到有幾種插值器是支持對屬性的調整的,我們就以anticipateInterploator爲例,這時我們需要新建一個xml文件放置於/res/anim文件夾下,比如我們新建一個my_anticipate_interpolator.xml文件,它的內容如下:

<?xml version="1.0" encoding="utf-8"?>    
<anticipateInterpolator    
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:tension="4.0"/>  

可以看到這裏將tension的值改爲了4,引用它的方法也非常簡單如下:

    <?xml version="1.0" encoding="utf-8"?>  
    <translate   
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@anim/my_anticipate_interpolator"  
        ......>  
    </translate>  

運行效果:
這裏寫圖片描述
可以明顯的看出小球回退的距離要遠一點。當然你也可以更改其他插值器的其它屬性,從而符合自己的要求。
AnticipateOvershootInterpolator
這裏寫圖片描述
可以看到AnticipateOvershootInterpolator的運行效果先回退一小步然後加速前進,超出終點一小步後再回到終點。
BounceInterpolator
這裏寫圖片描述
可以看到在小球在最後階段的效果是彈球效果。
OvershootInterpolator
這裏寫圖片描述
通過以上介紹大家對視圖動畫的xml文件配置應該有一個比較詳細的理解了吧

本文主要參考網絡資源:
http://blog.csdn.net/dmk877/article/details/51980734
http://blog.csdn.net/dmk877/article/details/51912104
http://www.cnblogs.com/ldq2016/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章