After Effect制作UI交互动效设计教程

八.在上滑的时候tabbar和statusbar固定不动。其中会有2个设计难点

1、大标题手印2字上滑后消失然后缩小出现在nav中间位置。

2、即当上滑时搜索框和icon向右缩小，然后搜索框消失icon位移到nav右边的位置。

设计技巧：针对第一个问题，大标题只做向上的位移，然后双击在nav合成里对小号的标题手印2字做透明度变化，出现的时间上自己需要把控好。

第二个问题，在Search合成里面，其实就是给搜索框做了个从左向右缩小的蒙版路径动画，同时搜索icon跟随搜索框X轴位移，当2者运动到最后侧时一起向上位移消失，同时位于nav合成的搜索icon透明度动画出现

九.当上滑结束后，选择一个视频卡片。卡片会有一个运动曲线同时产生从位置和缩放动画。当右上角关闭视频时，视频卡片向左下角曲线运动

• 总结

—

1.当用sketch做界面时就用Principle。这两组黄金搭档可满足pc用户和mac用户的不同需求

2.在用PS设计UI界面时要随时注意图层的命名和归类，这不仅会方便我们界面的设计，在后期ae动效设计时也会节省很多时间

3.图层的运动不可以是匀速的，一般会给关键帧添加缓动效果

第五篇教程希望能够帮助到老铁们，如果喜欢可以点个小赞赞哦

FEVTE编注：更多After Effects实例教程学习交流和After Effects作品发布请访问飞特网After Effects实例教程栏目，地址：https://www.fevte.com/moive/AE/AESL/