AnimatedVectorDrawable学习以及使用

贺biubiu

发布于 2019-06-11 13:15:07

9400

发布于 2019-06-11 13:15:07

文章被收录于专栏：HLQ_StruggleHLQ_Struggle

前言

上一篇，我们了解了SVG以及静态Vector图像使用，坐标地址如下：

聊聊有关SVG那些事儿

而今天，我们了解一下有关使用动态Vector使用的那点事儿。

PS：主要注意的是，动态Vector图像只能在Api 21以上使用，So，如果想要低版本也使用的话，必须做兼容，否则直接奔溃了~

So，一起来看本文目标。

本文目标

通过举例说明如何使用动态Vector图像以及如何兼容低版本，从而让你不经意间学会使用要领。

实现效果

Come on，baby~

首先，我们生成一个原图，也就是我们的小星星，我们设置宽高按照400等份平分，其次，设置我们中心点坐标为200，也就是正好一半，而动画的执行也就是从图像的中心点进行运动，而具体动画又可以具体到某个Path，也就是说，假设我们的静态Vector图像是由俩个Path组成，我们可以根据设置不同的name去区别对待(设置不同的动画效果)，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="300px"
    android:height="300px"
    android:viewportHeight="400"
    android:viewportWidth="400">

    <group
        android:name="star_group"
        android:pivotX="200" // 由于宽度按照400等比例平分，设置一半大小也就意味着从中心进行动画效果
        android:pivotY="200"
        android:scaleX="1.0"
        android:scaleY="1.0">

        <path
            android:name="star"
            android:fillColor="#FF00FF"
            android:pathData="M 200.30535,69.729172
            C 205.21044,69.729172 236.50709,141.52218 240.4754,144.40532
            C 244.4437,147.28846 322.39411,154.86809 323.90987,159.53312
            C 325.42562,164.19814 266.81761,216.14828 265.30186,220.81331
            C 263.7861,225.47833 280.66544,301.9558 276.69714,304.83894
            C 272.72883,307.72209 205.21044,268.03603 200.30534,268.03603
            C 195.40025,268.03603 127.88185,307.72208 123.91355,304.83894
            C 119.94524,301.9558 136.82459,225.47832 135.30883,220.8133
            C 133.79307,216.14828 75.185066,164.19813 76.700824,159.53311
            C 78.216581,154.86809 156.16699,147.28846 160.13529,144.40532
            C 164.1036,141.52218 195.40025,69.729172 200.30535,69.729172 z" />
    </group>
</vector>

接下来，我们着手实现我们的动画效果。需要在res下创建animator目录。

我们看效果图，可以很清晰的看到，首先动画的轨迹为：

❈

星星 ---> 勺子再由勺子 ---> 星星

❈

也就是切换动画，而这个动画会具有俩个属性：

从A到B，从B到A，动画的执行有个先后顺序；
仔细观察，变换的过程中，会有一点点加速的效果，考虑添加插值器

具体如下：star_shap.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:ordering="sequentially"
    android:shareInterpolator="true">
    <!-- 如果俩个SVG进行动画，则俩个节点需要一致 -->
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="@string/svgStarStr"
        android:valueTo="@string/svgFoodStr"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="@string/svgFoodStr"
        android:valueTo="@string/svgStarStr"
        android:valueType="pathType" />
</set>

接下来，在执行的过程中除了俩个图像的交替，其中还掺杂着俩种动画：

缩放：x，y轴同时进行；
旋转

这里需要注意这俩个动画的执行同样也是有着顺序。

关键代码如下：star_ratate.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <set android:ordering="together">
        <objectAnimator
            android:duration="300"
            android:propertyName="scaleX"
            android:valueFrom="0.0"
            android:valueTo="1.0" />
        <objectAnimator
            android:duration="300"
            android:propertyName="scaleY"
            android:valueFrom="0.0"
            android:valueTo="1.0" />
    </set>
    <objectAnimator
        android:duration="500"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

接下来，我们要为我们的星星添加动画，让它动起来~

底图就是我们的星星，还记得我们一开始添加的name么，一个是给path，一个是group，分别设置即可。

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vd_star">

    <target
        android:name="star_group"
        android:animation="@animator/star_rotate" />

    <target
        android:name="star"
        android:animation="@animator/star_shape" />

</animated-vector>

为ImageView直接设置src即可：

   <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:onClick="getAnim"
        android:src="@drawable/animate_star" />

最后，在MainActivity中进行如下操作：

   public void getAnim(View view){
        ImageView imageView=(ImageView)view;
        Drawable drawable=imageView.getDrawable();
        if(drawable instanceof Animatable){
            ((Animatable)drawable).start();
        }
    }

到此动动小手，点击运行瞅瞅~

还记得我们直接创建animated-vector文件时，提示的警告么？我们先一起来看下：