VectorDrawable 动画
2017-12-14 本文已影响33人
小吉快跑呀
资源索引
svg转xml的工具
安卓的Lollipop -> VectorDrawable
SVG pathData 的简单理解
- M = moveto(M X,Y) :将画笔移动到指定的坐标位置
- L = lineto(L X,Y) :画直线到指定的坐标位置
- H = horizontal lineto(H X):画水平线到指定的X坐标位置
- V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
- C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
- S = smooth curveto(S X2,Y2,ENDX,ENDY)
- Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
- T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
- A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
- Z = closepath():关闭路径
矢量图的XML定义
<vector //定义矢量图
android:name="test" //定义该drawable的名字
android:width="300dp" //矢量图宽度
android:height="96dp" //矢量图高度
android:viewportWidth="150" //将具体的宽度划分成相对的单位单元。300dp被分割成了150个单元单位。
android:viewportHeight="48" //将具体的高度划分成相对的单元单位。96dp被分割成48个单元单位。/>
<path //绘制路径
android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围,取值范围从 0 到1
android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限 />
<group
android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。/>
<clip-path=>//定义当前绘制的剪切路径。注意,clip-path 只对当前的 group 和子 group 有效
android:name 定义 clip path 的名字
android:pathData 和 android:pathData 的取值一样。/>
Animator动画的定义
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd" //对某个属性进行变化 可以对pathData , 颜色等属性进行变化
android:valueType="pathType"
android:valueFrom="0"
android:valueTo="1"
android:duration="5000"
android:interpolator="@android:interpolator/linear">
</objectAnimator>
AnimatedVectorDrawable的XML定义
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/your_vector_drawable">
<target
android:animation="@animator/your_anim1"
android:name="group_in_your_drawable1">
</target>
<target
android:animation="@animator/your_anim2"
android:name="group_in_your_drawable2">
</target>
</animated-vector>
将AnimatedVectorDrawable传给Imageview等控件.
再获取里面的Drawable转成AnimationDrawable.调用start函数即可播放上面为每一个target设置的动画