svg Vector 动画序章：前端程序员也需要了解学习的一个东西

该篇系列文章让您从0基础了解svg动画制作过程。

大量资料基本参考下文链接，现在这篇系列算是自己从0基础硬啃此文后的复习，所以建议大概看了下文链接后，再回头看这篇系列。基本排版和下文链接模式一样。具体可以点击此文看。原博文

Creative customization是material design的原则之一。微妙的添加图标动画可以给用户体验稍微不一样的体验，让您的应用程序感觉更自然和活力。不幸的是，使用VectorDrawables 从头开始构建图标动画可能具有挑战性。这不仅需要花费大量的工作来实现，而且还需要了解最终结果的外观和感觉。如果您不熟悉最常用于创建图标动画的不同技术，那么您将很难设计自己的动画。

此系列文章介绍了几种创建漂亮图标动画的不同技巧。当您阅读文章时，将有不同的交互式演示，突出显示每种技术的工作原理。我希望这篇文章至少可以让你了解图标动画如何在幕后表现，并且可以跟我一样在零基础下写出自己想要的动画。

这篇文章分为以下几个部分：

1. 绘制图形
2. 绘制图形并改变groups paths
3. 修剪paths
4. 变形paths
5. 修剪pathS
6. 结论：把以上步骤结合一起

同时有个番外章节：
关于pathInterpolator差值器

.
以上文章基本施工完毕，后续重新检查文章并且补充一些展示图片，内含源码。
以下动画皆有这些源码产生。

展开折叠效果.gif

闹钟“振铃”效果.gif

单选按钮选择效果.gif

线性进度加载效果.gif

指纹效果.gif

搜索后退箭头效果.gif

AndroidDesign手写动画.gif

Google IO 2016效果.gif

不确定进度圆形.gif

加号转换到减号效果.gif

交叉转换到勾选效果.gif

抽屉转换到箭头效果.gif

沙漏效果.gif

切换可见效果.gif