OPhone 2D UI 动画教程之一——Animation介绍

多媒体技术, 2010-01-15 11:59:20

Tags : 动画教程 UI 2D

 

在本系列教程中将介绍OPhone中提供的2D UI 动画(Animation),利用OPhone提供的动画功能可以很容易的创建各种UI动画效果，恰当的使用不同的动画组合可以使我们的程序更加招人喜爱。

OPhone 2D UI动画概述
在前面的《OPhone平台SurfaceView教程》中介绍了如何使用SurfaceView来创建一个现实GIF动画的自定义View，虽然OPhone不支持GIF动画显示但是OPhone却提供了其他动画效果。目前OPhone中提供了三种动画效果：逐帧动画(frame-by-frame animation),这种动画和GIF一样，一帧一帧的显示来组成动画效果；布局动画（layout animation），这种动画用来设置layout内的所有UI控件；控件动画（view animation），这种是应用到具体某个view上的动画。
 
在这三种动画实现中逐帧动画是最简单的，而控件动画是有点复杂的，要涉及到线性代数中的矩阵运算，下面就由易到难逐个介绍，先来看看逐帧动画如何实现。
 
逐帧动画
逐帧动画是通过OPhone中的android.graphics.drawable.AnimationDrawable类来实现的，在该类中保存了帧序列以及显示的时间，为了简化动画的创建OPhone提供了一种通过XML来创建逐帧动画的方式，这样把动画的创建和代码分来以后如果需要修改动画内容，只需要修改资源文件就可以了不用修改代码，简化开发维护工作。在res/drawable/文件夹下创建一个XML文件，下面是一个示例文件（res\drawable\qq_animation.xml）：
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
<item android:drawable="@drawable/qq001" android:duration="80"/>
<item android:drawable="@drawable/qq002" android:duration="80"/>
<item android:drawable="@drawable/qq003" android:duration="80"/>
<item android:drawable="@drawable/qq004" android:duration="80"/>
<item android:drawable="@drawable/qq005" android:duration="80"/>
<item android:drawable="@drawable/qq006" android:duration="80"/>
<item android:drawable="@drawable/qq007" android:duration="80"/>
<item android:drawable="@drawable/qq008" android:duration="80"/>
</animation-list>
 
 
在上面的定义中通过animation-list来指定这是个AnimationDrawable动画定义，里面的item来指定每帧图片和显示时间（单位为毫秒），帧显示的顺序就是item定义的顺序。如果android:oneshot设置为true表明该动画只播放一次，否则该动画会循环播放。这些设置也可以通过AnimationDrawable提供的函数来设置。动画中引用的文件为QQ表情文件，包含在示例项目代码中。
然后在layout中定义一个ImageView来显示上面定义的AnimationDrawable，layout代码如下（res\layout\main.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">
    <ImageView 
       android:id="@+id/animation_view"
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content"
       android:src="@drawable/qq_animation" />
    <Button 
       android:id="@+id/animation_btn" 
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" 
       android:text="@string/start_animation" />
    <Button 
       android:id="@+id/one_shot_btn" 
       android:layout_width="fill_parent"
       android:layout_height="wrap_content" 
       android:text="@string/play_once" />
</LinearLayout>
注意这里的ImageView 通过android:src="@drawable/qq_animation"引用了前面定义的AnimationDrawable，下面是两个按钮用来控制播放动画和设置AnimationDrawable的oneshot属性。
下面就是控制动画播放的类代码（src\org\goodev\animation\AnimActivity.java）：
 
public class AnimActivity extends Activity {
    /** Called when the activity is first created. */
    AnimationDrawable mAd;
    Button mPlayBtn;
    Button mOneShotBtn;
    boolean mIsOneShot;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
 
       ImageView iv = (ImageView) findViewById(R.id.animation_view);
       mAd = (AnimationDrawable) iv.getDrawable();
 
