快捷導(dǎo)航

解析Android中Animation動(dòng)畫(huà)的編寫(xiě)要點(diǎn)

更新時(shí)間：2016年04月28日 17:50:45 作者：lxw1980

這篇文章主要介紹了Android中Animation動(dòng)畫(huà)的編寫(xiě)要點(diǎn),講解了Animation的幾個(gè)常用標(biāo)簽的用法,需要的朋友可以參考下

在API Demo的View->Animation下可以找到四個(gè)Animation的Demo，第一個(gè)3D Translate比較復(fù)雜，最后再講，先講第2個(gè)Interpolator。該Activity對(duì)應(yīng)的是view包內(nèi)的Animation3.java，和layout的animation_3.xml。

界面的布局不加解釋了，就一個(gè)Spinner和一個(gè)TextView。不是本文內(nèi)容。

主要解釋下幾個(gè)重點(diǎn)語(yǔ)句。

初始化Animation，從類的名字可以看出是一個(gè)變換View的位置的動(dòng)畫(huà)，參數(shù)起點(diǎn)橫坐標(biāo)，終點(diǎn)橫坐標(biāo)，起點(diǎn)縱坐標(biāo)，終點(diǎn)縱坐標(biāo)。

Animation a = new TranslateAnimation(0.0f, 
        targetParent.getWidth() - target.getWidth() - targetParent.getPaddingLeft() - 
        targetParent.getPaddingRight(), 0.0f, 0.0f);

下面是動(dòng)畫(huà)的參數(shù)設(shè)置，我加上了注釋

a.setDuration(1000);//設(shè)置動(dòng)畫(huà)所用的時(shí)間 
    a.setStartOffset(300);//設(shè)置動(dòng)畫(huà)啟動(dòng)的延時(shí) 
    //設(shè)置重復(fù)模式，RESTART為結(jié)束后重新開(kāi)始，REVERSE為按原來(lái)的軌跡逆向返回 
    a.setRepeatMode(Animation.RESTART); 
    //設(shè)置重復(fù)次數(shù)，INFINITE為無(wú)限 
    a.setRepeatCount(Animation.INFINITE); 
    //根據(jù)用戶在Spinner的選擇設(shè)置target的進(jìn)入的方式 
    switch (position) { 
      case 0: 
        //加速進(jìn)入 
        a.setInterpolator(AnimationUtils.loadInterpolator(this.R.anim.accelerate_interpolator)); 
        break; 
      case 1: 
        //減速進(jìn)入 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.decelerate_interpolator)); 
        break; 
      case 2: 
        //加速進(jìn)入.與第一個(gè)的區(qū)別為當(dāng)repeatMode為reverse時(shí),仍為加速返回原點(diǎn) 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.accelerate_decelerate_interpolator)); 
        break; 
      case 3: 
        //先往后退一點(diǎn)再加速前進(jìn) 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.anticipate_interpolator)); 
        break; 
      case 4: 
        //減速前進(jìn),沖過(guò)終點(diǎn)前再后退 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.overshoot_interpolator)); 
        break; 
      case 5: 
        //case 3,4的結(jié)合體 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.anticipate_overshoot_interpolator)); 
        break; 
      case 6: 
        //停止前來(lái)回振幾下 
        a.setInterpolator(AnimationUtils.loadInterpolator(this, 
            android.R.anim.bounce_interpolator)); 
        break; 
    } 
    //讓target開(kāi)始執(zhí)行這個(gè)動(dòng)畫(huà) 
    target.startAnimation(a); 
  }

這里使用的是Android已預(yù)設(shè)的一些動(dòng)作，我們也可以自定義XML來(lái)實(shí)現(xiàn)更好看的動(dòng)畫(huà)效果的，這個(gè)下一篇再講。

除了TranslationAnimation，還有AlphaAnimation、RotateAnimation、ScaleAnimation，使用這幾個(gè)基體動(dòng)作的組合，可以形成一系列復(fù)雜的動(dòng)畫(huà)效果。具體用法請(qǐng)查看SDK。

整個(gè)都比較簡(jiǎn)單，就一個(gè)函數(shù)的調(diào)用，還不懂的看一下API的注釋和SDK文檔，沒(méi)什么難理解的。

