黑马程序员技术交流社区

标题: 【济南中心】Android矢量图（三）--矢量图动画 [打印本页]

---

作者: 大山哥哥    时间: 2017-1-31 21:18
标题: 【济南中心】Android矢量图（三）--矢量图动画

矢量图动画

   前面我们介绍了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();

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

源码如下：

---

作者: 小虎同学    时间: 2017-2-1 00:18
哎哟，很不错的说

---

作者: yehai    时间: 2017-2-7 13:22
66666666666666666666666

---

作者: lidajun    时间: 2017-2-14 17:42
最后，当击按钮时触发动画：

---

作者: it1234    时间: 2017-2-17 15:49
现在开始学习一项新的图片格式

---

作者: it1234    时间: 2017-2-17 15:50
现在开始学习一项新的技术

---

作者: it1234    时间: 2017-2-17 15:51
学习一下，增长见识

---

作者: it1234    时间: 2017-2-17 15:51
666666666666666

---

作者: Afridoce    时间: 2017-2-21 17:45
6666666666

---

作者: 含沙射影    时间: 2017-7-21 19:34
学习学习了

---

作者: 拓荒者dd    时间: 2017-12-20 16:30
xuexi yixia

---

作者: baby14    时间: 2019-2-23 09:57
多谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2