首先说明下，这篇文章仅仅讲解一些AE制作的技巧，以及如何制作我上传的这张图，本人是动效师，并不是ui设计师，因此有关设计方面的东西可能不是特别有参考意义。

制作我所上传的gif过程有些繁琐（我自己创意加制作足足用了大概两天时间），因此我分几个点来分享给大家另外本篇文章适合有一些ae功底的人观看，如果您不懂ae，可以加群TinyHouse：78613948，这里我会进行详细解答，当然了，必要时会录制视频教大家。

整个动效所包含的内容：

1.弹性按钮，动态反馈

2.翻转字幕

3.遮罩动画

4.ae的form插件以及粒子插件（非重点，就那坨蓝色的东东，仿照索尼动态视觉设计的）

一提到ae，很多人都比较抵触，觉得很难，其实楼主倒不觉得难，只是觉得ae的内容很多，不太好记，要经常玩而已。

言归正传，这篇文章主要讲解第一部分——弹性按钮

这次效果的弹性按钮的制作方法很简单，大致几个步骤。

首先，找到一个喜欢的图片，然后用ps或者其他软件制作一个圆形图标，作为我们的主按钮。

接下来对它进行手动调节关键帧动画！

由于要表现被手指按压后的反弹的反馈感，因此设置图片的scale属性动画关键帧，我的图第一帧是15%的大小，四帧后大小变为14%，再过四帧后变为16%，再过四帧变为14.6%，再过四帧为15.2%，再过四帧为14.9%，再过四帧为15%（此处由于弹性需要，因此关键帧设置的比较复杂，这样设置符合物理常识，更加逼真。）这个原理是因为下面的图

如果你们的图第一帧设置为其他的百分比大小的话也不要紧，只要注意平均四帧为一个周期变化，上下浮动，但是浮动范围要越来越小，直到最后与初始帧的百分比大小相同即可！

当然，如果你们懂的用motion脚本或者表达式的话，弹性动画关键帧的设置会简单很多。（有空会系统讲）

ok，设置完成后，预览一下！看看成果

接下来复制这层图层，然后叠在它的下面，并且错开2帧。

接着绑定复制的图层至空白对象，然后整体放大，并且对复制的图层加入”填充“效果，使图层变成纯色的底图

这回再次预览效果

这就是弹性按钮被按后的弹性反馈了。

下面是弹出的左右两个按钮的动画。

先在网上下载仅供学习交流的素材，也可自己临摹ui，我是临摹了比较简单的UI，然后摆好位置

这里把两个ui图层放到头像图层的下面，两个图标的移出动画依然按照我之前告诉大家的原理，这里我告诉大家怎么设置关键帧：首先初始帧让两个图标在头像图标的正下方，大概4帧后移动到摆放好的位置，然后4帧为一周期来让图标做左右运动的弹性动画（按照上面说的缩放动画原理设置），只不过此次的变化数值为ui的位置坐标的X轴坐标。

ok设置完毕！

预览效果！！

这期大致讲解完毕。

没看明白的朋友可以留言问我，如果大家有兴趣我会出视频教程，这样就方便大家理解了，好吧，留言过二十我就出这个gif的全部视频教程！！另外这个可是纯粹的原创，没半点抄袭哈。

FeatMax from Tiny House