Android中矢量动画

Android中矢量动画

Android中用<path> 标签来创建SVG，就好比控制着一支画笔，从一点到一点，动一条线。

<path> 标签 支持一下属性
M = (Mx, y) 移动到x,y，并不会划线
L (Lx, y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
Z，没有参数，连接起点和终点
C=(Cx1, y1, x2, y2, x, y)，控制点x1,y1 x2,y2，终点x,y
Q=(Qx1, y1, x, y)，控制点x1,y1，终点x,y
A(Arx, ry, rotation, flag1, flag2, x, y) 弧线在（椭圆）
rx,ry 椭圆的半轴
rotation：值得是椭圆的X轴与水平方向顺时针的夹角
flag1: z只有两个值1 和0 1表示大脚弧线，0表示小角弧线
flag2:1和0 表示顺时针和逆时针
X,y 终点坐标

表示不是很理解

drawable下建xml文件

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="100.0"
android:viewportHeight="100.0">
<group android:name="test1"
android:rotation="0">
<path
android:strokeWidth="2"
android:strokeColor="#77ff33"
android:pathData="M25,25 L25,50 L50, 50,L50,25z"
/>
</group>
</vector>

其中的width，height，viewportWidth, viewportHeight 分别表示不同的含义，width和height表示的是矢量图的真实大小

viewportWidth和viewportheight表示的是矢量图的划分比例，后面path中的使用的参数就是根据这两个值进行转化的。
比如上面的code，就200 划分了100份，那么其中的L50,50 表示的就是整个矢量图的正中间，所以width，height和viewportWidth, viewportHeight的比列一定要保持一致，否则就会变形。

画出了矢量图，肯定少不了动画；

属性动画中有个ObjectAnimator用于实现动画效果，在这里同样适用

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360"/>

propertyName 用来填写属性

动画定义好了，矢量图也有了，那怎么样把他们整合到一块呢，我觉得应该也可以类似属性动画一样，将矢量图制定给ImageView，然后在给ImageView制定动画。
当然还有另外的方法更强大，利用animated-vector 把矢量图和动画整合到一起
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector1">
<target
android:name="test1"
android:animation="@animator/obhectanimotr1"
/>
</animated-vector>

 

 

http://www.open-open.com/lib/view/open1467861100069.html 和 http://blog.csdn.net/xu_fu/article/details/44004841 这个博客很不错

在上面的博客的例子中会有用到propertyName 中trimPathStart，这个属性的意思是按照0到1的百分比绘制图形的路径，trimPathEnd同理