布局动画介绍

 

布局动画和逐帧动画是由本质的不同的，逐帧动画是一帧帧图片组成的，而布局动画是渐变动画，OPhone通过改变UI的属性（大小、位置、透明度等）来实现动画效果。

 

在OPhone显示系统中，每个view都对应一个矩阵来控制该view显示的位置，通过不同的方式来改变该控制矩阵就可以实现动画效果，例如旋转、移动、缩放等。

 

不同的矩阵变换有不同的类来实现，android.view.animation.Animation类代表所有动画变换的基类，目前在OPhone系统中有如下五个实现（都位于android.view.animation包中）：

有一个和渐变动画效果关系比较密切的类android.view.animation.Interpolator，该类定义了渐变动画改变的速率，可以设置为加速变化、减速变化或者重复变化。关于Interpolator详细信息请参考文档介绍。另外在OPhone SDK中的android.jar文件中也有各种interpolator的定义，感兴趣的可以参考android.jar中的\res\anim目录中的文件。

 

动画的实现及应用

上面这些渐变方式也可以在XML文件中定义，这些文件位于res\anim目录下。根元素为set代表AnimationSet，里面可以有多个渐变定义，如下是alpha渐变的定义（res\anim\alpha_anim.xml）：

<set xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/decelerate_interpolator">   

<alpha    

    android:fromAlpha="0.0"    

    android:toAlpha="1.0"    

    android:duration="1000" />   

</set>  

 

<alpha    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/accelerate_interpolator"  

android:fromAlpha="0.0"    

android:toAlpha="1.0"    

android:duration="1000" />  

上面定义的alpha从0（透明）到1（不透明）渐变，渐变时间为1000毫秒。

 

<scale    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/accelerate_interpolator"  

android:fromXScale="1"  

android:toXScale="1"  

android:fromYScale="0.1"  

android:toYScale="1.0"  

android:duration="500"  

android:pivotX="50%"  

android:pivotY="50%"  

android:startOffset="100" />  

上面是一个缩放渐变的定义，from... 和 to... 分别定义缩放渐变的开始和结束的缩放倍数，上面定义X轴都为1不缩放，而Y轴从0.1到1逐渐放大（开始高度为正常大小的0.1然后逐渐放大到正常大小）。缩放持续的时间为500毫秒，缩放的中心点(通过pivotX，pivotY定义)在控件的中间位置。startOffset指定了在缩放开始前等待的时间。

<rotate    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/accelerate_interpolator"  

android:fromDegrees="0.0"  

android:toDegrees="360"  

android:pivotX="50%"  

android:pivotY="50%"  

android:duration="500" />  

 

上面定义了旋转变换，从0度变化到360度（旋转一周），时间为500毫秒，变换的中心点位控件的中心位置。

<translate    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/accelerate_interpolator"  

android:fromYDelta="-100%"    

android:toYDelta="0"  

android:duration="500" />  

 

上面定义了位置变换，实现一种下落的效果。

 

把上面不同的定义放到set中就可以实现不同的组合动画效果了，下面的示例实现了控件在下落的过程中逐渐显示的效果（res\anim\translate_alpha_anim.xml）：

<set xmlns:android="http://schemas.android.com/apk/res/android"  

android:interpolator="@android:anim/decelerate_interpolator">   

<translate    

android:fromYDelta="-100%"    

android:toYDelta="0"  

android:duration="500" />   

<alpha    

android:fromAlpha="0.0"    

android:toAlpha="1.0"  

android:duration="500" />   

</set>  

 

要把上面定义的动画效果应用的layout中，就要使用另外一个类：android.view.animation.LayoutAnimationController。该类把指定的效果应用到layout中的每个控件上去，使用layoutAnimation元素在xml文件中定义

LayoutAnimationController，该文件同样位于res/anim/目录下，下面是一个示例（res\anim\layout_anim_ctrl.xml）：   

<layoutAnimation    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:delay="30%"  

android:animationOrder="reverse"  

android:animation="@anim/translate_alpha_anim" />  

上面通过animation指定了使用哪个动画（通过修改该值可以测试不同的动画效果），animationOrder指定了通过逆序的方式应用动画（在垂直的LinearLayout中就是从下往上逐个控件应用），delay指定了layout中的每个控动画的延时时间为动画持续总时间的30%。

 

定义好LayoutAnimationController后就可以在Layout中使用了，这里使用一个ListView做演示，布局代码如下：

<?xml version="1.0" encoding="utf-8"?>   

<LinearLayout    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:orientation="vertical"    

android:layout_width="fill_parent"  

android:layout_height="fill_parent">   

    <ListView    

    android:id="@+id/list"    

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent"    

       

    android:persistentDrawingCache="animation|scrolling"  

    android:layoutAnimation="@anim/layout_anim_ctrl" />   

</LinearLayout>  

 

上面的代码中通过layoutAnimation指定了前面定义的LayoutAnimationController，为了使动画效果比较流畅这里还通过persistentDrawingCache设置了控件的绘制缓存策略，一共有4中策略：

PERSISTENT_NO_CACHE 说明不在内存中保存绘图缓存； 

