Android中矢量动画

时间:2021-07-15 12:23:20

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同理