Android自定义控件Android开发经验谈Android开发

VectorDrawable 动画

2017-12-14  本文已影响33人  小吉快跑呀

资源索引
svg转xml的工具

安卓的Lollipop -> VectorDrawable

SVG pathData 的简单理解

矢量图的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设置的动画

上一篇下一篇

猜你喜欢

热点阅读