自动动画对齐效果UI设计交互动效

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

教程内容:

通过制作自动对齐动画来呈现交互效果


制作素材

这个案例总共需要制作4个画板

7CD34E24-ECF6-4FD4-9BC7-215F9F9CDAB1.png

◇制作主画板即第2个画板

需要制作5个专辑封面,1个圆形磁盘,第一个封面和磁盘一起打组,以及一个底部导航和顶部切换按钮

都制作好后按照下图排列整齐,在第1个封面后隐藏圆形磁盘图层

B8EDD507-9966-43E2-95E9-FC77DF7B7187.png

◇制作第1个画板

将专辑素材移动至顶部并缩小

将底部导航移动至底部并将图标移动至画板外,错落排好,错落排列是为了让交互看起来更有节奏感

E416F00A-9F93-4B43-B6F3-F03DA35F2415.png

◇制作第3个画板

将封面素材按下图排列好,并显示圆形磁盘图层

BE8E0A9C-E31C-4E69-ACB3-2587A12E25D9.png

◇制作第4个画板

将封面素材组的圆形磁盘再次向上移动一段距离,并制作一段歌词用矩形遮罩并打组

将歌词素材复制到第3个画板,并将歌词均移动至蒙版外侧错落排列。

1A839CBB-E364-41D5-BA85-79A3C5DA8EF1.png


制作交互

链接1-2画板制作时间自动动画

7D4EAC66-F90D-4233-8B8D-8FFFE46A7655.png

链接2-3画板制作时间对齐动画

43040915-F44C-4523-9D9F-F558376B14C1.png

链接3-4画板制作点击自动对齐动画

F56E4712-DE0B-43E5-8254-531C493B7AD3.png

制作完成

点击前往查看→查看视频教程

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作