[转]Animation自定义卡通片效果的实现

[转]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）：view plaincopy to clipboardprint?

<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>??

Java代码??

<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）：view plaincopy to clipboardprint?

<?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>??

Java代码??

<?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）：
?view plaincopy to clipboardprint?

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(); ??
???????} ??
????} ??
} ??
???

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();?}?}?}??

?布局动画介绍?布局动画和逐帧动画是由本质的不同的，逐帧动画是一帧帧图片组成的，而布局动画是渐变动画，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）：view plaincopy to clipboardprint?
1. <set?xmlns:android="http://schemas.android.com/apk/res/android"??
2. android:interpolator="@android:anim/decelerate_interpolator"> ??
3. <alpha? ??
4. ????android:fromAlpha="0.0"? ??
5. ????android:toAlpha="1.0"? ??
6. ????android:duration="1000"?/> ??
7. </set>??
Java代码??
1. <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元素，如下：
?view plaincopy to clipboardprint?
1. <alpha? ??
2. xmlns:android="http://schemas.android.com/apk/res/android"??
3. android:interpolator="@android:anim/accelerate_interpolator"??
4. android:fromAlpha="0.0"? ??
5. android:toAlpha="1.0"? ??
6. android:duration="1000"?/>??
Java代码??
1. <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毫秒。?view plaincopy to clipboardprint?
1. <scale? ??
2. xmlns:android="http://schemas.android.com/apk/res/android"??
3. android:interpolator="@android:anim/accelerate_interpolator"??
4. android:fromXScale="1"??
5. android:toXScale="1"??
6. android:fromYScale="0.1"??
7. android:toYScale="1.0"??
8. android:duration="500"??
9. android:pivotX="50%"??
10. android:pivotY="50%"??
11. android:startOffset="100"?/>??
Java代码??
1. <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指定了在缩放开始前等待的时间。view plaincopy to clipboardprint?
1. <rotate? ??
2. xmlns:android="http://schemas.android.com/apk/res/android"??
3. android:interpolator="@android:anim/accelerate_interpolator"??
4. android:fromDegrees="0.0"??
5. android:toDegrees="360"??
6. android:pivotX="50%"??
7. android:pivotY="50%"??
8. android:duration="500"?/>??
Java代码??
1. <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毫秒，变换的中心点位控件的中心位置。view plaincopy to clipboardprint?
1. <translate? ??
2. xmlns:android="http://schemas.android.com/apk/res/android"??
3. android:interpolator="@android:anim/accelerate_interpolator"??
4. android:fromYDelta="-100%"? ??
5. android:toYDelta="0"??
6. android:duration="500"?/>??
Java代码??
1. <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）：view plaincopy to clipboardprint?
1. <set?xmlns:android="http://schemas.android.com/apk/res/android"??
2. android:interpolator="@android:anim/decelerate_interpolator"> ??
3. <translate? ??
4. android:fromYDelta="-100%"? ??
5. android:toYDelta="0"??
6. android:duration="500"?/> ??
7. <alpha? ??
8. android:fromAlpha="0.0"? ??
9. android:toAlpha="1.0"??
10. android:duration="500"?/> ??
11. </set>??
Java代码??
1. <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文件中定义view plaincopy to clipboardprint?
1. LayoutAnimationController，该文件同样位于res/anim/目录下，下面是一个示例（res\anim\layout_anim_ctrl.xml）： ??
2. <layoutAnimation? ??
3. xmlns:android="http://schemas.android.com/apk/res/android"??
4. android:delay="30%"??
5. android:animationOrder="reverse"??
6. android:animation="@anim/translate_alpha_anim"?/>??
Java代码??
1. 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做演示，布局代码如下：view plaincopy to clipboardprint?
1. <?xml?version="1.0"?encoding="utf-8"?> ??
2. <LinearLayout? ??
3. xmlns:android="http://schemas.android.com/apk/res/android"??
4. android:orientation="vertical"? ??
5. android:layout_width="fill_parent"??
6. android:layout_height="fill_parent"> ??
7. ????<ListView? ??
8. ????android:id="@+id/list"? ??
9. ????android:layout_width="fill_parent"??
10. ????android:layout_height="fill_parent"? ??
11. ???? ??
12. ????android:persistentDrawingCache="animation|scrolling"??
13. ????android:layoutAnimation="@anim/layout_anim_ctrl"?/> ??
14. </LinearLayout>??
Java代码??
1. <?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）：view plaincopy to clipboardprint?
1. public?class?ListActivity?extends?Activity?{ ??
2. ? ??
3. ????String[]?mListItems?=? ??
4. ????{?"Item?1",?"Item?2",?"Item?3",?"Item?4",?"Item?5"}; ??
5. ? ??
6. ????@Override??
7. ????public?void?onCreate(Bundle?savedInstanceState)?{ ??
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. ???????ListView?lv?=?(ListView)?this.findViewById(R.id.list); ??
15. ???????lv.setAdapter(listItemAdapter); ??
16. ????} ??
17. }??
Java代码??
1. 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?)。?下面来看一个简单的实现：???view plaincopy to clipboardprint?
1. class?ViewAnimation?extends?Animation?{ ??
2. ???????public?ViewAnimation()?{ ??
3. ???????} ??
4. ? ??
5. ???????@Override??
6. ????????public?void?initialize(int?width,?int?height,?int?parentWidth,?int?parentHeight)?{ ??
7. ???????????super.initialize(width,?height,?parentWidth,?parentHeight); ??
8. ???????????setDuration(2500); ??
9. ???????????setFillAfter(true); ??
10. ???????????setInterpolator(new?LinearInterpolator()); ??
11. ???????} ??
12. ? ??
13. ???????@Override??
14. ????????protected?void?applyTransformation(float?interpolatedTime, ??
15. ??????????????Transformation?t)?{ ??
16. ???????????final?Matrix?matrix?=?t.getMatrix(); ??
17. ???????????matrix.setScale(interpolatedTime,?interpolatedTime); ??
18. ??????????? ??
19. ???????} ??
20. ????}??
Java代码??
1. 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）：?view plaincopy to clipboardprint?
1. public?class?ViewAnimActivity?extends?Activity?{ ??
2. ? ??
3. ????Button?mPlayBtn; ??
4. ????ImageView?mAnimImage; ??
5. ? ??
6. ????@Override??
7. ????public?void?onCreate(Bundle?savedInstanceState)?{ ??
8. ???????super.onCreate(savedInstanceState); ??
9. ???????setContentView(R.layout.view_anim_layout); ??
10. ???????mAnimImage?=?(ImageView)?this.findViewById(R.id.anim_image); ??
11. ? ??
12. ???????mPlayBtn?=?(Button)?findViewById(R.id.play_btn); ??
13. ???????mPlayBtn.setOnClickListener(new?OnClickListener()?{ ??
14. ? ??
15. ???????????@Override??
16. ???????????public?void?onClick(View?view)?{ ??
17. ??????????????mAnimImage.startAnimation(new?ViewAnimation()); ??
18. ???????????} ??
19. ? ??
20. ???????}); ??
21. ? ??
22. ????} ??
23. }??
Java代码??
1. 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）：view plaincopy to clipboardprint?
1. <?xml?version="1.0"?encoding="utf-8"?> ??
2. <LinearLayout? ??
3. xmlns:android="http://schemas.android.com/apk/res/android"??
4. android:orientation="vertical"??
5. android:layout_width="fill_parent"??
6. android:layout_height="fill_parent"??
7. >? ??
8. <Button ??
9. android:id="@+id/play_btn"??
10. android:layout_width="fill_parent"??
11. android:layout_height="wrap_content"??
12. android:text="Start?Animation"??
13. /> ??
14. <ImageView? ??
15. android:id="@+id/anim_image"??
16. android:persistentDrawingCache="animation|scrolling"??
17. android:layout_width="fill_parent"? ??
18. android:layout_height="wrap_content"? ??
19. android:src="@drawable/ophone"??
20. /> ??
21. </LinearLayout>??
Java代码??
1. <?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>??
?从上图可以看到ImageView是从左上角出来的，这是由于没有指定矩阵的变换参考位置，默认位置为（0,0），如果要想让ImageView从中间出来，可以通过矩阵变换来把参考点移动到中间来，如下实现：???view plaincopy to clipboardprint?
1. class?ViewAnimation?extends?Animation?{ ??
2. ???????int?mCenterX;//记录View的中间坐标???
3. ???????int?mCenterY; ??
4. ???????public?ViewAnimation()?{ ??
5. ???????} ??
6. ? ??
7. ???????@Override??
8. ???????public?void?initialize(int?width,?int?height,?int?parentWidth,?int?parentHeight)?{ ??
9. ???????????super.initialize(width,?height,?parentWidth,?parentHeight); ??
10. ???????????//初始化中间坐标值???
11. ???????????mCenterX?=?width/2;? ??
12. ???????????mCenterY?=?height/2; ??
13. ???????????setDuration(2500); ??
14. ???????????setFillAfter(true); ??
15. ???????????setInterpolator(new?LinearInterpolator()); ??
16. ???????} ??
17. ? ??
18. ???????@Override??
19. ???????protected?void?applyTransformation(float?interpolatedTime, ??
20. ??????????????Transformation?t)?{ ??
21. ???????????final?Matrix?matrix?=?t.getMatrix(); ??
22. ???????????matrix.setScale(interpolatedTime,?interpolatedTime); ??
23. ???????????//通过坐标变换，把参考点（0,0）移动到View中间???
24. ???????????matrix.preTranslate(-mCenterX,?-mCenterY); ??
25. ???????????//动画完成后再移回来???
26. ???????????matrix.postTranslate(mCenterX,?mCenterY); ??
27. ???????} ??
28. ????}??
Java代码??
1. 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的功能：???view plaincopy to clipboardprint?
  1. ?class?ViewAnimation?extends?Animation?{ ??
  2. ???????int?mCenterX;//记录View的中间坐标???
  3. ???????int?mCenterY; ??
  4. ???????Camera?camera?=?new?Camera(); ??
  5. ???????public?ViewAnimation()?{ ??
  6. ???????} ??
  7. ? ??
  8. ???????@Override??
  9. ???????public?void?initialize(int?width,?int?height,?int?parentWidth, ??
  10. ??????????????int?parentHeight)?{ ??
  11. ???????????super.initialize(width,?height,?parentWidth,?parentHeight); ??
  12. ???????????//初始化中间坐标值???
  13. ???????????mCenterX?=?width/2;? ??
  14. ???????????mCenterY?=?height/2; ??
  15. ???????????setDuration(2500); ??
  16. ???????????setFillAfter(true); ??
  17. ???????????setInterpolator(new?LinearInterpolator()); ??
  18. ???????} ??
  19. ? ??
  20. ???????@Override??
  21. ???????protected?void?applyTransformation(float?interpolatedTime, ??
  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?Matrix?matrix?=?t.getMatrix(); ??
  30. ???????????camera.save(); ??
  31. ???????????camera.translate(0.0f,?0.0f,?(1300?-?1300.0f?*?interpolatedTime)); ??
  32. ???????????camera.rotateY(360?*?interpolatedTime); ??
  33. ???????????camera.getMatrix(matrix); ??
  34. ???????????matrix.preTranslate(-mCenterX,?-mCenterY); ??
  35. ???????????matrix.postTranslate(mCenterX,?mCenterY); ??
  36. ???????????camera.restore(); ??
  37. ???????} ??
  38. ????}??
  Java代码??
  1. 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度

[转]Animation自定义卡通片效果的实现

热点推荐