【Animations】动画可绘制的图形(3)

原文

概要


【Animations】动画可绘制的图形(3)
在某些情况下,图像需要在屏幕上进行动画。如果您想要显示由多个图像组成的自定义加载动画,或者如果您希望一个图标在用户操作后变成另一个图标,这非常有用。Android为绘制动画提供了一些选项。

第一个选项是使用动画可绘制。这使您可以指定几个静态可绘制文件 ,这些文件将一次显示一个来创建动画。第二种选择是使用动画矢量可绘制,它可以让矢量可绘制的属性动画化 。

使用AnimationDrawable


动画的一种方法Drawables是逐个加载一系列可绘制资源来创建动画。这是一个传统的动画,它是由一系列不同的图像创建的,按照顺序播放,就像一卷电影一样。本AnimationDrawable类是可绘制动画的基础。

虽然您可以使用AnimationDrawable类API 在代码中定义动画的框架,但使用列出组成动画的框架的单个XML文件更简单。这种动画的XML文件属于res/drawable/您的Android项目的目录。在这种情况下,指令是动画每帧的顺序和持续时间。

XML文件由一个<animation-list>元素作为根节点和一系列子<item>节点组成,每个子节点定义一个框架:一个可绘制的框架资源和帧持续时间。以下是可绘制动画的示例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,它将循环一次,然后停止并保持最后一帧。如果它设置为false,则动画将循环。通过将此XML保存 rocket_thrust.xml在res/drawable/项目目录中,可以将其作为背景图像添加到View中,然后调用以播放。这里有一个Activity示例,其中动画添加到一个ImageView动画中,然后在触摸屏幕时动画:

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()呼吁方法 AnimationDrawable 不能在过程中可以调用onCreate()您的活动的方法,因为 AnimationDrawable还没有完全贴在车窗。如果您想要立即播放动画而不需要交互,那么您可能需要从onStart() Activity中的方法调用该动画, 当Android使屏幕上的视图可见时,该方法将被调用。

有关XML语法,可用标签和属性的更多信息,请参阅动画资源。

使用AnimatedVectorDrawable


a 矢量绘制 是一种类型的可绘制的是没有得到像素化或模糊可伸缩的。的 AnimatedVectorDrawable 类(和向后兼容),可以动画向量可绘制的属性,如旋转或变更路径数据以将其变形为不同的图像。 AnimatedVectorDrawableCompat

您通常在三个XML文件中定义动画矢量绘图:

扫描二维码关注公众号,回复: 1064107 查看本文章

可以绘制<vector>元素的 矢量res/drawable/
可以用<animated-vector>元素 绘制的动画矢量res/drawable/
一个或多个具有<objectAnimator>元素的 对象动画师res/anim/
动画矢量绘图可以动画<group>和 <path>元素的属性。的<group>元素定义了一组路径或子组,并且<path>元素定义要绘制的路径。

定义要制作动画的矢量绘制时,请使用该android:name 属性为组和路径分配唯一的名称,以便您可以从动画制作工具定义中引用它们。例如:

<!-- 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/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

动画定义代表ObjectAnimator或 AnimatorSet对象。在这个例子中的第一个动画师旋转目标组360度:

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

本示例中的第二个动画师将矢量绘图的路径从一个形状变形到另一个形状。两条路径必须与变体兼容:每条命令必须具有相同数量的命令和相同数量的参数。

<!-- res/anim/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如下:

有关更多信息,请参阅API参考 AnimatedVectorDrawable

Lastest Update:2018.04.23

联系我

QQ:94297366
微信打赏:https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公众号推荐:

【Animations】动画可绘制的图形(3)

猜你喜欢

转载自blog.51cto.com/4789781/2120970