上一篇文章写如何把曾经做的一组Tab栏图标优化，觉得还不错

于是又把它做成了动效效果，这篇文章主要写一下在做的过程中遇到的困难和解决办法

先看一下最终效果，来吧，展示整体是Q弹效果，有的加上一点渐入渐出，弹射等，实现难度上并不是很大，主要是如何让它变得丝滑，符合常理。

开始做的时候总做不出Q弹的效果，有点呆板，就像这样有点死板，没有Q弹的效果

后来想到篮球，篮球就是很Q弹的一个物体。一个篮球在一定高度自由落体到地面上，他是会来回弹起落下好多次。再把我这个图标想象成篮球，它好像就弹了一下，这是它的关键帧只有三个关键帧，下压，弹起，再落下恢复原状，很不符合常理

于是我让它再弹一一次，让它符合常理，改完之后成这样关键帧加了一倍只让它回弹了一次，这样效果最好，太多的话会显得繁琐，时间会加长，并且这么小的图标也舒展不开。和一开始只回弹一次差距还是有的。包括右上角的两条线，弹射原理也是一样，让它弹两次会更好。

接着又发现它好像只有高度拉伸变化，宽度没有。观察过球类都知道，如果高度被压缩，那么宽度肯定会变宽，相反亦然。比如气球，如果我们用力把气球往下压，气球变矮的同时也会变宽，就是这样的原理。反看一下我的图标，只有高度有变化，宽度没有，所以看起来很不正常。

于是就给它加上了宽度变化。这样更加符合常理，所以就舒服很多。其余的四个图标涉及到这个我都把他们做成了这样。

这里面让我花时间最多的就是游戏图标，除了让它外面轮廓和其它图标一样弹一下，里面加渐变渐出这样的效果，实在想不到更好的方案。一开始做成了这样

有点普通，没什么亮点。后来同事说玩这种游戏机摇柄的时候都是前后左右摇，可不可以加上去。

后面就把里面的摇柄改成了左右摇晃

这样好像好了很多。当即我拿了一包辣条扔了过去。

圈子和任务就普通一点

除了Q弹外，一个弹射，一个渐出，五个图标并不用每个都有亮点，这样才有差异。

最后一个我的是Q弹后加了两个爱心在右边往不同的方向前后弹出来，这个效果是通过球在水里被挤压漏气后会吐泡泡联想到的。

以上就是今天的分享内容，希望对你有帮助。

Powered by Froala Editor