0
点赞
收藏
分享

微信扫一扫

Animation动画效果的实现


提供了三种动画效果:逐帧动画(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):



1. <animation-list    
2. "http://schemas.android.com/apk/res/android"
3. "false">    
4. "@drawable/qq001" android:duration="80"/>    
5. "@drawable/qq002" android:duration="80"/>    
6. "@drawable/qq003" android:duration="80"/>    
7. "@drawable/qq004" android:duration="80"/>    
8. "@drawable/qq005" android:duration="80"/>    
9. "@drawable/qq006" android:duration="80"/>    
10. "@drawable/qq007" android:duration="80"/>    
11. "@drawable/qq008" android:duration="80"/>    
12. </animation-list>


 


 


在上面的定义中通过animation-list来指定这是个AnimationDrawable动画定义,里面的item来指定每帧图片和显示时间(单位为毫秒),帧显示的顺序就是item定义的顺序。如果android:oneshot设置为true表明该动画只播放一次,否则该动画会循环播放。这些设置也可以通过AnimationDrawable提供的函数来设置。动画中引用的文件为QQ表情文件,包含在示例项目代码中。


然后在layout中定义一个ImageView来显示上面定义的AnimationDrawable, layout代码如下(res\layout\main.xml):



1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout    
3. "http://schemas.android.com/apk/res/android"
4. "vertical"
5. "fill_parent"
6. "fill_parent">    
7.     <ImageView    
8. "@+id/animation_view"
9. "fill_parent"
10. "wrap_content"
11. "@drawable/qq_animation"
12.     <Button    
13. "@+id/animation_btn"
14. "fill_parent"
15. "wrap_content"
16. "@string/start_animation"
17.     <Button    
18. "@+id/one_shot_btn"
19. "fill_parent"
20. "wrap_content"
21. "@string/play_once"
22. </LinearLayout>


