VectorDrawable 动画

作者: 小吉快跑呀 | 来源:发表于2017-12-14 12:45 被阅读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设置的动画

    相关文章

      网友评论

        本文标题:VectorDrawable 动画

        本文链接:https://www.haomeiwen.com/subject/zmxkwxtx.html