Android动画学习(二)——Tween Animation

前两天写过一篇Android动画学习的概述，大致的划分了下Android Animation的主要分类，没有看过的同学请移步： Android动画学习(一)——Android动画系统框架简介 。今天接着来讲View Animation——Tween Animation。

Tween Animation，即补间动画，它提供了淡入淡出（alpha）、缩放（scale）、旋转（rotate）、移动（translate）等效果。它涉及的主要类如下图所示：

其中，AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation、AnimationSet都为Animation的子类。AnimationSet为动画集，可以用 addAnimation() 方法将动画添加进去。

下面开始分别讲诉通过代码和XML实现AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation动画效果。

AlphaAnimation：

通过XML实现(anim_alpha.xml)：

1 <?xml version="1.0" encoding="utf-8"?>  2 <set xmlns:android="http://schemas.android.com/apk/res/android"  3     android:fillAfter="true"  4     android:fillBefore="true"  5     android:fillEnabled="false">  6     <!-- 两者同时设置，最终只显示fillAfter的效果 -->  7   8     <!--  9         fromAlpha:Float.起始动画时的不透明度，0.0表示透明，1.0表示不透明 10         toAlpha:Float.结束动画时的不透明度，0.0表示透明，1.0表示不透明 11      --> 12     <!-- 透明度从1.0变到0.1，且动画结束后保留最后一帧的效果 --> 13     <alpha 14         android:duration="@integer/animation_duration" 15         android:fromAlpha="1.0" 16         android:toAlpha="0.1" /> 17 </set>

以下是代码和XML实现AlphaAnimation的代码片段(AlphaAnimationFragment.java)

