这段时间看了下tabbar动画，自己也整理做了一些。动效gif为了突出表现形式和减少品质大小，没有按照标准的tab图标规范设计。以下是一些个人观点，跟大家分享下

动效表现形式

在做图标动效的时候，并没有很复杂的技术，主要应用的就是一些常规简单的方法，尽量要符合自然运动规律。下面是在做这些动画的时候用的最多的一些方法：

• 修剪路径

• 路径动画

• 缓动  

• 时间差

  
  

修剪路径

修剪路径在做tabbar图标gif的时候可以说是用的最多的方法之一了，比如下面的图标集，就是用简单的修剪路径方法，让路径从有到无从无到有即可；

具体就是：选择路径-内容-添加修剪路径-开始和结束加关键帧

图：修剪路径动效

路径动画

路径动画指的是在两个不同关键帧改变形状的路径，让两个关键帧的形状不一致，中间AE会自动补充补间动画；如果是通过AI或者sketch导进去AE可以直接修改路径，AE画的形状如矩形，需要改变为贝塞尔曲线路径；

具体方法：选择形状-内容-路径-增加关键帧，然后改变路径形状；

图：改变圆的路径生成动画；

缓动

设计动效时候要考虑缓动，是加速进场还是减弱？避免用匀速；

图：从上到下分别是匀速、加速进场、减速进场，为了突出效果，做的夸张了些，个人喜欢直接调整运动曲线，调起来快；

时间差

时间差指一个对象同一时间点的帧要错开一两帧，有奇效；

图：左边两个圆时间同步，右边两个圆增加了时间差的效果，显得更加有趣；

图：时间差只需相隔一两帧，效果更有趣；

以上就是一些小小的分享，打算做成视频案例讲解，目前还没有找到那些大神是怎么录屏+记录鼠标事件+录音的，望推荐方法，苹果电脑用的；

GIF展示

下面的一些tabbar动画基本都是用的上面说的一些技巧和方法，还在入门阶段的可以尝试玩玩

Powered by Froala Editor