TAB栏菜单弹跳自动动画交互动效

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

版本要求:

这个教程通过XD自带的弹跳动效来完成制作效果


需要制作5个画板,跟着下面的步骤开始制作吧!


1.第1个画板


制作按钮

拖入准备好的素材,绘制一个等边的矩形,并将圆角拉到最大制作成一个圆型,

0790815C-3AFD-4F7E-A805-CEAB9BD2C8CF.png

给底部白色矩形增加锚点制作下凹效果

0DE5AA8F-28B1-406C-A775-AF2016BAFFCD.png

拖入图标素材居中对齐,隐藏其他图标,调整“+”号图标的角度

461566F7-3F1B-4A0A-BAB9-545519C94E61.png

绘制一个白色的圆形覆盖住图标,并复制四份

将制作按钮的全部素材打组


2.第2个画板


复制第1个画板

调整蓝色➕按钮的距离,并调整白色矩形的锚点为上凸效果。

并显示一个白色的圆形盖住图标

B9B5B916-0810-413A-B4D3-9D1C87C5D5A7.png

链接第1、2两个画板,设置点击自动动画弹跳1秒

8E4D698E-5D09-4153-AD36-A2D3713CB747.png


3.制作第3个画板


复制第2个画板,拉伸矩形,排列好圆和图标,每一个圆覆盖住一个图标。并将底部白色矩形凸出的锚点调回原点。

86A68FD3-4E6A-4066-B12E-E1CF02266D97.png


4.制作第4个画板

E8E525C3-76B1-4C98-A34C-30627EC148C2.png

复制第3个画板,隐藏四个圆形,将+号图标调整角度为×


5.制作交互


链接2、3两个画板选择选择时间自动动画缓动0.4秒

复制第3个画板来制作第5个画板,将几个画板循环在一起。

D3AC95CA-84BE-490F-832F-9AA6BDDD4B1B.png

制作完成

点击前往查看→观看视频教程获取源文件



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