Android使用SVG矢量动画(二)
上篇我们学习了怎么显示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矢量动画(二)的更多相关文章
- Android使用SVG矢量创建很酷的动态效率!
尊重原创,欢迎转载.转载请注明: FROM GA_studio http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说.咱们先瞅瞅效果: ...
- SVG矢量动画
一.概述 相较于png.jpg等位图通过存储像素点来记录图像,svg (Scalable Vector Graphics)拥有一套自己的语法,通过描述的形式来记录图形.Android并不直接使用原始的 ...
- Android 使用 SVG 矢量图
android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...
- Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_207 曾几何时,SVG(Scalable Vector Graphics)矢量动画图被坊间称之为一种被浏览器诅咒的技术,只因为糟糕 ...
- Android SVG矢量资源的使用方法
VectorDrawable 与 SVG Android 5.0(Lollipop, API 21)后,新增了<vector>标签,以VectorDrawable的形式支持SVG类型矢量图 ...
- Android中使用SVG矢量图(一)
SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...
- Android 开发 VectorDrawable 矢量图 (二)了解矢量图属性与绘制
VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...
- Android中矢量动画
Android中矢量动画 Android中用<path> 标签来创建SVG,就好比控制着一支画笔,从一点到一点,动一条线. <path> 标签 支持一下属性 M = (Mx, ...
- Android 开发 VectorDrawable 矢量图 (三)矢量图动画
VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...
随机推荐
- 关于在arm裸板编程时使用printf问题的解决方法
在ARM裸板驱动编程中,是不允许程序直接调用C库程序的.为什么呢?因为此时kernel还没有被加载,所以在封装在kernel层的C库的API是用不了的,那怎么办? 在开发过程中,printf的功能我不 ...
- 凸函数与Jensen不等式
这个是在凸优化里面看的,在EM算法中看有用到,所以用latex写了篇回忆用的小短文,现在不会把latex产生的pdf怎么转变成放到这里的内容. 所以我选择直接贴图. 这个pdf可以在我的资源里找到. ...
- EXT JS认识EXTJS,第一个EXTJS例子
大部分内容转载自:http://blog.csdn.net/wanghuan203/article/details/8011112 和http://www.cnblogs.com/willick/p/ ...
- 关于查找iOS中App路径时所要注意的一个问题
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...
- Git 解决一个电脑多用户情况(win7)
首先:在输入ssh-keygen -t rsa -C "注册邮箱"后不要急着按enter,此时输入秘钥对的文件名,不要跟默认文件重名(默认的是id_rsa) 划红线的地方就是新的文 ...
- 剑指Offer——迅雷笔试题+知识点总结
剑指Offer--迅雷笔试题+知识点总结 情景回顾 时间:2016.9.19 19:00-21:00 地点:山东省网络环境智能计算技术重点实验室 事件:迅雷笔试 总体来说,迅雷笔试内容体量不算多,主要 ...
- 18 Ui美化 剪切动画clip
输入0 - 10000 让图片根据数值显示部分图片 在工程文件的res/drawable/新建clip文件 <?xml version="1.0" encoding=&quo ...
- Dynamics CRM 后台通过组织服务获取时间字段值的准确转换
做CRM开发的都知道,在系统时间字段的处理上是有讲究的,因为数据库中存的是UTC时间,CRM的界面时间字段会根据个人设置中的时区以及格式自动调整,这是最基本的一面,那还有很多使用时间的场景,比如脚本使 ...
- Qt应用程序中设置字体
Qt应用程序中设置字体 应用程序中经常需要设置字体,例如office软件或者是其他的编辑器软件等等.这里主要涉及到如下几个概念:字体,字号以及风格(例如:粗体,斜体,下划线等等).Qt里面也有对应的类 ...
- python进行md5加密
代码函数 import hashlib def md5(str): m = hashlib.md5() m.update(str) return m.hexdigest() f = open('idf ...