7.7渐变动画—Tween Animation
7.7.1Tween Animation简介
一个Tween动画将对视图对象中的内容进行一系列简单的转换(位置,大小,旋转,透明性)。如果你有一个文本视图对象,你可以移动它,旋转它,让它变大或让它变小,如果文字下面还有背景图像,背景图像也会随着文件进行转换。
可以使用XML来定义Tween Animation。首先将动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <translate> <rotate>插值元素或者是把上面的元素都放入<set>元素组中,默认情况下,所以的动画指令都是同时发生的,为了让他们按序列发生,需要设置一个特殊的属性startOffset。动画的指令定义了你想要发生什么样的转换,当他们发生了,应该执行多长时间,转换可以是连续的也可以使同时的。例如,你让文本内容从左边移动到右边,然后旋转180度,或者在移动的过程中同时旋转,没个转换需要设置一些特殊的参数(开始和结束的大小尺寸的大小变化,开始和结束的旋转角度等等,也可以设置些基本的参数(例如,开始时间与周期),如果让几个转换同时发生,可以给它们设置相同的开始时间,如果按序列的话,计算开始时间加上其周期。
7.7.2Tween Animation共同的属性
下面来说明下Tween Animation共同的节点属性。
l android:duration[long]—属性为动画持续时间 时间以毫秒为单位。
l android:fillAfter[boolean] —当设置为true,该动画转化在动画结束后被应用。
l android:fillBefore[boolean—当设置为true,该动画转化在动画开始前被应用。
l android:interpolator—指定一个动画的插入器有一些常见的插入器。
n accelerate_decelerate_interpolator—加速-减速 动画插入器。
n accelerate_interpolator—加速-动画插入器。
n decelerate_interpolator—减速- 动画插入器。
l android:repeatCount[int]—动画的重复次数。-1表示无限循环
l android:RepeatMode[int]—定义重复的行为,1:重新开始 2:plays backward。
l android:startOffset[long]—动画之间的时间间隔,从上次动画停多少时间开始执行下个动画。
l android:zAdjustment[int]—定义动画的Z Order的改变 0:保持Z Order不变,1:保持在最上层,-1:保持在最下层。
7.7.3淡进淡出—AlphaAnimation
AlphaAnimation是通过修改图片的透明度来实现的动画效果,如图7-6所示。
图7-6 AlphaAnimation动画效果
下面我们来解析AlphaAnimation的构造XML文档:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="3000" /> <!-- 透明度控制动画效果 alpha 浮点型值: fromAlpha 属性为动画起始时透明度 toAlpha 属性为动画结束时透明度 说明: 0.0表示完全透明 1.0表示完全不透明 以上值取0.0-1.0之间的float数据类型的数字 --> </set> |
在代码中的AlphaAnimation:
// 初始化函数: // AlphaAnimation(float fromAlpha, float toAlpha) // 第一个参数fromAlpha为动画开始时候透明度,对应XML中的fromAlpha属性 // 第二个参数toAlpha为动画结束时候透明度,对应XML中的toAlpha属性 AlphaAnimation mAlphaAnimation =new AlphaAnimation(0.1f, 1.0f); // 设置时间持续时间为 5000毫秒 mAlphaAnimation.setDuration(5000); |
7.7.4忽大忽小—ScaleAnimation
ScaleAnimation是通过修改图片的大小的动画效果,如图7-7所示。
图7-7 ScaleAnimation动画效果
下面我们来解析ScaleAnimation的构造XML文档:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" /> </set> <!—大小伸缩动画效果 scale 属性:interpolator 指定一个动画的插入器 浮点型值: fromXScale 属性为动画起始时 X坐标上的伸缩尺寸 toXScale 属性为动画结束时 X坐标上的伸缩尺寸 fromYScale 属性为动画起始时Y坐标上的伸缩尺寸 toYScale 属性为动画结束时Y坐标上的伸缩尺寸 (以上四种属性值, 0.0表示收缩到没有,1.0表示正常无伸缩 值小于1.0表示收缩 ,值大于1.0表示放大) pivotX 属性为动画相对于物件的X坐标的开始位置 pivotY 属性为动画相对于物件的Y坐标的开始位置 (以上两个属性值 从0%-100%中取值, 50%为物件的X或Y方向坐标上的中点位置) --> |
在代码中的ScaleAnimation:
// 初始化函数: // ScaleAnimation(float fromX, float toX, float fromY, float toY, // int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) // 第一个参数fromX为动画起始时 X坐标上的伸缩尺寸 // 第二个参数toX为动画结束时 X坐标上的伸缩尺寸 // 第三个参数fromY为动画起始时Y坐标上的伸缩尺寸 // 第四个参数toY为动画结束时Y坐标上的伸缩尺寸 // 第五个参数pivotXType为动画在X轴相对于物件位置类型 // 第六个参数pivotXValue为动画相对于物件的X坐标的开始位置 // 第七个参数pivotXType为动画在Y轴相对于物件位置类型 // 第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置 ScaleAnimation mScaleAnimation =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 设置时间持续时间为 700毫秒 mScaleAnimation.setDuration(700); |
7.7.5平移—TranslateAnimation
TranslateAnimation是通过修改图片的位置的动画效果,如图7-8所示:
图7-8 TranslateAnimation动画效果
下面我们来解析TranslateAnimation的构造XML文档:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="30" android:toXDelta="-80" android:fromYDelta="30" android:toYDelta="300" android:duration="2000" /> <!-- translate 位置转移动画效果 整型值: fromXDelta 属性为动画起始时 X坐标上的位置 toXDelta 属性为动画结束时 X坐标上的位置 fromYDelta 属性为动画起始时 Y坐标上的位置 toYDelta 属性为动画结束时 Y坐标上的位置 --> </set> |
在代码中的TranslateAnimation:
// 初始化函数: // TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) // 第一个参数fromXDelta为动画起始时 X坐标上的移动位置 // 第二个参数toXDelta为动画结束时 X坐标上的移动位置 // 第三个参数fromYDelta为动画起始时Y坐标上的移动位置 // 第四个参数toYDelta为动画结束时Y坐标上的移动位置 TranslateAnimation mTranslateAnimation = TranslateAnimation(0f, 100f, 0f, 100f) ; // 设置时间持续时间为 700毫秒 mTranslateAnimation.setDuration(700); |
7.7.6旋转—RotateAnimation
RotateAnimation是旋转图片的动画效果,如图7-9所示:
图7-9 RotateAnimation动画效果
下面我们来解析RotateAnimation的构造XML文档:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromDegrees="0" android:toDegrees="+350" android:pivotX="50%" android:pivotY="50%" android:duration="3000" /> <!-- rotate 旋转动画效果 属性:interpolator 指定一个动画的插入器 浮点数型值: fromDegrees 属性为动画起始时物件的角度 toDegrees 属性为动画结束时物件旋转的角度 可以大于360度 (当角度为负数——表示逆时针旋转 当角度为正数——表示顺时针旋转 (负数from——to正数:顺时针旋转) (负数from——to负数:逆时针旋转) (正数from——to正数:顺时针旋转) (正数from——to负数:逆时针旋转) ) pivotX 属性为动画相对于物件的X坐标的开始位置 pivotY 属性为动画相对于物件的Y坐标的开始位置 (以上两个属性值 从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置) --> </set> |
在代码中的RotateAnimation:
// 初始化函数: // RotateAnimation(float fromDegrees, float toDegrees, // int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) // 第一个参数fromDegrees为动画起始时的旋转角度 // 第二个参数toDegrees为动画旋转到的角度 // 第三个参数pivotXType为动画在X轴相对于物件位置类型 // 第四个参数pivotXValue为动画相对于物件的X坐标的开始位置 // 第五个参数pivotXType为动画在Y轴相对于物件位置类型 // 第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置 RotateAnimation mRotateAnimation =new RotateAnimation(0.0f, +350.0f, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f); // 设置时间持续时间为 700毫秒 mRotateAnimation.setDuration(700); |
7.7.7实现一个自己的TweenAnimation
下面我们来将上面的知识综合起来实现一个自己的TweenAnimation。
1)在工程中res/anim目录下构建一个TweenAnimation文件animation_1.xml如下:
<set android:shareInterpolator="false" xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="1.4" android:fromYScale="1.0" android:toYScale="0.6" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" /> <set android:interpolator="@android:anim/decelerate_interpolator"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:duration="400" android:fillBefore="false" /> <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:duration="400" /> </set> </set> |
2)在java代码中载入并执行动画:
// import略 public class myAnimation extends Activity implements OnClickListener { private Button mButton; private Animation mAnimation; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mButton = (Button) findViewById(R.id.button_id); mButton.setOnClickListener(this); } public void onClick(View button) { switch (button.getId()) { case R.id.button_id: { mAnimation= AnimationUtils.loadAnimation(this,R.anim. animation_1); mButton.startAnimation(mAnimation); } break; } } } |
经验分享: 与AnimationDrawable不同,如果animation.start();在onCreate()中执行的话,是可以播放出来的,就是一进来就播放动画了。 同时我们也通过animation_1.xml文件发现,多个TweenAnimation是可以写在一起的,他们会按照顺序来实现动画。 |