上篇我们学习了怎么显示SVG矢量图像,当然还有一个更强大的功能,就是让SVG图像动起来,先上一张效果图吧:

要实现上述动画效果,就得用AnimatedVectorDrawable这个类了,它就是负责VectorDrawable矢量图形的动画的,不过我们不能像属性动画那样去通过代码进行设置动画,而是需要通过animated-vector标签在xml文件中创建一个AnimatedVectorDrawable,那么怎么实现呢?

只需要四步:

第一步:

首先就是要创建一个VectorDrawable,在drawable目录下创建一个heart.xml,并且,我们知道矢量图是通过点和线进行绘制的,而在上篇中我又讲了path中M和Z两个命令,M是绘制的起始点,然后期间通过一系列的画直线、画弧等过程,最后通过Z命令来闭合这个绘制过程,也就是说绘制一个形状时候是从M出发到Z闭合。所以,面对path中混乱的排列,我们需要把M到Z的字符串进行隔开分别创建一个path(也可以合并为一个group,给它设置个name,然后对它进行动画),到时候进行绘制动画的时候,可以保证各个path绘制的时间一致,然后分别设置一个name,和线条的颜色和宽度,所以内容如下:

heart.xml:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path
        android:name="heart1"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M58.3,10.6C51.4,3.6,40,3.7,32,10.5c-1.3-1.1-2.6-2-4.1-2.8l-5.5-3.8c-0.3-0.2-0.6-0.2-1-0.1c-0.3,0.1-0.5,0.4-0.6,0.8l-0.2,1C15,4.9,9.6,6.7,5.7,10.6C-1.8,18.1-2,30,5.4,37.8L31.3,64c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l25.9-26.2C65.9,30.2,65.7,18,58.3,10.6z"
         />
    <path
        android:name="heart2"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M57.2,36.4L32,61.8L6.8,36.4c-1-1-1.8-2.1-2.5-3.3l7.5,3.4c0.4,0.2,0.8,0.3,1.2,0.3c0.4,0,0.8-0.1,1.1-0.2l0.7,6.4c0,0.5,0.4,0.8,0.8,0.9l9.4,1.4c0,0,0.1,0,0.1,0c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.6,0.2-0.9l-4-17.6l13.3,11.9c0.2,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.2,0c0.3-0.1,0.6-0.3,0.7-0.6l3.2-8.9c0.2-0.4,0-0.9-0.4-1.2l-5.3-3.6c0.6-0.5,1.1-1.3,1.1-2.1l0.7-9.1c0-0.3-0.1-0.7-0.4-0.9c-0.3-0.2-0.7-0.2-1-0.1l-3.6,1.5l1.1-0.9c0,0,0,0,0,0c0,0,0,0,0,0c7.2-6.7,17.8-7,24.2-0.6C63.5,18.6,63.7,29.6,57.2,36.4z"
         />

    <path
        android:name="heart3"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M14.3,20.7l1.6,1.9L5.3,26.4l-0.9-9.1L14.3,20.7z"
         />
    <path
        android:name="heart4"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M19.5,18.3l1.5,3.8    l-2,1.2l-2.6-3.1L19.5,18.3z"
         />
    <path
        android:name="heart5"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M17.2,24.3C17.3,24.3,17.3,24.3,17.2,24.3l0.4,0.5L14,34c0,0,0,0,0,0l0,0c-0.1,0.3-0.3,0.5-0.5,0.6c-0.3,0.1-0.6,0.1-0.8,0l-6.8-3.1l7.6-5.9L17.2,24.3z"
        />
    <path
        android:name="heart6"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M22.4,23.5    l9.6,1.2l6.2,4.3l-2.5,6.8L22.2,23.7L22.4,23.5z"
        />
    <path
        android:name="heart7"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M33.8,21.9c0,0.3-0.2,0.6-0.4,0.7c-0.2,0.2-0.5,0.2-0.9,0.2l-9.6-1.2l-0.3-0.7    l3.3-2.8l8.4-3.6L33.8,21.9z"
         />
    <path
        android:name="heart8"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M30.4,11.9l-8.4,7L21,16.5c0,0,0-0.1-0.1-0.1l1.9-9.5c0,0,0.2,0,0.2,0s0,0,0,0l-0.2-0.4L30.4,11.9z"
        />
    <path
        android:name="heart9"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M7.1,12c3.5-3.5,8.2-5.1,13.3-4.5l-1.5,8.8l-4.1,2.4L4.5,15.3C5.3,14.1,6.1,13,7.1,12z"
         />
    <path
        android:name="heart10"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M2.6,19.6l0.8,8.3c0,0.3,0.2,0.6,0.5,0.7c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0,0.2,0,0.3-0.1l2.7-1L3.3,31c0,0,0,0,0,0C1.8,27.4,1.6,23.3,2.6,19.6z"
         />
</vector>

第二步:

我们在drawable目录下新建一个根结点为animated-vector的heart_animator.xml文件,也就是为矢量图像创建一个AnimatedVectorDrawable。(drawable指的是VectorDrawable,而target指的是对名字为name的path或者group进行动画)。其中内容如下:

