![](https://developer.android.google.cn/static/training/animation/videos/drawable-animation.gif?authuser=5&hl=nl)
在某些情况下,图片需要添加动画效果。如果您想显示由多张图片组成的自定义加载动画,或者希望图标在用户执行操作后变形,此方法会非常有用。Android 提供了两种为可绘制对象添加动画效果的选项。
第一个选项是使用 AnimationDrawable
。这样,您就可以指定多个静态可绘制文件,一次显示一个文件,从而创建动画。第二个选项是使用 AnimatedVectorDrawable
,它可让您为矢量可绘制对象的属性添加动画效果。
使用 AnimationDrawable
制作动画的一种方式是加载一系列可绘制资源,例如一卷电影。AnimationDrawable
类是这些类型的可绘制动画的基础。
您可以使用 AnimationDrawable
类 API 在代码中定义动画的帧,但使用单个 XML 文件(列出组成动画的帧)来定义它们会更加简单。此类动画的 XML 文件位于 Android 项目的 res/drawable/
目录中。在本例中,说明指定了动画中每一帧的顺序和时长。
XML 文件包含一个 <animation-list>
元素(作为根节点)和一系列子 <item>
节点(每个节点都定义一个帧,可绘制资源及其时长)。以下是 Drawable
动画的 XML 文件示例:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <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>
此动画持续三帧。将列表的 android:oneshot
属性设置为 true
会使列表循环一次,然后停止并按住最后一帧。如果将 android:oneshot
设置为 false
,则动画会循环播放。
如果您在项目的 res/drawable/
目录中将此 XML 另存为 rocket_thrust.xml
,则可以将其作为背景图片添加到 View
,然后调用 start()
使其播放。以下 activity 示例将动画添加到 ImageView
,然后在用户轻触屏幕时为其添加动画效果:
Kotlin
private lateinit var rocketAnimation: AnimationDrawable override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main) val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply { setBackgroundResource(R.drawable.rocket_thrust) rocketAnimation = background as AnimationDrawable } rocketImage.setOnClickListener({ rocketAnimation.start() }) }
Java
AnimationDrawable rocketAnimation; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); rocketImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { rocketAnimation.start(); } }); }
请务必注意,对 AnimationDrawable
调用的 start()
方法无法在 Activity
的 onCreate()
方法执行期间调用,因为 AnimationDrawable
尚未完全附加到窗口。如需立即播放动画,而无需互动,您可以通过 Activity
中的
方法(当 Android 使视图在屏幕上可见时调用)调用该方法。onStart()
如需详细了解 XML 语法以及可用的标记和属性,请参阅动画资源。
使用 AnimatedVectorDrawable
矢量可绘制对象是一种无需像素化或模糊不清即可缩放的可绘制对象。借助 AnimatedVectorDrawable
类和用于实现向后兼容性的
AnimatedVectorDrawableCompat
,您可以为矢量可绘制对象的属性添加动画效果,例如旋转或更改路径数据以将其变形为其他图片。
您通常在三个 XML 文件中定义带动画的矢量可绘制对象:
- 一个矢量可绘制对象,其中
<vector>
元素位于res/drawable/
中。 - 一个带动画的矢量可绘制对象,其
<animated-vector>
位于res/drawable/
中。 - 一个或多个对象 Animator,其
<objectAnimator>
元素位于res/animator/
中。
添加动画效果之后的矢量可绘制对象可以为 <group>
和 <path>
元素的属性添加动画效果。<group>
元素定义一组路径或子组,<path>
元素定义要绘制的路径。
定义要添加动画效果的矢量可绘制对象时,请使用 android:name
属性为各组和路径分配一个唯一名称,以便从 Animator 定义中引用它们。例如:
res/drawable/vectordrawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
添加动画效果之后的矢量可绘制对象定义会按名称引用矢量可绘制对象中的各个组和路径:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@animator/rotation" /> <target android:name="v" android:animation="@animator/path_morph" /> </animated-vector>
动画定义表示 ObjectAnimator
或 AnimatorSet
对象。此示例中的第一个 Animator 会将目标组旋转 360 度:
res/animator/rotation.xml
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
此示例中的第二个动画将矢量可绘制对象的路径从一种形状变形到另一种形状。这些路径必须兼容变形,即:这些路径必须具有相同数量的命令,并且每个命令都有相同数量的参数。
res/animator/path_morph.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType" /> </set>
生成的 AnimatedVectorDrawable
如下:
AnimatedVectorDrawable
。动画形式的矢量可绘制对象 (AVD) 预览
借助 Android Studio 中的动画矢量可绘制对象工具,您可以预览带有动画效果的可绘制资源。此工具可帮助您在 Android Studio 中预览 <animation-list>
、<animated-vector>
和 <animated-selector>
资源,并让您可以更轻松地优化自定义动画。
![用户在 Android Studio 中预览和播放动画](https://developer.android.google.cn/static/studio/images/releases/avd-preview.gif?authuser=5&hl=nl)
如需了解详情,请参阅 AnimatedVectorDrawable
的 API 参考文档。