Android动画分为三种:属性动画,补间动画,帧动画。本篇文章是对Android官方文档中关于动画资源一文的翻译学习,介绍了三种动画资源的的相关属性,xml的编写和引用。

动画资源的定义分为两种动画:

属性动画

动画制作者可以通过在设置的时间内修改对象的属性值来创建一个动画。

视图动画

可以使用视图动画框架执行两种类型的动画:

  • 补间动画

    通过对单一图像执行一系列变换从而产生动画效果。

  • 帧动画

    通过按顺序展示连续的图片产生动画效果。

属性动画


在一定的时间内修改目标对象的属性产生动画的xml文件,例如背景颜色或者alpah值。

文件位置:

res/animator/filename.xml

这个文件名将作为资源id被使用。

编译资源数据类型:

ValueAnimator, ObjectAnimator, AnimatorSet

资源引用:

In Java:R.animator.filename
In XML:@[package:]animator/filename

示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<set
android:ordering=["together" | "sequentially"]>
<objectAnimator
android:propertyName="string"
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<set>
...
</set>
</set>

文件必须有一个唯一的根元素:set,objectAnmiator,valueAnimator三者中的一个。可以在set标签内部将动画元素组合在一起,包括其他的set元素。

元素:
  • set:保存其他动画元素的容器(objectAnimator,valueAnimator,set).

    您可以指定嵌套的set标签以进一步将动画分组在一起。每个set标签可以定义自己的属性顺序。

    属性:

    android:ordering

    关键词,指定集合中动画的播放顺序。

