最近几天因为工作的的关系，差不多四五天没写教程了，一方面确实因为工作多，另一方面是因为连续的早起，白天睡眠不足懒癌又犯了！
好吧，不管怎样，还是把以前就打算写的内容分享下，其实是很小的效果，不过挺有意思，看图先
对啦，就是手指戳动的这个动画！要做好这个效果，跟大家分享三个关键点！一是素材的制作，这是基础；二是伸展动画的使用；三是时间轴，或者说节奏的把握，这是关键！
关于伸展动画，这里再啰嗦几句吧，熟悉的小伙伴可以略过，直接跳到后面制作的过程！
伸展动画解析:跟伸展动画有些类似的效果是我们最常用的擦除效果。除了最开始的原始效果，我们还可以设置伸展的各个方向，先来比较下两个效果：
是的，一个很明显的区别就是擦除会带有淡出的效果，伸展则不会；对于色块，展开的过程区别还不是很大，但对于图片而言，伸展有明显的压缩后展开的效果！
相对于进入效果叫做伸展而言，退出效果则叫做层叠，上文的信封动画就是利用的这两个效果的连用！
分析完这两个效果，估计很多小伙伴已经知道怎么做了，我们来具体操作一下！
操作演示
第一步，素材制作
素材制作的过程，需要注意的是快速绘制图形的方法，简单分析下，去掉文字，从图形来看，第一，肯定是要做一张图，而不是拼接出来，因为图片有渐变，拼接的话做不到这么完美！第二，图中方框区域其实是一样的图形，既然如此，考虑用布尔运算就可以了，只不过一个是布尔加运算，一个是布尔剪切运算的区别；第三，最关键的地方，是注意右下方框处的处理，因为剪切完可能会有多余的顶点，记得手动调整。
做完这个其实还没完，第二步是素材的调整，主要是为了配合动画！大家这时再看下图，之所以效果能比较生动，主要就是突出部分的效果，也就是下面第二张图我用红圈标记的地方。
所以很关键的一步素材制作，就是要把这几个地方单独裁剪出来，如下图。也就是说，其实右边是个矩形，左边五个地方都是用图片单独裁剪的效果，做到这里，素才算是就制作完毕。
第二步，伸展动画
写到这步，伸展动画反而是最简单的一步。只需要做到两点，一是找个手指的素材，注意大小和突出的部分差不多就好了，不太一样的时候，适当拖动下，比如下图是我找的素材原图
第二是给手指加上路径动画，记得选择动画翻转，这样退出动画就不用做了，或者退出的时候用飞出效果，当然用飞入飞出也是可以的，但是因为飞入是匀速的效果，路径是可以添加平滑的，相对会更灵动一些。注意一点，千万不要给一个手指添加多段效果，而是复制5个，因为都是重复的！比如添加完下图这样
给手指加上伸展的效果，这里需要初步估计下延迟，如果用路径动画+飞出效果，伸展差不多在路径效果的末端位置，比如下图；如果用路径+翻转，基本是在路径一半的效果，下图是第一个效果的大体时间轴，第二个是路径，第三个是飞出，第四个是伸展效果。具体的持续时间先不说了，大家自己尝试下
第三步，时间轴调整
基本的效果第二步其实就已经完成了，但是要想做的灵动一点，就需要做更精准的调整，调整的技巧和方法注意以下几点，第一，如果用路径+飞出的组合，伸展和路径的结束时间是一样，这样才能保证戳到顶点的时候伸展同时结束，退出的时候因为用的飞出效果，所以可以很快的戳进去，慢慢的退出来，做个节奏上的变化！第二，伸展的效果要快，因为开始的一小段多少是有些变形的，大家把持续时间变长一些会看出来的，所以这里最好按照0.01秒的间隔去调整，千万别认为看不出来你，大家试过就知道了!调整完时间轴大约是下面的样子
这里伸展的效果是0.15s，属于基本能看出来效果，但是看不清楚瞬间的效果，这也是我们要的效果！第三，之所以不用一个手指加连续路径的原因，就在这里，因为此时可以复制动画效果，前面一张图有显示了，复制五个手指效果的速度可要快的多！
最后再单独分享下源文件（链接：http://pan.baidu.com/s/1o86jRiq 密码：t8vl）方便大家模仿！
学会一个技能或者技巧并不难，难的是应用和创新，下次的教程，我们依然会分享伸展动画怎么玩，一起开脑洞吧，下次见喽！
