SVG与VectorDrawable

VectorDrawable是通过代码的形式构造 svg 矢量图;

SVG Path 规则简介:

M = moveto 起点(x,y)
L = lineto 移动到(x,y)
H = horizontal lineto 水平移动到(x)
V = vertical lineto 垂直移动到(y)
C = curveto 三次贝塞尔曲线(x1,y1,x2,y2,x,y) (x1,y1)(x2,y2)是开始和结束的控制点
S = smooth curveto 三次贝塞尔曲线(x2,y2,x,y) (x2,y2)是结束的控制点, 第一个控制点默认是前一个C或S的第二个控制点的反向, 前一个不是C或S, 则第一个控制点与当前点重合
Q = 二次贝塞尔曲线(x1,y1,x,y) 控制点(x1,y1)
T = 二次贝塞尔曲线(x,y) 控制点为上一个Q的反向延长一个不是C或S, 则控制点与当前点重合
A = 椭圆曲线(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 代表x,y轴半径; x-axis-rotation 代表椭圆X轴顺时针旋转夹角;
large-arc-flag 值为0或1, 0小弧, 1 大弧
sweep-flag 0 逆时针, 1 顺时针
Z = closepath


 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:height="64dp"
     android:width="64dp"
     android:viewportHeight="600"
     android:viewportWidth="600" >
     <group
         android:name="rotationGroup"
         android:pivotX="300.0"
         android:pivotY="300.0"
         android:rotation="45.0" >
         <path
             android:name="v"
             android:fillColor="#000000"
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

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

android:height="64dp"

android:width="64dp"

android:viewportHeight="600"

android:viewportWidth="600" >

<group

android:name="rotationGroup"

android:pivotX="300.0"

android:pivotY="300.0"

android:rotation="45.0" >

<path

android:name="v"

android:fillColor="#000000"

android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

</group>

</vector>

< path> 里的一些属性
android:strokeColor
android:strokeWidth
android:strokeAlpha

大写字母代表绝对坐标, 小写字母代表相对坐标;

AnimatedVectorDrawable

使用 VectorDrawable 的动画, 该动画需要一个 VectorDrawable 文件, 一个 animated-vector 文件, 若干个 objectAnimator 文件


 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vectordrawable" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="v"
         android:animation="@anim/path_morph" />
 </animated-vector>

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

android:drawable="@drawable/vectordrawable" >

<target

android:name="rotationGroup"

android:animation="@anim/rotation" />

<target

android:name="v"

android:animation="@anim/path_morph" />

</animated-vector>

动画 xml 文件

rotation.xml
<objectAnimator
     android:duration="6000"
     android:propertyName="rotation"
     android:valueFrom="0"
     android:valueTo="360" />

path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
     <objectAnimator
         android:duration="3000"
         android:propertyName="pathData"
         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
         android:valueType="pathType"/>
 </set>

rotation.xml

<objectAnimator

android:duration="6000"

android:propertyName="rotation"

android:valueFrom="0"

android:valueTo="360" />

path_morph.xml

<objectAnimator

android:duration="3000"

android:propertyName="pathData"

android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"

android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"

android:valueType="pathType"/>

</set>

android:valueFrom 和 android:valueTo 里的点数要相同;

参考

https://www.w3.org/TR/SVG/paths.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html

冷水

SVG与VectorDrawable

AnimatedVectorDrawable

相关文章

0 Comments

Leave a Reply Cancel reply