1、Android開發(fā)教程之動畫框架詳解，第 1 部分,簡介 Android 動畫使用示例 清單 1. 代碼直接使用動畫 Android 動畫框架原理 清單 2. 算法 動畫實現(xiàn)示例 清單 3. 實現(xiàn)一個繞 Y 軸旋轉(zhuǎn)的動畫 Android 中顯示 Gif 格式圖 結(jié)束語,Android 平臺提供了一套完整的動畫框架，使得開發(fā)者可以用它來開發(fā)各種動畫效果。Android 動畫框架詳解由原理篇和實例篇兩部分組成。本文是第一部分原理篇，主要分析 Tween 動畫的實現(xiàn)原理， 最后簡單介紹在 Android 中如何通過播放 Gif 文件來實現(xiàn)動畫。第二部分實例篇將在原理篇的基礎(chǔ)上，向您展示一個動畫實例的

2、實現(xiàn)。 Android 平臺提供了一套完整的動畫框架，使得開發(fā)者可以用它來開發(fā)各種動畫效果，本文將向讀者闡述 Android 的動畫框架是如何實現(xiàn)的。任何一個框架都有其優(yōu)勢和局限性，只有明白了其實現(xiàn)原理，開發(fā)者才能知道哪些功能可以利用框架來實現(xiàn)，哪些功能須用其他途徑實現(xiàn)。Android 平臺提供了兩類動畫，一類是 Tween 動畫，即通過對場景里的對象不斷做圖像變換 ( 平移、縮放、旋轉(zhuǎn) ) 產(chǎn)生動畫效果；第二類是 Frame 動畫，即順序播放事先做好的圖像，跟電影類似。本文是由兩部分組成的有關(guān) Android 動畫框架詳解的第一部分原理篇， 主要分析 Tween 動畫的實現(xiàn)原理， 最后簡單介

3、紹在 Android 中如何通過播放 Gif 文件來實現(xiàn)動畫。我們先看一下動畫示例來一點感性認識。,簡介,使用動畫示例程序的效果是點擊按鈕，TextView 旋轉(zhuǎn)一周。讀者也可以參看 Apidemos 中包 com.example.android.apis.animationview 下面的 Transition3d 和 com.example.android.apis.view 下面的 Animation1/Animation2/Animation3 示例代碼。,Android開發(fā)教程之Android 動畫使用示例,package com.ray.animation; import andr

4、oid.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AccelerateDecelerateInterpolator; import android.view.animation.Animation; import android.view.animation.RotateAnimation; import android.widget.Button; public

5、 class TestAnimation extends Activity implements OnClickListener public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn =(Button)findViewById(R.id.Button); btn.setOnClickListener(this); ,Android開發(fā)教程之清單 1. 代碼直接使用動畫,package com.ray

6、.animation; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AccelerateDecelerateInterpolator; import android.view.animation.Animation; import android.view.animation.RotateAnimation; import androi

7、d.widget.Button; public class TestAnimation extends Activity implements OnClickListener public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main);,Android開發(fā)教程,Button btn =(Button)findViewById(R.id.Button); btn.setOnClickListener(this); public v

8、oid onClick(View v) Animation anim=null; anim=new?RotateAnimation(0.0f,+360.0f); anim.setInterpolator(new AccelerateDecelerateInterpolator(); anim.setDuration(3000); findViewById(R.id.TextView01).startAnimation(anim); 使用 XML 文件方式，在打開 Eclipse 中新建的 Android 工程的 res 目錄中新建 anim 文件夾，然后在 anim 目錄中新建一個 myani

9、m.xml( 注意文件名小寫 )，內(nèi)容如下 :,Android開發(fā)教程,圖 1. 使用 xml 文件方式,Android開發(fā)教程,其中的 java 代碼如下： package com.ray.animation; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation

10、.AnimationUtils; import android.widget.Button; import android.widget.TextView; public class TestAnimation extends Activity implements OnClickListener public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main);,Android開發(fā)教程,Button btn =(Button)fin

11、dViewById(R.id.Button01); btn.setOnClickListener(this); Override public void onClick(View v) Animation anim=AnimationUtils.loadAnimation(this,R.anim.my_rotate_action); findViewById(R.id.TextView01).startAnimation(anim); ,Android開發(fā)教程,現(xiàn)有的 Android 動畫框架是建立在 View 的級別上的，在 View 類中有一個接口 startAnimation 來使動畫開

