叠加左右滑动菜单弹窗交互动画UX教程

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

教程内容:

使用叠加的效果将需要层叠的内容画板自动叠加至底层画板上

整体预览

这个案例总共需要制作3个画板,两个交互效果,一个是左侧菜单滑出交互,另一个是卡片弹窗交互,主要应用到的是叠加效果

556CBB54-9D96-437D-BC97-23F4A081C77A.png

制作素材

需要准备一个主界面带左上角汉堡菜单图标,一个侧滑菜单内容画板,以及一个全屏弹窗的画板

制作交互

选中第1个画板的汉堡菜单,链接交互至第2个画板,选择叠加

CEEB9691-BB4A-4FE8-9553-D6F91AAB31B9.png

此时会自动生成一个绿色的叠加框代表叠加内容的位置,可以移动来调整位置:

77BA5D87-3B9C-4DB6-8106-F4098E90F449.png

将绿色叠加框靠做对齐,并选择右滑的动画效果。


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