矢量图动画

   前面我们介绍了Android中的矢量图的显示，和矢量图中的语法。接下来我们来一块学习一下Android中的矢量图动画。

   

   接下来我们学习一下用矢量图动画实现一下这个效果。从一个×号动态的变成一个√号。

首先在资源文件中创建一个animator的文件夹。用xml定义一个从×到√的属性动画

[AppleScript] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="@android:integer/config_longAnimTime"
        android:propertyName="pathData"
        android:valueFrom="M24,0 l 0,48 M0,24 l 48,0"
        android:valueTo="M9,36 l 20,0 M27,36 l 0,-36"
        android:valueType="pathType" />
</set>

和一个旋转属性动画

[AppleScript] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="@android:integer/config_longAnimTime"
        android:propertyName="rotation"
        android:valueFrom="45"
        android:valueTo="405"/>
</set>

然后，创建矢量图的drawable资源。

[AppleScript] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_cross">
    <target
        android:name="cross"
        android:animation="@animator/check_animation"/>
    <target
        android:name="rotateContainer"
        android:animation="@animator/rotate_check_animation" />
</animated-vector>

在代码中将这个矢量图的drawable资源，转换成AnimatedVectorDrawable并设置给ImageView

[AppleScript] 纯文本查看 复制代码

mAnimatedDrawable = (AnimatedVectorDrawable) getResources()
                .getDrawable(R.drawable.animated_check);
        imageView.setImageDrawable(mAnimatedDrawable);

最后，当击按钮时触发动画：

[AppleScript] 纯文本查看 复制代码

 mAnimatedDrawable.start();

大功告成，一个从×到√旋转的动画就这么实现了。是不是很简单。

源码如下：

游客，如果您要查看本帖隐藏内容请回复

多谢分享

xuexi yixia

学习学习了

6666666666

666666666666666

学习一下，增长见识

现在开始学习一项新的技术

现在开始学习一项新的图片格式

最后，当击按钮时触发动画：

66666666666666666666666

哎哟，很不错的说