
3.2.1 补间动画的种类
在3.1.3节提到,两张图片之间的渐变效果可以使用过渡图形实现,那么一张图形内部能否运用渐变效果呢?比如展示图片的逐步缩放过程等。正好,Android提供了补间动画,它允许开发者实现某个视图的动态变换,具体包括4种动画效果,分别是灰度动画、平移动画、缩放动画和旋转动画。为什么把这4种动画称作补间动画呢?因为由开发者提供动画的起始状态值与终止状态值,然后系统按照时间推移计算中间的状态值,并自动把中间状态的视图补充到起止视图的变化过程中,自动补充中间视图的动画就被简称为“补间动画”。
4种补间动画(灰度动画AlphaAnimation、平移动画TranslateAnimation、缩放动画ScaleAnimation和旋转动画RotateAnimation)都来自于共同的动画类Animation,因此同时拥有Animation的属性与方法。下面是Animation的常用方法:
- setFillAfter:设置是否维持结束画面。true表示动画结束后停留在结束画面,false表示动画结束后恢复到开始画面。
- setRepeatMode:设置动画的重播模式。Animation.RESTART表示从头开始,Animation.REVERSE表示倒过来播放。默认为Animation.RESTART。
- setRepeatCount:设置动画的重播次数。默认值为0,表示只播放一次;值为ValueAnimator.INFINITE时表示持续重播。
- setDuration:设置动画的持续时间,单位为毫秒。
- setInterpolator:设置动画的插值器。
- setAnimationListener:设置动画的监听器。需实现接口AnimationListener的3个方法:
onAnimationStart:在动画开始时触发。
onAnimationEnd:在动画结束时触发。
onAnimationRepeat:在动画重播时触发。
与帧动画一样,补间动画也需要找一个宿主视图,对宿主视图施展动画效果;不同的是,帧动画的宿主视图只能是由ImageView派生出来的视图家族(图像视图、图像按钮等),而补间动画的宿主视图可以是任意视图,只要派生自View类就行。给补间动画指定宿主视图的方式很简单,调用宿主对象的startAnimation方法即可命令宿主视图开始播放动画,调用宿主对象的clearAnimation方法即可要求宿主视图清除动画。
具体到每种补间动画又有不同的初始化方式。下面来看具体说明。
(1)初始化灰度动画:在构造方法中指定视图透明度的前后数值,取值为0.0~1.0(0表示完全不透明,1表示完全透明)。
(2)初始化平移动画:在构造方法中指定视图在平移前后左上角的坐标值。其中,第一个参数为平移前的横坐标,第二个参数为平移后的横坐标,第三个参数为平移前的纵坐标,第四个参数为平移后的纵坐标。
(3)初始化缩放动画:在构造方法中指定视图横纵坐标的前后缩放比例。缩放比例取值为0.5时表示缩小到原来的二分之一,取值为2时表示放大到原来的两倍。其中,第一个参数为缩放前的横坐标比例,第二个参数为缩放后的横坐标比例,第三个参数为缩放前的纵坐标比例,第四个参数为缩放后的纵坐标比例。
(4)初始化旋转动画:在构造方法中指定视图的旋转角度。其中,第一个参数为旋转前的角度,第二个参数为旋转后的角度,第三个参数为圆心的横坐标类型,第四个参数为圆心横坐标的数值比例,第五个参数为圆心的纵坐标类型,第六个参数为圆心纵坐标的数值比例。坐标类型的取值说明见表3-1。
表3-1 坐标类型的取值说明

下面是分别使用4种补间动画的示例代码:
(完整代码见animation\src\main\java\com\example\animation\TweenAnimActivity.java)



补间动画的播放效果如图3-10~图3-17所示。图3-10和图3-11为灰度动画播放前后的画面,图3-12和图3-13为平移动画播放前后的画面,图3-14和图3-15为缩放动画播放前后的画面,图3-16和图3-17为旋转动画播放前后的画面。

图3-10 灰度动画开始播放

图3-11 灰度动画即将结束

图3-12 平移动画开始播放

图3-13 平移动画即将结束

图3-14 缩放动画开始播放

图3-15 缩放动画即将结束

图3-16 旋转动画开始播放

图3-17 旋转动画正在播放