为可绘制图形添加动画效果

试用 Compose 方式
Jetpack Compose 是推荐在 Android 设备上使用的界面工具包。了解如何在 Compose 中使用动画。
<ph type="x-smartling-placeholder"></ph> 为矢量可绘制对象添加动画效果 →
图 1. 带动画的可绘制对象。

在某些情况下,图片需要添加动画效果。如果您希望 自定义加载动画,或者您希望图标在用户 操作。Android 提供了两种为可绘制对象添加动画效果的选项。

第一个选项是使用 AnimationDrawable。本次 您可以指定多个 可绘制对象文件,每次显示一个文件, 创建动画。第二种方法是使用 AnimatedVectorDrawable:用于为属性添加动画效果 矢量可绘制对象的图形。

使用 AnimationDrawable

创建动画的一种方式是加载一系列可绘制资源,例如一卷影片。 AnimationDrawable 是这些类型的可绘制动画的基础。

您可以使用 AnimationDrawable 在代码中定义动画的帧。 但使用单个 XML 文件(列出 组成动画此类动画的 XML 文件属于 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() 使其播放。以下是一个将动画添加到 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();
      }
  });
}

请务必注意,对start() 无法在调用 onCreate() 方法期间调用 AnimationDrawable Activity,因为 AnimationDrawable 尚未完全附加到 窗口。要立即播放动画而不需要互动,您可以从 onStart()Activity 中调用该方法,当 Android 使视图在屏幕上可见时调用。

如需详细了解 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>

动画定义代表 ObjectAnimatorAnimatorSet 对象。通过 在此示例中,第一个 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 如下:

<ph type="x-smartling-placeholder">
图 2.AnimatedVectorDrawable

动画形式的矢量可绘制对象 (AVD) 预览

借助 Android Studio 中的 Animated Vector Drawable 工具,您可以预览动画 可绘制资源此工具可帮助您预览<animation-list><animated-vector><animated-selector> 中的资源 Android Studio,并可让您更轻松地优化自定义动画。

用户在 Android Studio 中预览和播放动画
图 3. Android Studio 中的动画矢量可绘制对象工具。

有关详情,请参阅 AnimatedVectorDrawable