android VectorDrawable使用笔记(三)

(3)矢量图VectorDrawable实现搜索框与轨迹动画

适当增大原来设置的矩形方框,为了更好地显示效果

创建新的动画anim_square

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

<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="5000"
android:interpolator="@androiwd:interpolator/overshoot"
android:propertyName="fillColor"
android:valueFrom="@android:color/holo_red_dark"
android:valueTo="@android:color/holo_dark_gray"
android:valueType="intType">

</objectAnimator>

//每次使用的propertyName只有一个,指定一种属性的变化

同样,动画的生效方式是创建一个动画矢量图粘合剂来绑定对应的动画属性= =

这样一来渐变的效果就完成了= =

搜索框的实现

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="150dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="150">
<path
android:name="search"
android:pathData="M141,17 A9,9 0 1,1 1 142,16 L149,23"
android:strokeAlpha="0.8"
android:strokeColor="#000000"
android:strokeLineCap="round"
android:strokeWidth="2"/>
<path
android:name="bar"
android:pathData="M0,23 L149,23"
android:strokeAlpha="0.8"
android:strokeLineCap="square"
android:strokeWidth="2"/>

</vector

创建两个属性动画文件

放大镜从无到有(横线反之)

这里的实现属性为property="trimPathStart"

valueFrom="1" valueTo="0"//value的值的意思是截取(trim)的比例

这里需要实现的效果为放大镜从无到有,下划线从有到无

也就是说

创建动画向量图粘合剂,设置两个部件的动画效果

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="500"
android:viewportWidth="500"
<group
android:scaleX="5.0"
android:scaleY="5.0">
<path
android:name="star"
android:pathData="M 50.0,90.0 L82.919"
android:strokeColor="..."
android:strokeWidth="..."/>
</group>

</vector>

类似一个星状的网状图,如果使用以上的动画效果的时候,可以展现很优美的绘制路径的效果

小结:因为矢量图的设置过程中需要进行相应的路径绘制的工作,所以可以通过按照百分比截取的方式可以模拟演示图形的绘制过程

如果需要引入多个属性动画同时起作用的情况,需要将之前的ObjectAnimator和新的ObjectAnimator一同添加到set中即可

这里并没有说明这里的复杂路径是怎么得到的,姑且认为是一个伏笔= =,后面等他填坑