       mPlayBtn = (Button) findViewById(R.id.animation_btn);
       mPlayBtn.setOnClickListener(new OnClickListener() {
           @Override
           public void onClick(View view) {
              startAnimation();
           }
       });
 
       mOneShotBtn = (Button) findViewById(R.id.one_shot_btn);
       mOneShotBtn.setOnClickListener(new OnClickListener() {
           @Override
           public void onClick(View view) {
              if (mIsOneShot) {
                  mOneShotBtn.setText("Play Once");
              } else {
                  mOneShotBtn.setText("Play Repeatly");
              }
              mAd.setOneShot(!mIsOneShot);
              mIsOneShot = !mIsOneShot;
           }
       });
 
    }
 
    /**
     * 通过AnimationDrawable的start函数播放动画，
     * stop函数停止动画播放，
     * isRunning来判断动画是否正在播放。
     */
    public void startAnimation() {
       if (mAd.isRunning()) {
           mAd.stop();
       } else {
           mAd.stop();
           mAd.start();
       }
    }
}
 
程序截图：
 
 
点击Start Animation按钮来播放动画，点击Play Once来交替设置是循环播放还是只播放一次。
 
关于AnimationDrawable的其他信息请参考AnimationDrawable文档，这里就不在赘述。
 
布局动画介绍
 
布局动画和逐帧动画是由本质的不同的，逐帧动画是一帧帧图片组成的，而布局动画是渐变动画，OPhone通过改变UI的属性（大小、位置、透明度等）来实现动画效果。
 
在OPhone显示系统中，每个view都对应一个矩阵来控制该view显示的位置，通过不同的方式来改变该控制矩阵就可以实现动画效果，例如旋转、移动、缩放等。
 
不同的矩阵变换有不同的类来实现，android.view.animation.Animation类代表所有动画变换的基类，目前在OPhone系统中有如下五个实现（都位于android.view.animation包中）：
  • l AlphaAnimation：实现alpha渐变，可以使界面逐渐消失或者逐渐显现
  • l TranslateAnimation：实现位置移动渐变，需要指定移动的开始和结束坐标
  • l ScaleAnimation： 实现缩放渐变，可以指定缩放的参考点
  • l RotateAnimation：实现旋转渐变，可以指定旋转的参考点，默认值为（0，0）左上角。
  • l AnimationSet： 代表上面的渐变组合
有一个和渐变动画效果关系比较密切的类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>
如果只定义一种渐变效果，则可以去除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="@drawable/ophone"
/>
</LinearLayout>
 
 
点击Start Animation按钮可以看到ImageView变化的效果，如下图所示：
图一：ImageView动画效果开始
图二：动画效果中间过程
图三：ImageView最终状态
 
从上图可以看到ImageView是从左上角出来的，这是由于没有指定矩阵的变换参考位置，默认位置为（0,0），如果要想让ImageView从中间出来，可以通过矩阵变换来把参考点移动到中间来，如下实现：
    
class ViewAnimation extends Animation {
       int mCenterX;//记录View的中间坐标
       int mCenterY;
       public ViewAnimation() {
       }
 
       @Override
       public void initialize(int width, int height, int parentWidth, int parentHeight) {
           super.initialize(width, height, parentWidth, parentHeight);
           //初始化中间坐标值
           mCenterX = width/2; 
           mCenterY = height/2;
           setDuration(2500);
           setFillAfter(true);
           setInterpolator(new LinearInterpolator());
       }
 
       @Override
       protected void applyTransformation(float interpolatedTime,
              Transformation t) {
           final Matrix matrix = t.getMatrix();
           matrix.setScale(interpolatedTime, interpolatedTime);
           //通过坐标变换，把参考点（0,0）移动到View中间
           matrix.preTranslate(-mCenterX, -mCenterY);
           //动画完成后再移回来
           matrix.postTranslate(mCenterX, mCenterY);
       }
    }
 
 