現(xiàn)在開(kāi)始看第三個(gè)Push，從View->animation->Push可以啟動(dòng)這個(gè)Activity

Push這個(gè)Demo主要是展示了View之間的切換效果。

Push對(duì)應(yīng)的Java文件為view包內(nèi)的Animation2.java，對(duì)應(yīng)的XML布局文件為layout/animation_2.xml。

先看布局文件，這個(gè)頁(yè)面內(nèi)最主要用到的是一個(gè)ViewFlipper。使用ViewFlipper可以實(shí)現(xiàn)多個(gè)View之間的動(dòng)態(tài)切換，并且可以自定義切換動(dòng)畫(huà)，本例中所展示的就是如何定義切換動(dòng)畫(huà)。

下面只挑重點(diǎn)語(yǔ)句來(lái)講了。

讓ViewFlipper開(kāi)始自動(dòng)切換。

mFlipper.startFlipping();

當(dāng)點(diǎn)擊時(shí)Spinner內(nèi)的選項(xiàng)時(shí)，更改進(jìn)入和退出的動(dòng)畫(huà)效果。

public void onItemSelected(AdapterView parent, View v, int position, long id) { 
    switch (position) { 
    case 0: 
      mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.push_up_in)); 
      mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.push_up_out)); 
      break; 
    case 1: 
      mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.push_left_in)); 
      mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.push_left_out)); 
      break; 
    case 2: 
      mFlipper.setInAnimation(AnimationUtils.loadAnimation(this.R.anim.fade_in)); 
      mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, 
          android.R.anim.fade_out)); 
      break; 
    default: 
      mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.hyperspace_in)); 
      mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, 
          R.anim.hyperspace_out)); 
      break; 
    } 
  }

這里的Animation都是自定義的動(dòng)畫(huà)效果，可以在res/anim內(nèi)找到對(duì)應(yīng)的XML文件，下面用push_up_in.xml來(lái)說(shuō)明定義的大概用法。

因?yàn)檫@個(gè)動(dòng)畫(huà)是由幾個(gè)動(dòng)畫(huà)復(fù)合組成的，所以外圍就用一個(gè)set標(biāo)簽括起來(lái)，組成一個(gè)AnimationSet。

translate標(biāo)簽內(nèi)主要定義位置的變化情況，fromYDelta="100%p"，是指從ViewFlipper的正下方剛好一個(gè)View的高度的距離的地方開(kāi)始出現(xiàn)，100%p是一個(gè)相對(duì)值，大于0為下方，小于0為上方。toYDelta="0"，是指剛好達(dá)到布局文件的原始位置停止。android:duration="300"，是指整個(gè)動(dòng)作的時(shí)間用時(shí)為300毫秒，系統(tǒng)會(huì)根據(jù)這個(gè)時(shí)間自動(dòng)調(diào)整速度。

alpha標(biāo)簽內(nèi)定義的是透明度，0為全透明，1.0為不透明，過(guò)程為300毫秒，讓View為逐漸出現(xiàn)的過(guò)程

<set xmlns:android="http://schemas.android.com/apk/res/android"> 
  <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/> 
  <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" /> 
</set>

push_up_out.xml，和push_left的兩個(gè)標(biāo)簽都幾乎一樣的，應(yīng)該很好理解。

hyperspace_in.xml更簡(jiǎn)單，只有一個(gè)alpha，所以外層沒(méi)有set標(biāo)簽。startOffset是設(shè)置延遲。

hyperspace_out.xml相對(duì)復(fù)雜一點(diǎn)，set里面還包括有set，但仍然是由幾個(gè)小動(dòng)作一起組成的，可以一點(diǎn)點(diǎn)拆成來(lái)理解。

最外層是一個(gè)set，里面嵌套一個(gè)scale和一個(gè)set。

