半仙哥
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
趣设网课半仙哥又双叒叕出教程了，今天带来的继续是融球类方向的实战运用，如果说Tabbar动效能提升用户体验，提高体验趣味性，让你的产品在众多产品中脱颖而出
趣设网课半仙哥又双叒叕出教程了，今天带来的继续是融球类方向的实战运用，如果说Tabbar动效能提升用户体验，提高体验趣味性，让你的产品在众多产品中脱颖而出，那么融球的应用，又给Tabbar动效插上了腾飞的翅膀！先上本例案例最终效果吧：
说完开场白，半仙哥同样暖心提示一下，看视频教程已足以可以掌握本案例，但是为了更好的学习体验，半仙哥同样做了图文教程！
Step1 首先可在趣设网课公众号回复“融球类-Tabbar动效”即可下载半仙哥撸好的PSD设计稿，如下：
Step2 打开AE，无需新建合成，直接右键导入文件，“导入种类”选择“合成-保持图层大小”，看我下面：
此时时间轴如下所示：
Step3 调整“合成”大小，并将源文件的位置适当移动下，可参考如下去设置：
此时本Tabbar动效的漫长而美妙的前戏宣告完成，接下来就是漫长的K帧环节了！
Step4 首先针对于每个图标K上缩放关键帧，具体的时间间隔与节奏，可结合童鞋们想要的效果来操作，半仙哥设置的icon默认大小是“67%”，放大后是“100%”，如下所示：
Step5 在“形状图层1”上面添加正圆，对准“home”的icon，相信你一定对的很准（你懂的），无需半仙哥教你！然后对其K上位置关键帧，动效和节奏跟之前图标的点击一致！
Step6 最后是见证高潮的部分到了，在“形状图层2”上面右键“新建”>“调整图层”，在选中“调整图层”的状态下然后选择“效果”>“遮罩”>“调整实边遮罩”，将“羽化”值设为“20”、将“扩展平滑的地方”勾选上，如下所示：
继续在选中“调整图层”的状态下，选择“效果”>“遮罩”>“简单阻塞工具”，将“阻塞遮罩”设为“20”，如下所示：
Step7 此时我们已经完成了核心部分，接下来只需优化下细节，即可输出动效了！让我们再赏析下融球类-Tabbar动效吧！
关注公众号：趣设网课，回复“融球类-Tabbar动效”即可获取！
作者：趣设网课（v: uegreat）
本文由 @趣设网课 整理发布。未经许可，禁止转载。
Powered by Froala Editor
全部评论：0条
更多作品
发表评论