Author:ProZoom
Hobby:爱折腾、爱思考,想静静的ProZoom
Github --- 简书 --- CSDN --- 关于我
Android除了提供drawable资源动画之外,还提供了另外两种动画体系:
视图动画(View Animation)
视图动画比较简单,只能应用于各种View,可以做一些位置、大小、旋转和透明度的简单转变。
属性动画则是在android 3.0引入的动画体系,提供了更多特性和灵活性,也可以应用于任何对象,而不只是View。本篇先讲视图动画。
视图动画可以通过xml文件定义,xml文件放于res/anim/目录下,根元素可以为:
- < alpha >
- < scale >
- < translate >
- < rotate >
- < set >
其中,<set>标签定义的是动画集,它可以包含多个其他标签,也可以嵌套<set>标签。默认情况下,所有动画会同时播放;如果想按顺序播放,则需要指定startOffset**属性;另外,还可以通过设置interpolator改变动画变化的速率,比如匀速、加速。
< alpha >
< alpha >可以实现透明度渐变的动画效果,也就是淡入淡出的效果,可通过设置下面三个属性来设置淡入或淡出效果:
- android:duration 动画从开始到结束持续的时长,单位为毫秒
- android:fromAlpha 动画开始时的透明度,0.0为全透明,1.0为不透明,默认为1.0
- android:toAlpha 动画结束时的透明度,0.0为全透明,1.0为不透明,默认为1.0
当设置开始时透明度为0.0,结束时为1.0,就能实现淡入效果;相反,当设置开始时透明度为1.0,结束时为0.0,那就能实现淡出效果。示例代码如下:
<!-- res/anim/fade_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
将这动画效果添加到View上也只需要一行代码:
view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in));
如果需要重用这个动画,也可以将其抽离出来。<alpha>标签对应的动画类为AlphaAnimation,父类为Animation,以上代码将AlphaAnimation抽离后的代码可以如下:
AlphaAnimation fadeInAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.fade_in);
view.startAnimation(fadeInAnimation);
< scale >
< scale >可以实现缩放的动画效果,主要的属性如下:
- android:duration 动画从开始到结束持续的时长,单位为毫秒
- android:fromXScale 动画开始时X坐标上的缩放尺寸
- android:toXScale 动画结束时X坐标上的缩放尺寸
- android:fromYScale 动画开始时Y坐标上的缩放尺寸
- android:toYScale 动画结束时Y坐标上的缩放尺寸
PS:以上四个属性,0.0表示缩放到没有,1.0表示正常无缩放,小于1.0表示收缩,大于1.0表示放大
android:pivotX 缩放时的固定不变的X坐标,一般用百分比表示,0%表示左边缘,100%表示右边缘
android:pivotY 缩放时的固定不变的Y坐标,一般用百分比表示,0%表示顶部边缘,100%表示底部边缘
示例代码如下:
<!-- res/anim/zoom_out.xml -->
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="100%"
android:toXScale="1.5"
android:toYScale="1.5" />
< scale >标签对应的类为ScaleAnimation,父类也是Animation,添加到View上的用法和AlphaAnimation一样,代码如下:
ScaleAnimation zoomOutAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.zoom_out);
view.startAnimation(zoomOutAnimation);
< translate >
< translate >可以实现位置移动的动画效果,可以是垂直方向的移动,也可以是水平方向的移动。坐标的值可以有三种格式:从-100到100,以"%"结束,表示相对于View本身的百分比位置;如果以"%p"结束,表示相对于View的父View的百分比位置;如果没有任何后缀,表示相对于View本身具体的像素值。主要的属性如下:
- android:duration 动画从开始到结束持续的时长,单位为毫秒
- android:fromXDelta 起始位置的X坐标的偏移量
- android:toXDelta 结束位置的X坐标的偏移量
- android:fromYDelta 起始位置的Y坐标的偏移量
- android:toYDelta 结束位置的Y坐标的偏移量
看示例吧,以下代码实现的是从左到右的移动效果,起始位置为相对于控件本身-100%的位置,即在控件左边,与控件本身宽度一致的位置;结束位置为相对于父控件100%的位置,即会移出父控件右边缘的位置。
<!-- res/anim/move_left_to_right.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromXDelta="-100%"
android:fromYDelta="0"
android:toXDelta="100%p"
android:toYDelta="0" />
< translate >标签对应的类为TranslateAnimation,父类也是Animation,添加到View上的代码如下:
TranslateAnimation moveAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.move_left_to_right);
view.startAnimation(moveAnimation);
< rotate >
< rotate >可以实现旋转的动画效果,主要的属性如下:
- android:duration 动画从开始到结束持续的时长,单位为毫秒
- android:fromDegrees 旋转开始的角度
- android:toDegrees 旋转结束的角度
- android:pivotX 旋转中心点的X坐标,纯数字表示相对于View本身左边缘的像素偏移量;带"%"后缀时表示相对于View本身左边缘的百分比偏移量;带"%p"后缀时表示相对于父View左边缘的百分比偏移量
android:pivotY 旋转中心点的Y坐标,纯数字表示相对于View本身顶部边缘的像素偏移量;带"%"后缀时表示相对于View本身顶部边缘的百分比偏移量;带"%p"后缀时表示相对于父View顶部边缘的百分比偏移量
以下示例代码旋转角度从0到360,即旋转了一圈,旋转的中心点都设为了50%,即是View本身中点的位置。
<!-- res/anim/rotate_one.xml -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
< rotate >标签对应的类为RotateAnimation,父类也是Animation,添加到View上的代码如下:
RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_one);
view.startAnimation(rotateAnimation);
< set >
< set >标签可以将多个动画组合起来,变成一个动画集。比如想将一张图片缩放的同时也做移动,这时候就要用<set>标签组合缩放动画和移动动画了。示例代码如下:
<!-- res/anim/move_and_scale.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000">
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200%"
android:toYDelta="0" />
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="100%"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
以上代码实现的动画效果为向右移动的同时也同步放大。< set >标签在视图动画中除了可以组合< alpha >, < scale >, < translate >, < rotate >这四种标签,也可以嵌套其他< set >标签。另外,< set >标签可嵌套的标签元素并不只有这几个,后面谈到属性动画时会再讲其他的标签及用法。