heart_vector_animator.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/heart">
    <target
        android:name="heart1"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart2"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart3"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart4"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart5"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart6"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart7"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart8"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart9"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart10"
        android:animation="@animator/heart_animator" />
</animated-vector>

第三步:

就是在animator目录下创建一个objectAnimator 动画,然后在第二步中分别设置给各个target。属性trimPathEnd的值是由0~1的,所以,path绘制时候也会表现出对应的动画,内容如下:

heart_animator.xml:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="6000"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType" />

【注】:trimPathEnd这个属性是path的(表示绘制由开始点到绘制结束点),与之类似的还有trimPathStart(表示绘制由结束点后退到开始点),看下效果就明白了:

我现在设置trimPathStart的值由0~1,则效果变为:



可以看到动画是慢慢回退到起始点的。

第四步:

最后一步,我们已经把矢量图像和对应的动画都设置好了,此时你如果运行则不会有动画效果,所以接下来就是需要我们通过代码把动画开启起来并设置给ImageView显示,代码为:

        ImageView mImageView = (ImageView) findViewById(R.id.imageView);
        AnimatedVectorDrawable mAnimatedVectorDrawable =  (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.heart_vector_animator);//得到对应的AnimatedVectorDrawable对象
        mImageView.setImageDrawable(mAnimatedVectorDrawable);
        if(mAnimatedVectorDrawable!=null){
            mAnimatedVectorDrawable.start();
        }

我们得到AnimatorVectorDrawable对象后,只需要把这个Drawable对象设置给ImageView,然后通过AnimatedVectorDrawable.start()开启动画就可以了。

最后看一下目录结构:

当然也可以通过更改heart中每个path的线条颜色来达到不同的效果,如:

Demo下载

Android使用SVG矢量动画(二)的更多相关文章

  1. Android使用SVG矢量创建很酷的动态效率!

    尊重原创,欢迎转载.转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说.咱们先瞅瞅效果: ...

  2. SVG矢量动画

    一.概述 相较于png.jpg等位图通过存储像素点来记录图像,svg (Scalable Vector Graphics)拥有一套自己的语法,通过描述的形式来记录图形.Android并不直接使用原始的 ...

  3. Android 使用 SVG 矢量图

    android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...

  4. Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_207 曾几何时,SVG(Scalable Vector Graphics)矢量动画图被坊间称之为一种被浏览器诅咒的技术,只因为糟糕 ...

  5. Android SVG矢量资源的使用方法

    VectorDrawable 与 SVG Android 5.0(Lollipop, API 21)后,新增了<vector>标签,以VectorDrawable的形式支持SVG类型矢量图 ...

  6. Android中使用SVG矢量图(一)

    SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...

  7. Android 开发 VectorDrawable 矢量图 (二)了解矢量图属性与绘制

    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...

  8. Android中矢量动画

    Android中矢量动画 Android中用<path> 标签来创建SVG,就好比控制着一支画笔,从一点到一点,动一条线. <path> 标签 支持一下属性 M = (Mx, ...

  9. Android 开发 VectorDrawable 矢量图 (三)矢量图动画

    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...

随机推荐

  1. Spark:聚类算法之LDA主题模型算法

    http://blog.csdn.net/pipisorry/article/details/52912179 Spark上实现LDA原理 LDA主题模型算法 [主题模型TopicModel:隐含狄利 ...

  2. 在Mac上搭建React Native开发环境

    概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...

  3. JVM远程DEBUG(JPDA )

    原理 1. JPDA简介 JPDA(Java Platform Debugger Architecture)为Java平台上的调试器定义了一个标准的体系结构.该体系结构包括3个主要组成部分:JVM T ...

  4. [tornado]websocket 最简单demo

    想法 前两天想看看django 长轮询或者是websocket的方案,发现都不太好使. tornado很适合做这个工作,于是找了些资料,参照了做了个最简单demo,以便备用. 具体的概念就不说了,to ...

  5. 通过JNDI从服务器容器中获取资源_Spring JNDI+Mysql+Tomcat

    通过JNDI从服务器容器中获取DataSource资源 (由容器管理,不要关闭它,容器自己会处理)上一篇我们使用的是dbcp,这里使用JNDI: 使用JNDI连接数据: 在Spring可以注释 < ...

  6. ScrollView的阻尼回弹效果实现(仿qq空间)

    玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...

  7. iOS注册远程推送消息证书后提示此证书签发者无效的解决办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在编写关于远程推送消息的App时需要注册一个相关的证书,我 ...

  8. Dynamics CRM2013/2015 插件注册工具登录后无法显示assembly列表问题的解决办法二

    本篇接前面的一篇博文:http://blog.csdn.net/vic0228/article/details/47079717,前篇提供了一种解决方案,将本机系统的语言切换成英文即可,今天再来介绍第 ...

  9. ubuntu和mac OS X下另一种使用QQ的方法

    在ubuntu可以到pidgin官网下载http://www.pidgin.im,然后再安装插件 pidgin-lwqq即可,步骤为: sudo add-apt-repository ppa:lain ...

  10. 单幅图像的深度学习,对NYU数据集进行划分

    针对分割问题,官方已经划分好了:http://cs.nyu.edu/~silberman/projects/indoor_scene_seg_sup.html import numpy as np i ...