Android 矢量图动画（完结篇）
上一篇文章 讲解了如何对矢量图进行转换（scale, rotation, translation），以及讲解了如何对 Path Data 进行图形变换（Morph）。那么今天，我继续完成矢量图动画的最后两个内容，修剪（trim） 和 裁剪（clip），这将作为矢量图动画的完结篇，在这篇文章中，我并不会抠细节，因为细节的问题，我在前2篇文章中已经讲解了，因此如果你看这篇文章比较吃力的话，肯定就是前面基础没打好。
那么本篇要完成的效果如下
获取矢量图
首先从 Android Studio 中获取这个小机器人的矢量图（不知道的看前面的文章），代码如下
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:name="root"android:width="24dp"android:height="24dp"android:viewportHeight="24.0"android:viewportWidth="24.0"><path
android:fillColor="#FF000000"android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>
Trim Path Data
对于修剪（trim），先看看一个比较眼熟的例子
那么，SVG 中对 Path Data 的修剪，在 Android 中是如何做到的呢？ 在上篇文章中我们提到，VectorDrawable 是由 < path > < group > < clip-path > 组成的，而 < path > 对 android:pathData 的修剪属性如下
android:trimPathStart：表示从头开始修剪android:pathData的比例因子，默认为0，也就是不做修剪。android:trimPathEnd：表示从尾开始修剪android:pathData的比例因子，默认为1，也就是不做修剪。android:trimPathOffset：这个属性是影响修剪区域的，默认值当然也为0，范围为0到1，设置这个属性后的修剪区域为 trimPathStart + trimPathOffset 到 trimPathEnd + trimPathEnd。
这么说可能比较抽象，那么我在刚获取的 Android 小机器人背后画一条线
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:name="root"android:width="24dp"android:height="24dp"android:viewportHeight="24.0"android:viewportWidth="24.0"><path
android:trimPathEnd="1"android:name="crossPath"android:pathData="M 0 2 L 22 24"android:strokeColor="#FF000000"android:strokeWidth="1"/><path
android:fillColor="#FF000000"android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>
对比上面的代码，你会发现，我加上了一个 < path >，没错，这个 path 就是小机器人后面那条线，那么怎么控制这条线的长度呢，android:trimPathEnd 可以帮你解决，当然 android:trimPathStart 也可以，只是看想从哪边修剪这个 path。
那么现在我把 android:trimPathEnd 改小一点看看效果
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:name="root"android:width="24dp"android:height="24dp"android:viewportHeight="24.0"android:viewportWidth="24.0"><path
android:trimPathEnd="0.25"android:name="crossPath"android:pathData="M 0 2 L 22 24"android:strokeColor="#FF000000"android:strokeWidth="1"/><path
android:fillColor="#FF000000"android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>
效果不言而喻了把，其他2个修剪属性自己动动手把。
Clip Path Data
先看个比较熟悉的例子
裁剪 Path Data 也就是画出一个区域，在这个区域中的图形显示出来，不在这个区域的就不显示。那么我就再到上面修剪的例子中，裁剪这个小机器人
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:name="root"android:width="24dp"android:height="24dp"android:viewportHeight="24.0"android:viewportWidth="24.0"><clip-path
android:name="maskClipPath"android:pathData="M 0 1 L 23 24 L 24 23 L 1 0 L 24 0 L 24 24 L 0 24 Z"/><path
android:name="crossPath"android:pathData="M 0 2 L 22 24"android:strokeColor="#FF000000"android:strokeWidth="1"/><path
android:fillColor="#FF000000"android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>
效果也是不言而喻吧。那么，问题来了，怎么才能裁剪这么精准呢？ 那当然是用前面文章提到的网站，给大家看下用网站完成的修剪区域
前面例子中，小机器人背后那一条线，也是用网站模拟的。
生成AnimatedVectorDrawable
上面裁剪例子中的图片与效果图中有点差距，是因为没有设置 alpha ，那么现在设置下
my_android_disable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:name="root"android:width="24dp"android:height="24dp"android:alpha="0.3"android:viewportHeight="24.0"android:viewportWidth="24.0"><clip-path
android:name="maskClipPath"android:pathData="M 0 1 L 23 24 L 24 23 L 1 0 L 24 0 L 24 24 L 0 24 Z"/><path
android:name="crossPath"android:pathData="M 0 2 L 22 24"android:strokeColor="#FF000000"android:strokeWidth="1"/><path
android:fillColor="#FF000000"android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>
那么现在我需要一个AnimatedVectorDrawable，让它回到原本小机器人的样子。
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"android:drawable="@drawable/my_android_disable"><target
android:animation="@animator/my_android_alpha_to_1"android:name="root"/><target
android:animation="@animator/my_android_cross_to_disappear"android:name="crossPath"/><target
android:animation="@animator/my_android_clip"android:name="maskClipPath"/></animated-vector>my_android_alpha_to_1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:interpolator="@android:interpolator/fast_out_slow_in"android:propertyName="alpha"android:valueFrom="0.3"android:valueTo="1.0"/>my_android_cross_to_disappear.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:interpolator="@android:interpolator/fast_out_slow_in"android:propertyName="trimPathEnd"android:valueFrom="1"android:valueTo="0"/>
my_android_clip.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:interpolator="@android:interpolator/fast_out_slow_in"android:propertyName="pathData"android:valueFrom="M 0 1 L 23 24 L 24 23 L 1 0 L 24 0 L 24 24 L 0 24 Z"android:valueTo="M 0 1 L 0.333 0.667 L 0.667 0.333 L 1 0 L 24 0 L 24 24 L 0 24 Z"android:valueType="pathType"></objectAnimator>如果你看到这里觉得非常吃力，请看我前面的2篇文章
现在我为一个 ImageView 设置一个 android:src
<ImageViewandroid:id="@+id/android_avd1"android:layout_width="200dp"android:layout_height="200dp"android:layout_centerInParent="true"android:src="@drawable/my_android_disable_to_enable"android:tint="@color/colorPrimary"/>然后，启动动画
imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) finalImageView.getDrawable();drawable.start();}});到一步的话，就恭喜你
那么，制作一个相反的动画的 AnimatedVectorDrawable 应该就小菜一碟吧。
Animated-Selector实现切换动画
现在我们已经知道如何绘制转换的动画了，那么怎么才能实现动画切换呢？ “小弟，我看你骨骼惊奇，是万中无一的练武奇才。维护世界和平的任务就靠你了。我这里有本秘籍，我看与你有缘，免费送你了！”
回归正题，用 Animated-Selector 可以根据不同的状态来调用不同的动画，从而达到切换动画的效果。
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"><item
android:state_activated="true"android:id="@+id/android_enable"android:drawable="@drawable/my_android_enable"/><item
android:id="@+id/android_disable"android:drawable="@drawable/my_android_disable"/><transition
android:drawable="@drawable/my_android_disable_to_enable"android:fromId="@id/android_disable"android:toId="@id/android_enable"/><transition
android:drawable="@drawable/my_android_enable_to_disable"android:fromId="@id/android_enable"android:toId="@id/android_disable"/>
</animated-selector>代码里面所涉及的动画和矢量图，其实在前面已经给出了，就请大家自己动手实现。 最后我们需要切换状态，来显示不同的图片
imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {imageView.setActivated(!finalImageView1.isActivated());}});如果，你到这一步，我只能说，兄弟，你果然是个练武奇才。
结束
本篇文章是 Android 矢量图以及矢量图动画的完结篇，综合前面一片文章，总共讲解了对 Path Data 的转换（transition: scale, rotation, translation） ， 修剪（trim），裁剪（clip）。重点应该都覆盖了，其他细节就给大家自己去探索了。
参考文章
http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0519/2894.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
Android 矢量图动画（完结篇）相关推荐
- android 矢量图动画,Android-Animation-Set
Ⅷ. AnimatedVectorDrawable / 矢量图动画 要想彻底搞明白 Android 中的矢量动画,先理解一下关于 SVG 的相关知识还是很有必要的: 可以点击 SVG 讲解 或 Wik ...
- Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
- Android矢量图动画特效,Android矢量动画实践
之前的文章里,有朋友评论说饿了么的动画是使用AnimatedVectorDrawable来实现的.这个东西虽然原来也知道,但是一直没有切实的使用过.刚好昨天有看到一个蛮帅的矢量动画(文末福利),有了兴 ...
- Android 开发 VectorDrawable 矢量图 （三）矢量图动画
Android 开发 VectorDrawable 矢量图 (三)矢量图动画 简介--矢量动画2种方式与流程 矢量动画有一些不一样的细节,这里需要提前了解,否则容易在后续使用的时候困惑. 1.使用gr ...
- android矢量图之VectorDrawable ，自由又方便的填充色彩
背景 偶然间,在极客学院看到一个视频:VectorDrawable 原理和使用.很惭愧,以前还真没用到,于是,今天就来学习下.2014年6月26日的I/O 2014开发者大会上谷歌正式推出了Andro ...
- android+矢量图+插件,如何玩转Android矢量图VectorDrawable
从5.0(api等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大 ...
- android 颜色填充工具,Android矢量图之VectorDrawable类自由填充色彩
2014年6月26日的I/O 2014开发者大会上谷歌正式推出了Android L,它带来了全新的设计语言Material Design,新的API也提供了这个类VectorDrawable .也就是 ...
- Android矢量图vector的制作
Android矢量图vector的制作 一:Android 图片适配的发展史 在Android的发展历程中,由于设备碎片化的原故,谷歌在app中图标的适配上做出一步又一步的改进,大体有这么几个阶段: ...
- Android 5.0+高级动画开发 矢量图动画 轨迹动画 路径变换
第1章 课程介绍 为了成就更多高逼格的人才,我专门整理了Android5.0以后主推的实现酷炫动画的新技术,教你掌握实现动画的高逼格技巧.课程中我会详细讲解每个动画效果实现的原理和所用的技术,并带你一 ...
- Android 矢量图详解
官方文档 关于 Vector,在官方开发指南中介绍.本文章是由个人翻译官方指南然后添加个人理解完成. 由于个人精力有限,多个渠道发布,排版上可能会有问题,如果影响查看,请移步 Android 开发者家 ...
最新文章
- LeetCode Maximal Square(最大子矩阵)
- POJ-1436 线段树 区间更新
- DHCP服务器禁用NetBios功能后引发WPAD失效解决方法
- java jdk安装教程win10_win10系统安装java的详细步骤（图文）
- 手工杀毒之“三十六计”
- Java 常用对象-StringBuffer类
- 2018.08.21随笔
- 在线下单系统php源码,PIMS在线订单管理系统v4.2.9
- 安装程序无法创建新的系统分区 服务器,安装程序无法创建新的系统分区怎么办...
- Chrome浏览器主页被篡改怎么修复
- 推荐几个学习编程的网站
- WordPress系列教程(一)----WordPress环境准备与安装
- 第七章--图--基本概念
- AUTOSAR MCAL解析: ADC
- 网络空间安全中国学科排名——2021软科
- 【五一创作】使用Scala二次开发Spark3.3.0实现对MySQL的upsert操作
- EMV技术学习和研究（一）开篇
- Scratch创作-从入门到精通
- ASM027: 汇编常用工具
- docs邮箱服务器,配置邮箱服务器属性