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 ...
随机推荐
- Spark:聚类算法之LDA主题模型算法
http://blog.csdn.net/pipisorry/article/details/52912179 Spark上实现LDA原理 LDA主题模型算法 [主题模型TopicModel:隐含狄利 ...
- 在Mac上搭建React Native开发环境
概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...
- JVM远程DEBUG(JPDA )
原理 1. JPDA简介 JPDA(Java Platform Debugger Architecture)为Java平台上的调试器定义了一个标准的体系结构.该体系结构包括3个主要组成部分:JVM T ...
- [tornado]websocket 最简单demo
想法 前两天想看看django 长轮询或者是websocket的方案,发现都不太好使. tornado很适合做这个工作,于是找了些资料,参照了做了个最简单demo,以便备用. 具体的概念就不说了,to ...
- 通过JNDI从服务器容器中获取资源_Spring JNDI+Mysql+Tomcat
通过JNDI从服务器容器中获取DataSource资源 (由容器管理,不要关闭它,容器自己会处理)上一篇我们使用的是dbcp,这里使用JNDI: 使用JNDI连接数据: 在Spring可以注释 < ...
- ScrollView的阻尼回弹效果实现(仿qq空间)
玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效 ...
- iOS注册远程推送消息证书后提示此证书签发者无效的解决办法
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在编写关于远程推送消息的App时需要注册一个相关的证书,我 ...
- Dynamics CRM2013/2015 插件注册工具登录后无法显示assembly列表问题的解决办法二
本篇接前面的一篇博文:http://blog.csdn.net/vic0228/article/details/47079717,前篇提供了一种解决方案,将本机系统的语言切换成英文即可,今天再来介绍第 ...
- ubuntu和mac OS X下另一种使用QQ的方法
在ubuntu可以到pidgin官网下载http://www.pidgin.im,然后再安装插件 pidgin-lwqq即可,步骤为: sudo add-apt-repository ppa:lain ...
- 单幅图像的深度学习,对NYU数据集进行划分
针对分割问题,官方已经划分好了:http://cs.nyu.edu/~silberman/projects/indoor_scene_seg_sup.html import numpy as np i ...