VectorDrawable – 第四章

原文出处:泡在网上的日子.

前几篇文章中，我们知道了如何创建VectorDrawable以及制作path group的动画，也知道了如何渲染出路径的绘制效果。但是还有更多的动画方式，那就是修改SVG的path数据本身。这篇文章将讲解是如何做到的。

为了修改SVG的path数据，我们需要先了解一点SVG path的格式。这里不会详细的讲解，因为文档可以在这里找到：here。让我看看如何绘制一个简单的正方形：

res/drawable/square.xml

1 2 3 4 5 6 7 8 9 10 11 12

<?xml version= "1.0"  encoding= "utf-8" ?> <vector xmlns:android= "http://schemas.android.com/apk/res/android"      android:viewportWidth= "500"      android:viewportHeight= "500"      android:width= "500px"      android:height= "500px" >        <path android:name= "square"          android:fillColor= "@color/sa_green"          android:pathData= "M100,100 L400,100 L400,400 L100,400 z"  />   </vector>

 大部分代码看起来都很熟悉，不过我们还是来分析下path元素下面的pathData属性。首先记住viewport是500 x 500（像素单位），因此我们的工作将在这个区域中进行。pathData有5个参数（为了便于阅读，我在不同的参数之间用空格分割，但是空格并不是必须的，注意逗号不是参数分割符）。第一个参数值是M100,100，表示将当前的绘制点移动到100, 100的位置（大写字母M表示我们使用的是绝对坐标，我们可以使用小写字母m来表示相对坐标，这个规则适用于所有参数）。这将当前的位置定位到了正方形绘制区域的左上角。

接下来的三个参数：L400,100 L400,400 L100,400将会绘制一条依次从左上角-右上角-右下角-左下角的线条。同样我们依然使用绝对坐标。

最后一个参数z是将这条线条闭合。总的来说就是，当前的位置是在左下角，闭合意味着从当前位置绘制一条连接起始点的直线。

而填充色绿色,在Android Studio的预览中看起来如下：

 SVG path可以做更多的东西，但是这里一个简单的方形就满足我们的要求了。

下面我们需要像前面几篇文章中那样定义一个简单的AnimatedVectorDrawable来将属性动画（Animator）赋予这个path元素：

res/drawable/animated_square.xml

1 2 3 4 5 6 7

<?xml version= "1.0"  encoding= "utf-8" ?> <animated-vector xmlns:android= "http://schemas.android.com/apk/res/android"       android:drawable= "@drawable/square" >      <target          android:animation= "@animator/to_triangle"          android:name= "square"  /> </animated-vector>

 现在到了关键部分-Animator自身。我们要实现将正方形向三角形动画过度。实现的方法是将开始值和结束值定义成两个不同的path。起始path是正方形（上面已经定义），结束path是三角形。

必须记住起始和结束path的参数个数要相等，同时这些参数的类型要匹配。我们的正方形path是由move命令（M开头表示move）开始，然后是3个line命令，和最后的关闭命令组成的，因此三角形也必须符合这个模式。但是三角形只需要三条线，而正方形是四条线，因此我们需要一点技巧。我们将正方形上边的中点作为顶点，并且在这个点绘制两次。

然后设置android:valueType="pathType"，属性动画将按照一定的插值播放动画：

res/animator/to_triangle.xml

1 2 3 4 5 6 7 8 9 10

<?xml version= "1.0"  encoding= "utf-8" ?> <objectAnimator xmlns:android= "http://schemas.android.com/apk/res/android"      android:duration= "1000"      android:interpolator= "@android:interpolator/decelerate_cubic"      android:repeatMode= "reverse"      android:repeatCount= "1"      android:propertyName= "pathData"      android:valueType= "pathType"      android:valueFrom= "M100,100L400,100L400,400L100,400z"      android:valueTo= "M250,100L250,100L400,400L100,400z"  />

别慌，为啥不顺带改变下颜色呢？也很简单，给AnimatedVectorDrawable再增加一个target就是了：

res/drawable/animated_square.xml

1 2 3 4 5 6 7 8 9 10

<?xml version= "1.0"  encoding= "utf-8" ?> <animated-vector xmlns:android= "http://schemas.android.com/apk/res/android"       android:drawable= "@drawable/square" >      <target          android:animation= "@animator/to_triangle"          android:name= "square"  />      <target          android:animation= "@animator/colour"          android:name= "square"  /> </animated-vector>

接下来创建一个ObjectAnimator将颜色从绿色变为黄色：

res/animator/colour.xml

1 2 3 4 5 6 7 8 9 10

?xml version= "1.0"  encoding= "utf-8" ?> <objectAnimator xmlns:android= "http://schemas.android.com/apk/res/android"      android:duration= "1000"      android:propertyName= "fillColor"      android:valueType= "intType"      android:repeatCount= "1"      android:repeatMode= "reverse"      android:interpolator= "@android:interpolator/decelerate_cubic"      android:valueFrom= "@color/sa_green"      android:valueTo= "@color/vivid_yellow"  />

 完美的实现了将绿色正方形动画过度到黄色三角形的动画：

 

值得再次提出的是，除了调用动画的代码外，我们没有使用任何java代码。

到此关于VectorDrawable的总结就完了，我们祈祷VectorDrawable的兼容包尽快出现。

这篇文章的代码在这里可以获得： here。

英文原文： VectorDrawables – Part 4