android VectorDrawable使用笔记(二)

(2)使用动态的VectorDrawable

VectorDrawable和IconFont的优势,可以很轻易地使用动画

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="1000"

    android:propertyName="translateX"

    android:repeatCount="infinite"

    android:repeatMode="reverse"

    android:valueFrom="0"

    android:valueTo="10"

    android:valueType="floatType"></objectAnimator>

先创建动画效果,然后创建对应的vectordrawable

使用配置动画粘合剂-animated-vector的方式来使两个连接在一起

E.G

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/XXXX1">
<target
android:name="left"//这里的name是在矢量图中path中定义的name
android:animation="@animator/XXXX2"/>

</animated-vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

        android:width="24dp"

        android:height="24dp"

        android:viewportWidth="24.0"

        android:viewportHeight="24.0">

    <path

        android:name="arrow"

        android:fillColor="#FF000000"

        android:pathData="M2.01,21L23,12 2.01,3 2,10l15,2 -15,2z"/>

</vector>

name如何使用上面这些配置好的动画呢

<ImageView
android:onClick="anim"//设置点击事件为触发动画,这里需要在对应的组件中定义anim方法,如下
android:layout_width="wrap_content"
android:layout_height="wrap_content
app:srcCompat="@animator/arrow_anim"
//调用对应的动态的VectorDrawable
/>

public void anim(View view) {
ImageView imageView = (ImageView)view;
Drawable drawable = imageView.getDrawable();

if(drawable instanceof Animatable) {
((Animatable) drawable).start();
}

}

这时候并不会正常进行显示,translatex和translatey并不包含在path内,这里只需要使用group标签将两者包围起来= =,group为了帮助path图形使用path不含有的属性而实现的,将name属性放到group就能实现相应目的

ps:animator-vector的target可以有多个,也就是说,可以同时对vector中的多个部分进行制定动画操作

这里感觉可以对AOP的思想进行优化

在左右两边添加interpolator动画效果

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="1000"

    android:propertyName="translateX"

    android:interpolator="@android:interpolator/overshoot"//插入器,还可以有很多不同的效果,这里会有一个动画将播放到头的延迟效果

    android:repeatCount="infinite"

    android:repeatMode="reverse"

    android:valueFrom="0"

    android:valueTo="10"

    android:valueType="floatType"></objectAnimator>