Value Description
sequentially 按顺序播放
together (default) 同时播放
  • objectAnimator:在特定时间内动画对象的特定属性。

    属性:

    android:propertyName

    String类型,必须属性。通过名称引用对象的属性动画,例如你可以为一个view对象指定”alpha”或“backgroundColor”.然而,objectAnimator元素不会暴露目标属性,因此无法在XML声明中将对象设置为动画。为了设置包含此属性的目标对象,必须通过调用loadAnimator()和setTarget()方法使用定义的xml动画资源。

    android:valueTo

    float, int,color类型,必须属性。动画属性结束的值,颜色表示为6为16进制数字(#333333)。

    android:valueFrom

    float, int,color类型。动画属性开始的值。 如果未指定,动画将从属性的get方法获取的值开始。 颜色表示为六位十六进制数字(#333333)。

    android:duration

    int类型。动画的时间(以毫秒为单位)。 默认为300毫秒。

    android:startOffset

    int类型,调用start()方法后动画的延迟毫秒数。

    android:repeatCount

    int类型。动画的重复次数。设置为“-1”,进行无限重复,或到一个正整数为止。例如,值为“1”表示动画在初始化运行后再重复一次,也就是动画总共执行了两次。默认值为“0”,表示不重复。

    android:repeatMode

    int类型。动画从开始到结束的形式。android:repeatCount必须设置为正整数或“-1”,此属性才有效果。设置为“反向”以使动画与每次迭代的方向相反,或者“重复”使动画从开始每次循环。

    android:valueType

    关键词。如果值是颜色,请不要指定此属性。 动画框架自动处理颜色值。

Value Description
intType 指定动画值为整数
floatType (default) 指定动画值为float
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<set android:ordering="sequentially">
<set>
<objectAnimator
android:propertyName="x"
android:duration="500"
android:valueTo="400"
android:valueType="intType"/>
<objectAnimator
android:propertyName="y"
android:duration="500"
android:valueTo="300"
android:valueType="intType"/>
</set>
<objectAnimator
android:propertyName="alpha"
android:duration="500"
android:valueTo="1f"/>
</set>

为了运行此动画,您必须将代码中的XML资源扩充为AnimatorSet对象,然后在开始动画集之前为所有动画设置目标对象。 为方便起见,调用setTarget()为AnimatorSet的所有子项设置单个目标对象。 以下代码显示了如何执行此操作:

1
2
3
4
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
R.anim.property_animator);
set.setTarget(myObject);
set.start();

视图动画


视图动画框架支持补间动画和帧动画,它们都可以在XML中声明。 下面介绍如何使用这两种方法。

补间动画

在xml文件中定义用于执行图像的旋转、淡化、位移、和拉伸的动画。

文件位置:

res/anim/filename.xml

文件名称用于资源id

编译资源数据类型:

Resource pointer to an Animation

资源引用:

In Java:R.animator.filename
In XML:@[package:]animator/filename

示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true" | "false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float" />
<set>
...
</set>
</set>

文件必须有一个唯一的根元素,可以是alpha,scale,translate,roate,或者是包含了其他动画元素(甚至嵌套的set元素)的一组(或多组)的set标签。

元素:

set:

包含其他动画元素(alpha,scale,translate,rotate)或其他set元素的容器。 表示AnimationSet。

属性:

android:interpolator

插值器资源。插值器应用于动画。它的值必须是对制定的插值器(不是插值器类名称)的资源的引用。平台提供了默认的插值器资源,或者可以创建自己的插值器资源。

android:shareInterpolator

布尔值。“true”表示在所有的子元素之间共享相同的插值器。

alpha:

淡入淡出动画,表示AlphaAnimation。

属性:

android:fromAlpha

float类型。开始透明度变化,其中0.0表示透明,1.0表示不透明。

android:toAlpha

float类型。结束透明度变化,其中0.0表示透明,1.0表示不透明。

对于alpha的更多属性,参阅Animation类引用。

scale:

调整大小的动画。可以通过pivotX和pivotY来制定图像伸缩的中心点。例如,指定值为0,0(左上角), 所有的变换将会向右和向下。

属性:

android:fromXScale

float类型,变换的x坐标起始值,1.0表示未改变。

android:toXScale

float类型,变换的x坐标结束值,1.0表示为改变。

android:fromYScale

float类型,变换的y坐标起始值,1.0表示为改变。

android:toYScale

float类型,变换的y坐标结束值,1.0表示为改变。

android:pivotX

float类型,在缩放时固定不变的x坐标。

android:pivotY

float类型,在缩放时固定不变的y坐标。

translate:

垂直或水平的运动。支持以下三种格式的属性:

值以“%”结尾的-100到100,表示相对于自身的百分比;

值以“%p”结尾的-100到100,表示相对于其父代的百分比;

没有后缀的浮点值,表示绝对值。

属性:

android:fromXDelta

float或百分比。x坐标起始值,表示:相对于正常位置(例如“5”)的像素,相对于元素宽度(例如“5%”)的百分比,或相对于父宽度的百分比(例如“5%p” )。

android:toXDelta

float或百分比。x坐标结束值,表示:相对于正常位置(例如“5”)的像素,相对于元素宽度(例如“5%”)的百分比,或相对于父宽度的百分比(例如“5%p” )。

android:fromXDelta

float或百分比。y坐标起始值,表示:相对于正常位置(例如“5”)的像素,相对于元素宽度(例如“5%”)的百分比,或相对于父宽度的百分比(例如“5%p” )。

android:toXDelta

float或百分比。y坐标结束值,表示:相对于正常位置(例如“5”)的像素,相对于元素宽度(例如“5%”)的百分比,或相对于父宽度的百分比(例如“5%p” )。

rotate:

旋转动画。

属性:

android:fromDegrees

float,起始角度位置,以度为单位。

android:toDegrees

float,结束角度位置,以度为单位。

android:pivotX

浮动或百分比。 旋转中心的X坐标。 表示为:相对于对象左边缘的像素(例如“5”),相对于对象左边缘的百分比(例如“5%”)或相对于父容器的左边缘的百分比(例如“ 5%p“)。

android:pivotY

浮动或百分比。 旋转中心的Y坐标。 表示为:相对于对象的顶部边缘(例如“5”)的像素,相对于对象的顶部边缘的百分比(例如“5%”)或相对于父容器的顶部边缘的百分比(例如“ 5%p“)。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<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/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
</set>

下面代码将动画应用于ImageView,并启动动画:

1
2
3
ImageView image = (ImageView) findViewById(R.id.image);
Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
image.startAnimation(hyperspaceJump);

插值器

插值器是定义在xml中的动画修改器,它可以改变动画的效果。它可以使得现有的动画效果加速,减速,重复和反弹等。

插值器通过动画元素的android:interpolator属性被应用,该属性的值是对插值器资源的引用。

在Android中所有可以使用的插值器都是Interpolator的子类。Android系统中提供了一个公共插值器资源,可以为动画的android:interpolator属性引用该资源。下表指定了每个插值器使用的资源:

Interpolator class Resource ID
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator @android:anim/accelerate_interpolato
AnticipateInterpolator @android:anim/anticipate_interpolator
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator
BounceInterpolator @android:anim/bounce_interpolator
CycleInterpolator @android:anim/cycle_interpolator
DecelerateInterpolator @android:anim/decelerate_interpolator
LinearInterpolator @android:anim/linear_interpolator
OvershootInterpolator @android:anim/overshoot_interpolator
1
2
3
<set android:interpolator="@android:anim/accelerate_interpolator">
...
</set>

自定义插值器

如果对于提供的插值器不满意,可以自己创建修改属性的自定义插值器资源。为此,您需要在XML文件中创建自己的插值器资源。

例子:

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
android:attribute_name="value"
/>

如果没有设置任何的属性,则插值器与原有的功能完全相同。

元素:

请注意,每个Interpolator实现在XML中定义时,以小写开头其名称。

accelerateDecelerateInterpolator:

在动画的开始和结束时速度缓慢,动画中间部分速度提高。没有属性。

accelerateInterpolator:

变化开始速度慢,然后开始加速。android:factor :加速度(默认1)float

anticipateInterpolator:

变化开始时向后,然后向前。android:tension :应用的张力(默认值为2)float

anticipateOvershootInterpolator:

变化开始时向后,然后向前并超过目标值,然后稳定在最终值。

  • android:tension :应用的张力(默认值为2)float。
  • android:extraTension : 乘以张力的值(默认1.5)float。

bounceInterpolator:

在变化的结束时反弹。

cycleInterpolator:

指定重复动画的周期数。 变化率遵循正弦模式。android:cycles:重复次数(默认1)Integer

decelerateInterpolator:

变化开始时快速,然后开始减速。android:factor :减速率(默认1)float

linearInterpolator:

恒定的线性变化。

overshootInterpolator:

该变化向前超过最大的值,然后返回。android:tension :张力值(默认值为2)float

例子:res/anim/my_overshoot_interpolator.xml

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:tension="7.0"
/>
1
2
3
4
5
6
7
8
9
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/my_overshoot_interpolator"
android:fromXScale="1.0"
android:toXScale="3.0"
android:fromYScale="1.0"
android:toYScale="3.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="700" />

帧动画

在XML中定义的动画,按顺序显示一系列图像(如电影)。

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource_name"
android:duration="integer" />
</animation-list>

animation-list:

必须的根元素。 包含一个或多个item元素。

  • android:oneshot :布尔值。true表示动画执行一次,false表示循环动画。

item:

单帧动画。 必须是animation-list元素的子元素。

使用:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
1
2
3
4
5
mageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();