12、始，startAnimation 函數(shù)會將一個 Animation 類別的參數(shù)傳給 View，這個 Animation 是用來指定我們使用的是哪種動畫，現(xiàn)有的動畫有平移，縮放，旋轉(zhuǎn)以及 alpha 變換等。如果需要更復(fù)雜的效果，我們還可以將這些動畫組合起來，這些在下面會討論到。 要了解 Android 動畫是如何畫出來的，我們首先要了解 Android 的 View 是如何組織在一起，以及他們是如何畫自己的內(nèi)容的。每一個窗口就是一棵 View 樹，下面以我們寫的 android_tabwidget_tutorial.doc 中的 tab 控件的窗口為例，通過 android 工具 hierar

13、chyviewer 得到的窗口 View Tree 如下圖 1 所示：,Android開發(fā)教程之Android 動畫框架原理,圖 2. 界面 View 結(jié)構(gòu)圖,Android開發(fā)教程,圖 3. 界面 View 結(jié)構(gòu)和顯示對應(yīng)圖,Android開發(fā)教程,其實這個圖不是完整的，沒有把 RootView 和 DecorView 畫出來，RootView 只有一個孩子就是 DecorView，這里整個 View Tree 都是 DecorView 的子 View，它們是從 android1.5/frameworks/base/core/res/res/layout/screen_title.xml 這

14、個 layout 文件 infalte 出來的，感興趣的讀者可以參看 frameworkspoliciesbasephonecomandroidinternalpolicyImpPhoneWindow.java 中 generateLayout 函數(shù)部分的代碼。我們可以修改布局文件和代碼來做一些比較 cool 的事情，如象 Windows 的縮小 / 關(guān)閉按鈕等。標題窗口以下部分的 FrameLayou 就是為了讓程序員通過 setContentView 來設(shè)置用戶需要的窗口內(nèi)容。因為整個 View 的布局就是一棵樹，所以繪制的時候也是按照樹形結(jié)構(gòu)遍歷來讓每個 View 進行繪制。ViewRo

15、ot.java 中的 draw 函數(shù)準備好 Canvas 后會調(diào)用 mView.draw(canvas)，其中 mView 就是調(diào)用 ViewRoot.setView 時設(shè)置的 DecorView。然后看一下 View.java 中的 draw 函數(shù)：,Android開發(fā)教程,遞歸的繪制整個窗口需要按順序執(zhí)行以下幾個步驟： 繪制背景； 如果需要，保存畫布（canvas）的層為淡入或淡出做準備； 繪制 View 本身的內(nèi)容，通過調(diào)用 View.onDraw(canvas) 函數(shù)實現(xiàn)，通過這個我們應(yīng)該能看出來 onDraw 函數(shù)重載的重要性，onDraw 函數(shù)中繪制線條 / 圓 / 文字等功能會調(diào)

16、用 Canvas 中對應(yīng)的功能。下面我們會 drawLine 函數(shù)為例進行說明； 繪制自己的孩子（通常也是一個 view 系統(tǒng)），通過 dispatchDraw(canvas) 實現(xiàn)，參看 ViewGroup.Java 中的代碼可知，dispatchDraw-drawChild-child.draw(canvas) 這樣的調(diào)用過程被用來保證每個子 View 的 draw 函數(shù)都被調(diào)用，通過這種遞歸調(diào)用從而讓整個 View 樹中的所有 View 的內(nèi)容都得到繪制。在調(diào)用每個子 View 的 draw 函數(shù)之前，需要繪制的 View 的繪制位置是在 Canvas 通過 translate 函數(shù)調(diào)用

17、來進行切換的，窗口中的所有 View 是共用一個 Canvas 對象 如果需要，繪制淡入淡出相關(guān)的內(nèi)容并恢復(fù)保存的畫布所在的層（layer） 繪制修飾的內(nèi)容（例如滾動條），這個可知要實現(xiàn)滾動條效果并不需要 ScrollView，可以在 View 中完成的，不過有一些小技巧，具體實現(xiàn)可以參看我們的 TextViewExample 示例代碼,Android開發(fā)教程,當一個 ChildView 要重畫時，它會調(diào)用其成員函數(shù) invalidate() 函數(shù)將通知其 ParentView 這個 ChildView 要重畫，這個過程一直向上遍歷到 ViewRoot，當 ViewRoot 收到這個通知后就會