preTranslate函数是在缩放前移动而postTranslate是在缩放完成后移动。现在ImageView就是从中间出来的了。这样通过操作Matrix 可以实现各种复杂的变换。由于操作Matrix是实现动画变换的重点，这里简单介绍下Matrix的常用操作：
  • Reset():重置该矩阵
  • setScale():设置矩阵缩放
  • setTranslate():设置矩阵移动
  • setRotate():设置矩阵旋转
  • setSkew(): 使矩阵变形（扭曲）
 
矩阵也可以相乘，从线性代数中的矩阵运算中知道M1*M2 和M2*M1 是不一样的，所以在使用concat(m1,m2)函数的时候要注意顺序。
 
另外需要注意的是Matrix提供的API在OPhone1.0和OPhone1.5中是有变化的，请注意查看相关文档。
 
OPhone还提供了一个用来监听Animation事件的监听接口AnimationListener，如果你对Animatioin何时开始、何时结束、何时重复播放感兴趣则可以实现该接口。该接口提供了三个回调函数：onAnimationStart、onAnimationEnd、onAnimationRepeat。
 
使用Camera实现3D变换效果
最后来简单介绍下OPhone提供的android.graphics.Camera类，通过该类可以在2D条件下实现3D动画效果，该类可以看做一个视图显示的3D空间，然后可以在里面做各种操作。把上面的ViewAnimation修改为如下实现可以具体看看Camera的功能：
   
 class ViewAnimation extends Animation {
       int mCenterX;//记录View的中间坐标
       int mCenterY;
       Camera camera = new Camera();
       public ViewAnimation() {
       }
 
       @Override
       public void initialize(int width, int height, int parentWidth,
              int parentHeight) {
           super.initialize(width, height, parentWidth, parentHeight);
           //初始化中间坐标值
           mCenterX = width/2; 
           mCenterY = height/2;
           setDuration(2500);
           setFillAfter(true);
           setInterpolator(new LinearInterpolator());
       }
 
       @Override
       protected void applyTransformation(float interpolatedTime,
              Transformation t) {
//         final Matrix matrix = t.getMatrix();
//         matrix.setScale(interpolatedTime, interpolatedTime);
//         //通过坐标变换，把参考点（0,0）移动到View中间
//         matrix.preTranslate(-mCenterX, -mCenterY);
//         //动画完成后再移回来
//         matrix.postTranslate(mCenterX, mCenterY);
           final Matrix matrix = t.getMatrix();
           camera.save();
           camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime));
           camera.rotateY(360 * interpolatedTime);
           camera.getMatrix(matrix);
           matrix.preTranslate(-mCenterX, -mCenterY);
           matrix.postTranslate(mCenterX, mCenterY);
           camera.restore();
       }
    }
 
camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime))在第一次调用的时候interpolatedTime值为0，相当于把ImageView在Z轴后移1300像素，然后逐步的往前移动到0，同时camera.rotateY(360 * interpolatedTime)函数又把ImageView沿Y轴翻转360度，最终效果如下：
 
 
 
 
使用Camera后的动画效果
 
 
 
关于Camera的详细信息，请参考Camera文档这里不再赘述。
 
总结：
本教程介绍了OPhone中提供的2D animation的使用方式，在程序中合理的使用animation会给程序带来不少亮点，例如在程序首页使用一个优美的逐帧动画做背景这样会显得程序更加生动。
 
作者简介：
 
程云峰，网名icess，目前就职于杭州恒生电子研发中心，喜欢Java开源技术。
个人网站：http://www.chengyunfeng.com/
OPhoneSDN帐户：icess_hust
 
 
 （声明：本网的新闻及文章版权均属OPhone SDN网站所有，如需转载请与我们编辑团队联系。任何媒体、网站或个人未经本网书面协议授权，不得进行任何形式的转载。已经取得本网协议授权的媒体、网站，在转载使用时请注明稿件来源。）