1 public void onClick(View v) {  2         switch (v.getId()) {  3             //XML实现Alpha动画效果  4             case R.id.btn_alpha_animation_xml:  5                 //AnimationUtils.loadAnimation()方法返回Animation对象，所以alphaAnimation为Animation  6                 alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha);  7                 mAlphaTv.startAnimation(alphaAnimation);  8                 break;  9             //Code实现Alpha动画效果 10             case R.id.btn_alpha_animation_code: 11                 //AlphaAnimation(float fromAlpha,float toAlpha) 12                 //fromAlpha:起始动画时的不透明度，0.0表示透明，1.0表示不透明 13                 //toAlpha:结束动画时的不透明度，0.0表示透明，1.0表示不透明 14                 //透明度从0.1——>1.0 15                 alphaAnimation = new AlphaAnimation(0.1f, 1.0f); 16                 //设置动画时间 17                 alphaAnimation.setDuration(getResources().getInteger(R.integer.animation_duration)); 18                 //开始动画 19                 mAlphaTv.startAnimation(alphaAnimation); 20                 break; 21             default: 22                 break; 23         } 24     }

ScaleAnimation:

通过XML实现(anim_scale.xml)：

1 <?xml version="1.0" encoding="utf-8"?>  2 <set xmlns:android="http://schemas.android.com/apk/res/android">  3   4     <!--  5        fromXScale & toXScale:Float.动画起始、结束时X坐标上的伸缩尺寸  6        fromYScale & toYScale:Float.动画起始、结束时Y坐标上的伸缩尺寸  7        pivotX & pivotY:Float.表示看不到任何效果  8     -->  9     <!-- X、Y轴从0.1伸展到1.0 --> 10     <scale 11         android:duration="@integer/animation_duration" 12         android:fromXScale="0.1" 13         android:fromYScale="0.1" 14         android:toXScale="1.0" 15         android:toYScale="1.0" /> 16 </set>

以下是代码和XML实现ScaleAnimation的代码片段(ScaleAnimationFragment.java):

1 public void onClick(View v) {  2         switch (v.getId()) {  3             //XML实现Scale动画效果  4             case R.id.btn_zoom_in:  5                 //AnimationUtils.loadAnimation()方法返回Animation对象，所以alphaAnimation为Animation  6                 scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale);  7                 mScaleTargetTv.startAnimation(scaleAnimation);  8                 break;  9             //Code实现Scale动画效果,从1.0缩到0.1 10             case R.id.btn_zoom_out: 11                 //ScaleAnimation(float fromX, float toX, float fromY, float toY) 12                 //第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。 13                 //第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。 14                 //另外还有pivotXType、pivotYType：伸缩模式， 15                 //pivotXValue、pivotYValue伸缩动画相对于x,y 坐标的开始位置 16                 scaleAnimation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f); 17                 scaleAnimation.setDuration(3000); 18                 mScaleTargetTv.startAnimation(scaleAnimation); 19                 break; 20             default: 21                 break; 22         } 23     }

RotateAnimation:

通过XML实现(anim_rotate.xml)：

1 <?xml version="1.0" encoding="utf-8"?>  2 <set xmlns:android="http://schemas.android.com/apk/res/android"  3     android:fillAfter="true">  4   5     <!--  6         fromDegrees:Float.动画开始时的角度  7         toDegrees:Float.动画结束时的角度  8         pivotX & pivotY：Float or percentage.用Float（如(x,y)=(5,5)）代表中心为整个布局的左上角(5,5)，用百分比(如(x,y)=(50%，50%))代表中心为该控件的中心，用百分比(如(x,y)=(50%p，50%p))代表中心为该控件的父控件的中心  9     --> 10     <!-- 以自身为中心，在1500ms内旋转720度 --> 11     <rotate 12         android:duration="@integer/animation_duration" 13         android:fromDegrees="0" 14         android:pivotX="50%" 15         android:pivotY="50%" 16         android:toDegrees="720" /> 17 </set>

以下是代码和XML实现RotateAnimation的代码片段(RotateAnimationFragment.java):

1 public void onClick(View v) {  2         switch (v.getId()) {  3             //XML实现Rotate动画效果  4             case R.id.btn_rotate_xml:  5                 //AnimationUtils.loadAnimation()方法返回Animation对象，所以rotateAnimation为Animation  6                 rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate);  7                 mRotateTv.startAnimation(rotateAnimation);  8                 break;  9             //Code实现Rotate动画效果：每次点击都以自身中心点选择90度 10             case R.id.btn_rotate_code: 11                 //RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue) 12                 //fromDegrees:动画开始时的角度 13                 //toDegrees:动画结束时的角度 14                 //pivotXType、pivotYType:中心点类型，主要有Animation.ABSOLUTE、Animation.RELATIVE_TO_PARENT、Animation.RELATIVE_TO_SELF 15                 //pivotXValue、pivotYValue:根据pivotType决定旋转效果 16                 rotateAnimation = new RotateAnimation(degree, degree + 90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); 17                 rotateAnimation.setDuration(getResources().getInteger(R.integer.animation_duration)); 18                 //设置动画结束时是否停留在最后一帧 19                 rotateAnimation.setFillAfter(true); 20                 mRotateTv.startAnimation(rotateAnimation); 21                 degree += 90; 22                 break; 23             default: 24                 break; 25         } 26     }

TranslateAnimation：

通过XML实现(anim_translate.xml)：

1 <?xml version="1.0" encoding="utf-8"?>  2 <set xmlns:android="http://schemas.android.com/apk/res/android"  3     android:fillAfter="true">  4   5     <!--  6         fromXDelta & toXDelta:位移开始和结束时x的位置。  7         fromYDelta & toYDelta:位移开始和结束时y的位置。  8     -->  9     <!-- 从（0，0）位移到（100，100） --> 10     <translate 11         android:duration="@integer/animation_duration" 12         android:fillAfter="true" 13         android:fromXDelta="0" 14         android:fromYDelta="0" 15         android:toXDelta="100" 16         android:toYDelta="100" /> 17 </set>

以下是代码和XML实现TranslateAnimation的代码片段(TranslateAnimationFragment.java):

1 public void onClick(View v) {  2         switch (v.getId()) {  3             //XML实现Translate动画效果  4             case R.id.btn_translate_xml:  5                 //AnimationUtils.loadAnimation()方法返回Animation对象，所以translateAnimation为Animation  6                 translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate);  7                 translateAnimation.setFillAfter(true);  8                 mTranslateTv.setText("点我点我，看看我是不是在新的位置！");  9                 mTranslateTv.startAnimation(translateAnimation); 10                 break; 11             //Code实现Translate动画效果 12             case R.id.btn_translate_code: 13                 //TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) 14                 translateAnimation = new TranslateAnimation(0, 100, 0, 100); 15                 translateAnimation.setFillAfter(true); 16                 translateAnimation.setDuration(3000); 17                 mTranslateTv.setText("点我点我，看看我是不是在新的位置！"); 18                 mTranslateTv.startAnimation(translateAnimation); 19                 break; 20             case R.id.tv_translate: 21                 Toast.makeText(getActivity(), "让你发现了，我还在老位置上！", Toast.LENGTH_SHORT).show(); 22                 break; 23             default: 24                 break; 25         } 26     }

这里有个有意思的事情，那就是执行TranslateAnimation动画之后，其实执行动画的那个View位置并没有改变而是依旧停留在老位置。用ScaleAnimation、RotateAnimation测试都可以得出相同的结论，AlphaAnimation测试的效果不太好展示，但是应该也是相同的。即： Tween Animation并不会改变View的位置、大小等属性，只会改变View的显示效果 。

把AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation各自的效果都展示了一遍，最后就用AnimationSet来实现一个复杂的动画（MutipleAnimation）。

实现MutipleAnimation也有多种方式，一种是将前面的xml动画全部用AnimationUtils.loadAnimation()方法生成Animation对象，然后用addAnimation添加到AnimationSet对象里，调用View的startAnimation执行（之前有说过AnimationSet是Animation的子类）。另一种是写一个anim_mutiple.xml，然后用AnimationUtils.loadAnimation()方法生成Animation对象，调用View的startAnimation执行。

Mutiple Animation实现：

XML动画实现（anim_mutiple.xml）

1 <?xml version="1.0" encoding="utf-8"?>  2 <set xmlns:android="http://schemas.android.com/apk/res/android"  3     android:fillAfter="true">  4   5     <!-- 各种单独特效的杂糅 -->  6     <alpha  7         android:duration="@integer/animation_duration"  8         android:fromAlpha="1.0"  9         android:toAlpha="0.1" /> 10  11     <rotate 12         android:duration="@integer/animation_duration" 13         android:fromDegrees="0" 14         android:pivotX="50%" 15         android:pivotY="50%" 16         android:toDegrees="720" /> 17  18     <scale 19         android:duration="@integer/animation_duration" 20         android:fromXScale="0.1" 21         android:fromYScale="0.1" 22         android:toXScale="1.0" 23         android:toYScale="1.0" /> 24  25     <translate 26         android:duration="@integer/animation_duration" 27         android:fillAfter="true" 28         android:fromXDelta="0" 29         android:fromYDelta="0" 30         android:toXDelta="100" 31         android:toYDelta="100" /> 32 </set>

代码实现：

1 public void onClick(View v) {  2         switch (v.getId()) {  3             //Mutiple Animation实现方法一  4             case R.id.btn_mutiple_anim_one:  5                 animationSet = new AnimationSet(true);  6                 Animation alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha);  7                 Animation scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale);  8                 Animation rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate);  9                 Animation translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate); 10                 animationSet.addAnimation(alphaAnimation); 11                 animationSet.addAnimation(scaleAnimation); 12                 animationSet.addAnimation(rotateAnimation); 13                 animationSet.addAnimation(translateAnimation); 14                 mMutipleTv.startAnimation(animationSet); 15                 break; 16             //Mutiple Animation实现方法二 17             case R.id.btn_mutiple_anim_two: 18                 Animation mutipleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_mutiple); 19                 mMutipleTv.startAnimation(mutipleAnimation); 20                 break; 21             default: 22                 break; 23         } 24     }

关于Tween Animation的使用就总结到这里，这是Tween Animation最简单的用法，等以后有更深入的理解后再来更新。文中涉及到的代码： AndroidDevLearn 中的Animation模块。

接下来讲述Frame Animation和Drawable Animation，敬请期待~