第一個(gè)scale標(biāo)簽可以理解為，以當(dāng)前View的正中間位置為軸點(diǎn)，在700毫秒時(shí)間內(nèi)，以加速放大的方式，將View的橫長(zhǎng)變?yōu)?.4倍，高度變?yōu)?.6倍。至于fillAfter這個(gè)標(biāo)簽我一直搞不懂這個(gè)功能，照SDK里的解釋，是在連續(xù)動(dòng)畫(huà)中讓View保持在動(dòng)畫(huà)的最后一幀，但照我的實(shí)驗(yàn)似乎沒(méi)有什么效果，這個(gè)求高手指教。（查網(wǎng)上一些資料是說(shuō)必須在代碼里設(shè)置，這個(gè)是不是屬于Android的Bug？）一個(gè)animationSet可以做為另一個(gè)animationSet的子集，這個(gè)很容易理解。rotate標(biāo)簽內(nèi)的照字面意思應(yīng)該很容易理解了，不再贅述了。

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> 
  <scale  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
    android:fromXScale="1.0"  
    android:toXScale="1.4"  
    android:fromYScale="1.0"  
    android:toYScale="0.6"  
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:duration="700" /> 
  <set  
    android:interpolator="@android:anim/accelerate_interpolator" 
        android:startOffset="700"> 
     
    <scale 
      android:fromXScale="1.4"  
      android:toXScale="0.0" 
        android:fromYScale="0.6" 
      android:toYScale="0.0"  
      android:pivotX="50%"  
      android:pivotY="50%"  
      android:duration="400" /> 
     
    <rotate  
      android:fromDegrees="0"  
      android:toDegrees="-45" 
      android:toYScale="0.0"  
      android:pivotX="50%"  
      android:pivotY="50%" 
      android:duration="400" /> 
  </set> 
</set>

很多動(dòng)畫(huà)其實(shí)都是通過(guò)alpha, scale, rotate, translate這幾個(gè)基本動(dòng)作組成的。這些都屬于Tween Animation。另外還有一種Frame Animation，類似放電影的效果，一幀幀播放動(dòng)畫(huà)，以后再說(shuō)。

所有在XML內(nèi)的設(shè)置的屬性都可以在JAVA里找到對(duì)應(yīng)的API函數(shù)，在Android SDK文檔里可以查得到。

其實(shí)我覺(jué)得我這樣寫(xiě)得都有點(diǎn)啰嗦了，Android的API的名字定義都很規(guī)范，從名字都已經(jīng)可以判斷出這個(gè)函數(shù)的功能了。

3D Transition的主要定義在animation包內(nèi)，里面只有兩個(gè)Java文件。

3D翻轉(zhuǎn)其實(shí)并不是很復(fù)雜，最主要的是一個(gè)函數(shù)rotation.setAnimationListener(new DisplayNextView(position));在Transition3d的第99行。這個(gè)函數(shù)的主要作用是通過(guò)一個(gè)Listener，設(shè)置動(dòng)畫(huà)開(kāi)始前、結(jié)束后，和重復(fù)動(dòng)作時(shí)要觸發(fā)的事件。

3D翻轉(zhuǎn)效果主要由兩個(gè)rotato動(dòng)作構(gòu)成，第二個(gè)動(dòng)作在第一個(gè)動(dòng)作完成后，由Listener來(lái)啟動(dòng)。這兩個(gè)Animation連起來(lái)，看的時(shí)候就像3D旋轉(zhuǎn)的效果了。

同時(shí)，在Rotate3dAnimation.java中，重新定義了一個(gè)Animation，覆寫(xiě)了initialize和applyTransformation方法。initialize是初始化動(dòng)作，applyTransformation就定義動(dòng)畫(huà)效果的，這個(gè)是最主要的部分，傳進(jìn)來(lái)的是當(dāng)前時(shí)間為總時(shí)間的百分比和動(dòng)作，這里利用了轉(zhuǎn)換矩陣。發(fā)現(xiàn)我的線性代數(shù)都忘了T_T，以后要重新看一遍。主要這個(gè)Camara不太理解，注釋里也沒(méi)寫(xiě)有這個(gè)類有什么用，從代碼里猜測(cè)這個(gè)是保存當(dāng)前的界面。

這樣說(shuō)來(lái)是簡(jiǎn)單，但做起來(lái)難啊。。

您可能感興趣的文章: