android矢量动画

android矢量动画!

直接来个例子就明白了!(这里我把与动画无关的属性都用…表示)

首先你要有个矢量图
比如这个矢量图xml文件叫”vector1”,文件在res\drawable文件夹中

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    .....
    >
    <group
        android:name="group1"       //这个name是用来为属性动画 标识控制的具体目标的
        android:rotation="0"
        android:scaleX="1"
        android:scaleY="1"
        android:translateX="0"
        android:translateY="0">
        <path   
            android:name="path1"        //这个name是用来为属性动画 标识控制的具体目标的
            android:fillAlpha="1"
            android:fillColor="@color/red"
            android:strokeAlpha="1"
            android:strokeWidth="5"
            android:strokeColor="@color/green"
            android:trimPathEnd="0.1"
            android:trimPathStart="0.5"
            android:pathData="M0,0 L50,0 L100,100 L0,100 z" />
    </group>

</vector>

这上面的除了name属性,其他的都可以用属性动画来控制!

---

既然有了这些可以作为动画的属性,那么我们就来个属性动画吧!

比如这个动画文件叫”objectAnimator1”,注意如果使用的android studio这个文件需要在res\animator文件夹中创建

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"     //持续时间,单位毫秒
    android:repeatMode="reverse"    
    android:repeatCount="infinite"  
    android:interpolator="@android:anim/accelerate_interpolator"    //插值器,系统已经提供了很多,或者自己写个也行
    android:propertyName="xxxx"     //这里只要是上面代码有的属性都可以填写,但注意valueType属性就需要根据而改变了
    android:valueFrom=xxxx"     //变化开始的初始值
    android:valueTo="xxxx"      //变化结束时的值
    android:valueType="colorType|floatType|intType|pathType"/>      //注意如果propertyName选择了"pathData",则valueType必须选择pathType

---

// 有了apple和pen那么就有applePen了!(大雾)

有了矢量图,有了动画,那么组合起来就有矢量动画了!

举个例子:
这个文件放在res\drawable文件夹中,比如名字就叫做”av1”

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector1">   //这个drawable是初始的时候显示的内容
    <target         //一个目标,一个动画,一个target
        android:name="group1"       //这个name必须要和矢量图中的name属性一样,不然作用不到指定的目标上
        android:animation="@animator/objectAnimator1" />    
    <target
        android:name="path1"
        android:animation="@animator/objectAnimator2"/>
</animated-vector>

注意!!!!
1. 如果name指定了group,则objectAnimator中propertyName指定的属性必须是group的属性,不能是path的属性!
2. 如果name指定的是path,则objectAnimator中propertyName指定的属性必须是path的属性,不能是group的属性!

---

最后再把这个带有动画效果的drawable设置到ImageView中去

<ImageView
    android:id="@+id/iv_at_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/av1"/>

但是怎么触发动画呢????

@BindView(R.id.iv_at_1)
ImageView iv_at_1;

Drawable d = iv_at_1.getDrawable(); //直接从ImageView中获取drawable
if (d instanceof Animatable) {  //如果这个drawable是可以Animatable的实现类
    ((Animatable) d).start();   //调用start()就开始播放动画了!!
}

还有很多其他的用法,看大家的思维有多开拓了

---

注意!!!!
- 如果propertyName选择了pathData, 则android:valueFrom=xxxx” android:valueTo=”xxxx” 中需要填入的就是pathData的值
例如:

android:propertyName="pathData"
    android:valueType="pathType"
    android:valueFrom="M50,0 L50,0 L100,100 L0,100 z"
    android:valueTo = "M0,0 L100,0 L50,100 L50,100 z"

其中需要特别注意的是, valueFrom和valueTo中的每个操作符都要一一对应,而且数量一样,不然会抛异常!!!

在使用第三方SVG生成器生成的SVG图片的时候不要复制过来就用了,还要检查下里面的操作符,不然呵呵,有你受的

没有图片不幸福
看看效果: