Android高级动画篇之SVG矢量动画范例

效果视频

Android高级动画篇之SVG矢量动画范例_第1张图片

目录结构

Android高级动画篇之SVG矢量动画范例_第2张图片

SVG常用指令

L :为从当前点绘制到直线给定的点,后面跟着的为x,y坐标

M :为将画笔移动到某一点,但只是移动画笔,并没有绘制过程,所有没有产生绘制动作

A :为绘制一段弧线,允许弧线不闭合

初始化状态

效果图

Android高级动画篇之SVG矢量动画范例_第3张图片

制作静态SVG图型

首先在drawablw目录中建立一个svg_pic.xml文件夹

分别给两条直线名为Path1和Path2



    
        

        
    


动画变换

在res目录下建立一个anim文件,在anim文件建立两个动画变化文件,分别为cross_anim1.xml和cross_anim2.xml
其中的valueFrom与valueTo属性分别对应了变换的起始坐标

cross_anim1.xml



    
    

cross_anim2.xml


    

动画黏合

最好通过animated-vector进行粘合,在drawable目录下创建link_anim.xml文件
drawable绑定svg静态图型的初始状态
target将两条直线的样式与变换进行绑定


    
    

引用


    

 public void anim(View view) {
        ImageView imageView = (ImageView)view;
        Drawable drawable = imageView.getDrawable();
        if (drawable instanceof Animatable){
            ((Animatable)drawable).start();
        }
    }

解决低版本异常问题

在build.gradle文件的defaultConfig中添加如下语句

 vectorDrawables.useSupportLibrary = true

到此这篇关于Android高级动画篇之SVG矢量动画范例的文章就介绍到这了,更多相关Android 矢量动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Android高级动画篇之SVG矢量动画范例)