18、調(diào)用上面提到的 ViewRoot 中的 draw 函數(shù)從而完成繪制。View:onDraw() 有一個畫布參數(shù) Canvas, 畫布顧名思義就是畫東西的地方，Android 會為每一個 View 設(shè)置好畫布，View 就可以調(diào)用 Canvas 的方法，比如：drawText, drawBitmap, drawPath 等等去畫內(nèi)容。每一個 ChildView 的畫布是由其 ParentView 設(shè)置的，ParentView 根據(jù) ChildView 在其內(nèi)部的布局來調(diào)整 Canvas，其中畫布的屬性之一就是定義和 ChildView 相關(guān)的坐標系，默認是橫軸為 X 軸，從左至右，值逐漸增大，豎

19、軸為 Y 軸，從上至下，值逐漸增大 , 見下圖 :,Android開發(fā)教程,圖 4. 窗口坐標系,Android開發(fā)教程,Android 動畫就是通過 ParentView 來不斷調(diào)整 ChildView 的畫布坐標系來實現(xiàn)的，下面以平移動畫來做示例，見下圖 4，假設(shè)在動畫開始時 ChildView 在 ParentView 中的初始位置在 (100,200) 處，這時 ParentView 會根據(jù)這個坐標來設(shè)置 ChildView 的畫布，在 ParentView 的 dispatchDraw 中它發(fā)現(xiàn) ChildView 有一個平移動畫，而且當前的平移位置是 (100, 200)，于是它通

20、過調(diào)用畫布的函數(shù) traslate(100, 200) 來告訴 ChildView 在這個位置開始畫，這就是動畫的第一幀。如果 ParentView 發(fā)現(xiàn) ChildView 有動畫，就會不斷的調(diào)用 invalidate() 這個函數(shù)，這樣就會導(dǎo)致自己會不斷的重畫，就會不斷的調(diào)用 dispatchDraw 這個函數(shù)，這樣就產(chǎn)生了動畫的后續(xù)幀，當再次進入 dispatchDraw 時，ParentView 根據(jù)平移動畫產(chǎn)生出第二幀的平移位置 (500, 200)，然后繼續(xù)執(zhí)行上述操作，然后產(chǎn)生第三幀，第四幀，直到動畫播完。具體算法描述如清單 2：,Android開發(fā)教程,dispatchDraw

21、() . Animation a = ChildView.getAnimation() Transformation tm = a.getTransformation(); Use tm to set ChildViews Canvas; Invalidate(); . ,Android開發(fā)教程之清單 2. 算法,圖 5. 平移動畫示意圖,Android開發(fā)教程,以上是以平移動畫為例子來說明動畫的產(chǎn)生過程，這其中又涉及到兩個重要的類型，Animation 和 Transformation，這兩個類是實現(xiàn)動畫的主要的類，Animation 中主要定義了動畫的一些屬性比如開始時間、持續(xù)時間、是否重

22、復(fù)播放等，這個類主要有兩個重要的函數(shù)：getTransformation 和 applyTransformation，在 getTransformation 中 Animation 會根據(jù)動畫的屬性來產(chǎn)生一系列的差值點，然后將這些差值點傳給 applyTransformation，這個函數(shù)將根據(jù)這些點來生成不同的 Transformation，Transformation 中包含一個矩陣和 alpha 值，矩陣是用來做平移、旋轉(zhuǎn)和縮放動畫的，而 alpha 值是用來做 alpha 動畫的（簡單理解的話，alpha 動畫相當于不斷變換透明度或顏色來實現(xiàn)動畫），以上面的平移矩陣為例子，當調(diào)用 di

23、spatchDraw 時會調(diào)用 getTransformation 來得到當前的 Transformation，這個 Transformation 中的矩陣如下：,Android開發(fā)教程,圖 6. 矩陣變換圖,Android開發(fā)教程,所以具體的動畫只需要重載 applyTransformation 這個函數(shù)即可，類層次圖如下： 圖 7. 動畫類繼承關(guān)系圖,Android開發(fā)教程,用戶可以定義自己的動畫類，只需要繼承 Animation 類，然后重載 applyTransformation 這個函數(shù)。對動畫來說其行為主要靠差值點來決定的，比如，我們想開始動畫是逐漸加快的或者逐漸變慢的，或者先快后

