用svg矢量图实现动画效果
- 内容简介
- 实现步骤
- 第一步 配置环境
- 第二步 绘制矢量图形
- 第三步 编写动画
- 第四步 创建个二合一的drawable
- 第五步 使用这个drawable
- 第六步 开始动画
- 题外话
内容简介
今天带大家利用矢量图形vector来实现动画效果，至于vector怎么写，或者说矢量图要怎么用代码来实现，请查看小弟的上一篇博客http://blog.csdn.net/qq_17583407/article/details/50781667，先看一下效果：
还是那句话，能自己写的咱就尽量不抄哈。。好了，直接上干货。
实现步骤
第一步 配置环境
俗话说，巧妇难为无米之炊，我们也得先导入谷歌的支持包，不然的话只能在5.0以上的机器上用了，这不和扯淡一样么。。，好了，ec的大神们我就不说了，首先添加依赖：
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
compile 'com.android.support:support-vector-drawable:23.2.0'
compile 'com.android.support:animated-vector-drawable:23.2.0'
然后，如果你用的是as2.0，或者更先进的版本请添加
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
如果是１.５的呢，那么请添加
// Gradle Plugin 1.5
android { defaultConfig { generatedDensities = []
} // This is handled for you by the 2.0+ Gradle Plugin
aaptOptions { additionalParameters "--no-version-vectors" }
}
如果是再低版本的呢，请自行更新as然后查看上面的步骤，谢谢
第二步 绘制矢量图形
按照上面的图，我简单画了一个五角星，虽然有点丑，但是个人感觉还是比较传神的。下面来一步一步的画一下：文件名随意，我这里叫avector
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200dp"
android:width="200dp"
android:viewportHeight="400"
android:viewportWidth="400">
<group
android:name="group"
android:pivotX="0"
android:pivotY="0"
>
<path android:name="star"
android:pathData="M 100,100 h 200 l -200 150 100 -250 100 250 z"
android:strokeColor="@color/colorPrimary"
android:strokeLineCap="round"
android:strokeWidth="10"
/>
<path android:name="line"
android:pathData="M 100 260 h 200"
android:strokeColor="@color/colorPrimary"
android:strokeLineCap="round"
android:strokeWidth="5"/>
</group>
</vector>
仔细看会发现我悄悄在五角星下面又添加了一个线，这个是我用来显示group作用的，实验证明group可以用来给组里面的路径进行分组，并统一进行调整，但是添加动画的时候我给group添加动画失败了，不知道为什么，知道的大神可以指点一下小弟。
第三步 编写动画
在res目录下新建一个叫做animator的文件夹，然后在里面写我们的动画，直接上代码：
我这里文件名叫anim_star
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:duration="2000"
android:repeatMode="reverse"
android:repeatCount="-1"
android:interpolator="@android:interpolator/accelerate_decelerate"/>
</set>
第四步 创建个二合一的drawable
这里再在drawable文件夹下创建一个文件，还是直接上代码，文件名target:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/avector">
<target
android:animation="@animator/anim_star"
android:name="star"
/>
</animated-vector>
第五步 使用这个drawable
首先建个imageview，然后给他绑定一个src id，事实上是这样的，但是这里不能这么写，因为毕竟矢量图形矢量动画人家是新来的，待遇肯定也不一样，来看ImageView：
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/target"
/>
就是这个srcCompat,我们要用这个标签给它绑定我们drawable，划红线了？没关系，能照常用的，放心吧。到这还没完，动画动画么，要想动，我们还要手动给他star，这一块其实跟属性动画很像很像了。
第六步 开始动画
我们把没用的代码省略掉，直接看干的：
iv = (ImageView)findviewbyid(R.id.iv);
Drawable drawable = iv.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
题外话
按理来说，这样我们的动画就完成了，这里我看官方demo的时候一直有个疑问，后来知道真相的我简直被自己蠢哭了，是这样的，官方给了一个三角形在运动过程中慢慢变成矩形的一个demo，这是链接地址
http://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
这里，他画了个三角形，我按照他给的点在纸上画了一下，我去，三角形怎么有四个点，这个0,0是什么鬼，原地不动点个点？然而我错了，接着往下看动画部分
原来从一个三角形变成四角形（矩形）显然是不可能的，除非，他原本就是个四角形，只是看着像三角形而已，学习了
用svg矢量图实现动画效果相关推荐
- Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
- Android使用SVG矢量图打造酷炫动效！
一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 如果你想看 GAStudio Github主页,请戳这里: 如果你想看 GAStudio更多技术文章,请戳这里: QQ技术交流群:277 ...
- html+引入svg矢量图,SVG 矢量图的加载
一.什么是 SVG SVG 是可缩放矢量图形,用户可以用代码来直接描绘图像.区别于 JPG 和 PNG 的需要用引擎来加载的图片,它直接用画布绘制,所以是无损失的. 二.SVG 的优点 SVG文件时纯 ...
- android MD之矢量图和动画篇
1 简介 Android 5.0 中增加了对SVG 矢量图形的支持,利用svg我们能做以下东西: 1.炫酷的动画效果 2.Vector图像可以自动进行适配,不失真 3.同样一张图,用Vector来实现 ...
- 自制批量SVG矢量图转普通图片格式小工具
最近在学unity自制一点小游戏,当然我们这种主攻开发的,在学习阶段肯定只能借(tou)美工素材来学习了. 本来拿到了一系列的动画,但是是SVG的矢量图格式的,原生unity对SVG矢量图支持不太好, ...
- SVG矢量图怎么做？
SVG 矢量图是一种可缩放的图像格式,基于 XML 的标记语言.它可以用于描述二维矢量图形,并且具有数百种功能,能够帮助你创建出色的网站.SVG矢量图怎么做?在本教程中,我们将学习如何使用SVG矢量图 ...
- android 矢量图 开源,Android 使用 SVG 矢量图
android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...
- %config InlineBackend.figure_format=svg#矢量图设置
在默认设置的matplotlib中图片分辨率不是很高,可以通过设置矢量图的方式来提高图片显示质量 %config InlineBackend.figure_format='svg'#矢量图设置
- 【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录 一.SVG 矢量图简介 二.Android 中生成 Vector 矢量图资源 三.参考资料 一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
- SVG矢量图中矢量路径的获取
矢量图中矢量路径的获取 首先下载一张svg图片,例如,在阿里矢量图标库中下载 用代码编辑器打开下载的图片 将标签中的d属性复制出来,写成下面的格式 这样就可以拿到矢量图中的路径了! SVG矢量图是无损 ...
最新文章
- socket 中 SOCK_STREAM 和 SOCK_DGRAM的区别？
- #地形剖面图_高中地理——每日讲1题（地形剖面图）
- vue - blog开发学习4
- a*算法路径规划matlab_【优化求解】基于栅格地图——遗传算法的机器人最优路径规划...
- PHP笔记-PHP中Web Service.
- 9-21 调试javaweb 数据库连接感想
- Python dict set
- 「leetcode」941. 有效的山脉数组:【双指针】详解
- 混编Swift类和Objc类
- 实对称矩阵的特征值求法_矩阵论系列——特征值篇
- 【学习笔记-1】- 非线性规划的最优性一阶/二阶必要条件之例题（12道）
- 什么是WebSockets！？
- GIT LFS 原理杂谈
- 如何用C语言将华氏温度转化为摄氏温度
- 【BZOJ】2101: [Usaco2010 Dec]Treasure Chest 藏宝箱（dp）
- java游戏主角用毛笔_Java FX版的毛笔效果
- 【php学习之路】微信公众帐号
- Java面试题大全带答案110道（持续更新）
- 473. 火柴拼正方形
- C语言-假设有一对兔子，出生第二个月变成了一对大兔子，第三个月后变成一对老兔子， 并开始每月出生一对小兔子，依次类推。求15个月内共有多少对兔子？