PERSISTENT_ANIMATION_CACHE 说明只保存动画绘图缓存；

PERSISTENT_SCROLLING_CACHE 说明只保存滚动效果绘图缓存

PERSISTENT_ALL_CACHES 说明所有的绘图缓存都应该保存在内存中。

 

在Activity中并没有什么变化，代码如下（src\org\goodev\animation\ListActivity.java）：

public class ListActivity extends Activity {   

    

    String[] mListItems =    

    { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};   

    

    @Override  

    public void onCreate(Bundle savedInstanceState) {   

       super.onCreate(savedInstanceState);   

       setContentView(R.layout.list);   

    

       ArrayAdapter<String> listItemAdapter =    

           new ArrayAdapter<String>(this,   

              android.R.layout.simple_list_item_1, mListItems);   

       ListView lv = (ListView) this.findViewById(R.id.list);   

       lv.setAdapter(listItemAdapter);   

    }   

}  

 

控件动画介绍

其实控件动画也是布局动画的一种，可以看做是自定义的动画实现，布局动画在XML中定义OPhone已经实现的几个动画效果（AlphaAnimation、TranslateAnimation、ScaleAnimation、RotateAnimation）而控件动画就是在代码中继承android.view.animation.Animation类来实现自定义效果。

 

控件动画实现

通过重写Animation的 applyTransformation (float interpolatedTime, Transformation t)函数来实现自定义动画效果，另外一般也会实现 initialize (int width, int height, int parentWidth, int parentHeight)函数，这是一个回调函数告诉Animation目标View的大小参数，在这里可以初始化一些相关的参数，例如设置动画持续时间、设置Interpolator、设置动画的参考点等。

OPhone在绘制动画的过程中会反复的调用applyTransformation 函数，每次调用参数interpolatedTime值都会变化，该参数从0渐变为1，当该参数为1时表明动画结束。通过参数Transformation 来获取变换的矩阵（matrix），通过改变矩阵就可以实现各种复杂的效果。关于矩阵的详细信息可以参考android.graphics.Matrix的API文档(http://androidappdocs-staging.appspot.com/reference/android/graphics/Matrix.html )。

 

下面来看一个简单的实现：

   

class ViewAnimation extends Animation {   

       public ViewAnimation() {   

       }   

    

       @Override  

        public void initialize(int width, int height, int parentWidth, int parentHeight) {   

           super.initialize(width, height, parentWidth, parentHeight);   

           setDuration(2500);   

           setFillAfter(true);   

           setInterpolator(new LinearInterpolator());   

       }   

    

       @Override  

        protected void applyTransformation(float interpolatedTime,   

              Transformation t) {   

           final Matrix matrix = t.getMatrix();   

           matrix.setScale(interpolatedTime, interpolatedTime);   

              

       }   

    }  

 

上面的代码很简单，在initialize函数中设置变换持续的时间2500毫秒，然后设置Interpolator为LinearInterpolator并设置FillAfter为true这样可以在动画结束的时候保持动画的完整性。在applyTransformation函数中通过MatrixsetScale函数来缩放，该函数的两个参数代表X、Y轴缩放因子，由于interpolatedTime是从0到1变化所在这里实现的效果就是控件从最小逐渐变化到最大。调用View的startAnimation函数（参数为Animation）就可以使用自定义的动画了。代码如下（src\org\goodev\animation\ViewAnimActivity.java）：

 

public class ViewAnimActivity extends Activity {   

    

    Button mPlayBtn;   

    ImageView mAnimImage;   

    

    @Override  

    public void onCreate(Bundle savedInstanceState) {   

       super.onCreate(savedInstanceState);   

       setContentView(R.layout.view_anim_layout);   

       mAnimImage = (ImageView) this.findViewById(R.id.anim_image);   

    

       mPlayBtn = (Button) findViewById(R.id.play_btn);   

       mPlayBtn.setOnClickListener(new OnClickListener() {   

    

           @Override  

           public void onClick(View view) {   

              mAnimImage.startAnimation(new ViewAnimation());   

           }   

    

       });   

    

    }   

}  

布局代码如下（res\layout\view_anim_layout.xml）：

<?xml version="1.0" encoding="utf-8"?>   

<LinearLayout    

xmlns:android="http://schemas.android.com/apk/res/android"  

android:orientation="vertical"  

android:layout_width="fill_parent"  

android:layout_height="fill_parent"  

>    

<Button   

android:id="@+id/play_btn"  

android:layout_width="fill_parent"  

android:layout_height="wrap_content"  

android:text="Start Animation"  

/>   

<ImageView    

android:id="@+id/anim_image"  

android:persistentDrawingCache="animation|scrolling"  

android:layout_width="fill_parent"    

android:layout_height="wrap_content"    

android:src="/blog_article/@drawable/ophone/index.html"  

/>   

</LinearLayout>  

• Reset():重置该矩阵
• setScale():设置矩阵缩放
• setTranslate():设置矩阵移动
• setRotate():设置矩阵旋转
• setSkew(): 使矩阵变形（扭曲）