注意这里的ImageView 通过android:src="@drawable/qq_animation"引用了前面定义的AnimationDrawable,下面是两个按钮用来控制播放动画和设置AnimationDrawable的oneshot属性。
下面就是控制动画播放的类代码(src\org\goodev\animation\AnimActivity.java):
 




    1. public class AnimActivity extends
    2. /** Called when the activity is first created. */
    3.     AnimationDrawable mAd;   
    4.     Button mPlayBtn;   
    5.     Button mOneShotBtn;   
    6. boolean
    7.     
    8. @Override
    9. public void
    10. super.onCreate(savedInstanceState);    
    11.        setContentView(R.layout.main);   
    12.     
    13.        ImageView iv = (ImageView) findViewById(R.id.animation_view);   
    14.        mAd = (AnimationDrawable) iv.getDrawable();   
    15.     
    16.        mPlayBtn = (Button) findViewById(R.id.animation_btn);   
    17. new
    18. @Override
    19. public void
    20.               startAnimation();   
    21.            }   
    22.        });   
    23.     
    24.        mOneShotBtn = (Button) findViewById(R.id.one_shot_btn);   
    25. new
    26. @Override
    27. public void
    28. if
    29. "Play Once");    
    30. else
    31. "Play Repeatly");    
    32.               }   
    33.               mAd.setOneShot(!mIsOneShot);   
    34.               mIsOneShot = !mIsOneShot;   
    35.            }   
    36.        });   
    37.     
    38.     }   
    39.     
    40. /** 
    41.      * 通过AnimationDrawable的start函数播放动画, 
    42.      * stop函数停止动画播放, 
    43.      * isRunning来判断动画是否正在播放。 
    44.      */
    45. public void
    46. if
    47.            mAd.stop();   
    48. else
    49.            mAd.stop();   
    50.            mAd.start();   
    51.        }   
    52.     }   
    53. }   
    54.


    布局动画介绍



     



    布局动画和逐帧动画是由本质的不同的,逐帧动画是一帧帧图片组成的,而布局动画是渐变动画,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):



    1. <set xmlns:android="http://schemas.android.com/apk/res/android"
    2. "@android:anim/decelerate_interpolator">    
    3. <alpha    
    4. "0.0"
    5. "1.0"
    6. "1000"
    7. </set>




    如果只定义一种渐变效果,则可以去除set元素,如下:
     





      1. <alpha    
      2. "http://schemas.android.com/apk/res/android"
      3. "@android:anim/accelerate_interpolator"
      4. "0.0"
      5. "1.0"
      6. "1000"




       



      上面定义的alpha从0(透明)到1(不透明)渐变,渐变时间为1000毫秒。



       




      1. <scale    
      2. "http://schemas.android.com/apk/res/android"
      3. "@android:anim/accelerate_interpolator"
      4. "1"
      5. "1"
      6. "0.1"
      7. "1.0"
      8. "500"
      9. "50%"
      10. "50%"
      11. "100"




       



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



      1. <rotate    
      2. "http://schemas.android.com/apk/res/android"
      3. "@android:anim/accelerate_interpolator"
      4. "0.0"
      5. "360"
      6. "50%"
      7. "50%"
      8. "500"




       



       



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




      1. <translate    
      2. "http://schemas.android.com/apk/res/android"
      3. "@android:anim/accelerate_interpolator"
      4. "-100%"
      5. "0"
      6. "500"



       



       



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



       



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



      1. <set xmlns:android="http://schemas.android.com/apk/res/android"
      2. "@android:anim/decelerate_interpolator">    
      3. <translate    
      4. "-100%"
      5. "0"
      6. "500"
      7. <alpha    
      8. "0.0"
      9. "1.0"
      10. "500"
      11. </set>




       



       



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


      1. LayoutAnimationController,该文件同样位于res/anim/目录下,下面是一个示例(res\anim\layout_anim_ctrl.xml):   
      2. <layoutAnimation    
      3. "http://schemas.android.com/apk/res/android"
      4. "30%"
      5. "reverse"
      6. "@anim/translate_alpha_anim"



       



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



       



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




      1. <?xml version="1.0" encoding="utf-8"?>   
      2. <LinearLayout    
      3. "http://schemas.android.com/apk/res/android"
      4. "vertical"
      5. "fill_parent"
      6. "fill_parent">    
      7.     <ListView    
      8. "@+id/list"
      9. "fill_parent"
      10. "fill_parent"
      11.        
      12. "animation|scrolling"
      13. "@anim/layout_anim_ctrl"
      14. </LinearLayout>



       



       



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



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



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



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



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



       



      在Activity中并没有什么变化,代码如下(src\org\goodev\animation\ListActivity.java):


      1. public class ListActivity extends
      2.     
      3.     String[] mListItems =    
      4. "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};    
      5.     
      6. @Override
      7. public void
      8. super.onCreate(savedInstanceState);    
      9.        setContentView(R.layout.list);   
      10.     
      11.        ArrayAdapter<String> listItemAdapter =    
      12. new ArrayAdapter<String>(this,    
      13.               android.R.layout.simple_list_item_1, mListItems);   
      14. this.findViewById(R.id.list);    
      15.        lv.setAdapter(listItemAdapter);   
      16.     }   
      17. }




       



       



      控件动画介绍



      其实控件动画也是布局动画的一种,可以看做是自定义的动画实现,布局动画在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


       



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



         



        1. class ViewAnimation extends
        2. public
        3.        }   
        4.     
        5. @Override
        6. public void initialize(int width, int height, int parentWidth, int
        7. super.initialize(width, height, parentWidth, parentHeight);    
        8. 2500);    
        9. true);    
        10. new
        11.        }   
        12.     
        13. @Override
        14. protected void applyTransformation(float
        15.               Transformation t) {   
        16. final
        17.            matrix.setScale(interpolatedTime, interpolatedTime);   
        18.               
        19.        }   
        20.     }




         



         



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



         



          1. public class ViewAnimActivity extends
          2.     
          3.     Button mPlayBtn;   
          4.     ImageView mAnimImage;   
          5.     
          6. @Override
          7. public void
          8. super.onCreate(savedInstanceState);    
          9.        setContentView(R.layout.view_anim_layout);   
          10. this.findViewById(R.id.anim_image);    
          11.     
          12.        mPlayBtn = (Button) findViewById(R.id.play_btn);   
          13. new
          14.     
          15. @Override
          16. public void
          17. new
          18.            }   
          19.     
          20.        });   
          21.     
          22.     }   
          23. }




           



           



          布局代码如下(res\layout\view_anim_layout.xml):


          1. <?xml version="1.0" encoding="utf-8"?>   
          2. <LinearLayout    
          3. "http://schemas.android.com/apk/res/android"
          4. "vertical"
          5. "fill_parent"
          6. "fill_parent"
          7. >    
          8. <Button   
          9. "@+id/play_btn"
          10. "fill_parent"
          11. "wrap_content"
          12. "Start Animation"
          13. />   
          14. <ImageView    
          15. "@+id/anim_image"
          16. "animation|scrolling"
          17. "fill_parent"
          18. "wrap_content"
          19. "@drawable/ophone"
          20. />   
          21. </LinearLayout>



          从上图可以看到 ImageView是从左上角出来的,这是由于没有指定矩阵的变换参考位置,默认位置为(0,0),如果要想让ImageView从中间出来,可以通过矩阵变换来把参考点移动到中间来,如下实现:



             




          1. class ViewAnimation extends
          2. int mCenterX;//记录View的中间坐标 
          3. int
          4. public
          5.        }   
          6.     
          7. @Override
          8. public void initialize(int width, int height, int parentWidth, int
          9. super.initialize(width, height, parentWidth, parentHeight);    
          10. //初始化中间坐标值 
          11. 2;     
          12. 2;    
          13. 2500);    
          14. true);    
          15. new
          16.        }   
          17.     
          18. @Override
          19. protected void applyTransformation(float
          20.               Transformation t) {   
          21. final
          22.            matrix.setScale(interpolatedTime, interpolatedTime);   
          23. //通过坐标变换,把参考点(0,0)移动到View中间 
          24.            matrix.preTranslate(-mCenterX, -mCenterY);   
          25. //动画完成后再移回来 
          26.            matrix.postTranslate(mCenterX, mCenterY);   
          27.        }   
          28.     }



           



           



          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的功能:



             



          1. class ViewAnimation extends
          2. int mCenterX;//记录View的中间坐标 
          3. int
          4. new
          5. public
          6.        }   
          7.     
          8. @Override
          9. public void initialize(int width, int height, int
          10. int
          11. super.initialize(width, height, parentWidth, parentHeight);    
          12. //初始化中间坐标值 
          13. 2;     
          14. 2;    
          15. 2500);    
          16. true);    
          17. new
          18.        }   
          19.     
          20. @Override
          21. protected void applyTransformation(float
          22.               Transformation t) {   
          23. //         final Matrix matrix = t.getMatrix(); 
          24. //         matrix.setScale(interpolatedTime, interpolatedTime); 
          25. //         //通过坐标变换,把参考点(0,0)移动到View中间 
          26. //         matrix.preTranslate(-mCenterX, -mCenterY); 
          27. //         //动画完成后再移回来 
          28. //         matrix.postTranslate(mCenterX, mCenterY); 
          29. final
          30.            camera.save();   
          31. 0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime));    
          32. 360
          33.            camera.getMatrix(matrix);   
          34.            matrix.preTranslate(-mCenterX, -mCenterY);   
          35.            matrix.postTranslate(mCenterX, mCenterY);   
          36.            camera.restore();   
          37.        }   
          38.     }




           



          camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime))在第一次调用的时候interpolatedTime值为0,相当于把ImageView在Z轴后移1300像素,然后逐步的往前移动到0,同时camera.rotateY(360 * interpolatedTime)函数又把ImageView沿Y轴翻转360度

          举报

          相关推荐

          0 条评论