24、慢的，或者是勻速的，這些功能的實現(xiàn)主要是靠差值函數(shù)來實現(xiàn)的，Android 提供了 一個 Interpolator 的基類，你要實現(xiàn)什么樣的速度可以重載其函數(shù) getInterpolation，在 Animation 的 getTransformation 中生成差值點時，會用到這個函數(shù)。 從上面的動畫機制的分析可知某一個 View 的動畫的繪制并不是由他自己完成的而是由它的父 view 完成，所有我們要注意上面 TextView 旋轉(zhuǎn)一周的動畫示例程序中動畫的效果并不是由 TextView 來繪制的，而是由它的父 View 來做的。findViewById(R.id.TextView01).

25、startAnimation(anim) 這個代碼其實是給這個 TextView 設(shè)置了一個 animation，而不是進行實際的動畫繪制，代碼如下 :,Android開發(fā)教程,public void startAnimation(Animation animation) animation.setStartTime(Animation.START_ON_FIRST_FRAME); setAnimation(animation); invalidate(); 其他的動畫機制的代碼感興趣的讀者請自己閱讀，希望通過原理的講解以后看起來會輕松點，呵呵。 以上就是 Android 的動畫框架的原理，了

26、解了原理對我們的開發(fā)來說就可以清晰的把握動畫的每一幀是怎樣生成的，這樣便于開發(fā)和調(diào)試。它把動畫的播放 / 繪制交給父 View 去處理而不是讓子 View 本身去繪制，這種從更高的層次上去控制的方式便于把動畫機制做成一個易用的框架，如果用戶要在某個 view 中使用動畫，只需要在 xml 描述文件或代碼中指定就可以了，從而把動畫的實現(xiàn)和 View 本身內(nèi)容的繪制（象 TextView 里面的文字顯示）分離開了，起到了減少耦合和提高易用性的效果。,Android開發(fā)教程,在這個例子中，將要實現(xiàn)一個繞 Y 軸旋轉(zhuǎn)的動畫，這樣可以看到 3D 透視投影的效果，代碼如下 ( 清單 4)：,Android

27、開發(fā)教程之動畫實現(xiàn)示例,package com.example.android.apis.animation; import android.view.animation.Animation; import android.view.animation.Transformation; import android.graphics.Camera; import android.graphics.Matrix; /* * An animation that rotates the view on the Y axis between two specified angles. * This an

28、imation also adds a translation on the Z axis (depth) to improve the effect. */,Android開發(fā)教程之清單 3. 實現(xiàn)一個繞 Y 軸旋轉(zhuǎn)的動畫,public class Rotate3dAnimation extends Animation private final float mFromDegrees; private final float mToDegrees; private final float mCenterX; private final float mCenterY; private fina

29、l float mDepthZ; private final boolean mReverse; private Camera mCamera; /* * Creates a new 3D rotation on the Y axis. The rotation is defined by its * start angle and its end angle. Both angles are in degrees. The rotation,Android開發(fā)教程,* is performed around a center point on the 2D space, definied b

30、y a pair * of X and Y coordinates, called centerX and centerY. When the animation * starts, a translation on the Z axis (depth) is performed. The length * of the translation can be specified, as well as whether the translation * should be reversed in time. * * param fromDegrees the start angle of th

31、e 3D rotation * param toDegrees the end angle of the 3D rotation * param centerX the X center of the 3D rotation * param centerY the Y center of the 3D rotation * param reverse true if the translation should be reversed, false,Android開發(fā)教程,otherwise */ public Rotate3dAnimation(float fromDegrees, floa

32、t toDegrees, float centerX, float centerY, float depthZ, boolean reverse) mFromDegrees = fromDegrees; mToDegrees = toDegrees; mCenterX = centerX; mCenterY = centerY; mDepthZ = depthZ; mReverse = reverse; ,Android開發(fā)教程,Override public void initialize(int width, int height, int parentWidth, int parentH

33、eight) super.initialize(width, height, parentWidth, parentHeight); mCamera = new Camera(); Override protected void applyTransformation(float interpolatedTime, Transformation t) final float fromDegrees = mFromDegrees; float degrees = fromDegrees + (mToDegrees - fromDegrees) * interpolatedTime);,Andro

34、id開發(fā)教程,final float centerX = mCenterX; final float centerY = mCenterY; final Camera camera = mCamera; final Matrix matrix = t.getMatrix(); camera.save(); if (mReverse) camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime); else camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime); ,Android開發(fā)教程,camera.rotateY(degrees); camera.getMatrix(matrix); camera.restore(); matrix.preTranslate(-centerX, -centerY); ma