描述了APP中浮动菜单导航的动态展开和折叠过程。来看看吧~
先看效果:
经历地址:https://pikopc.axshare.com
一、操作分析
点击加号按钮,加号顺时针旋转45度,变成关闭按钮,以按钮为中心弹出扇形菜单栏。
单击关闭按钮,将其逆时针旋转45度,它将变成一个加号按钮。扇形菜单栏以按钮为中心折叠。
二、实现步骤
1. 准备阶段
首先将其拖入一个375*667的动态面板。双击动态面板进入状态1页面。
在状态1页面上,准备一个375*667的背景图像,在x=0,y=0。
然后拖成圆形,取消边框,大小设置为56*56,填充如下图所示的玫红(可以根据喜好填充这个颜色~)。拖动一个加号图标,将其大小设置为22*22,填充白色,并将其放在圆心。将加号图标和背景圆圈组合成加号按钮。
再次拖动一个圆,取消边框产品运营方案,大小设置axure教程为325*325,填充与步骤2中背景圆相同的玫瑰色。将它放在加号按钮的中央,并放在下图所示的位置。拖axure教程入三个菜单图标,产品运营组合菜单图标,放置在菜单栏(大圆圈)上方的适当位置,然axure基础教程后将菜单栏(圆圈)和菜单图标一起设置为axure下载隐藏(顶部的加号按钮)。产品运营方案
最后如下图所示:准备好所产品运营简历应届生需组件后,拖动到热区,完全覆盖加号按钮。
2. 设置交互
(1)首先设置叠加在加号按钮上的热区的交互,如下图所示:
按钮背景圆圈选择交互:
(2)然后,为加号按钮设置交互事件。
(3)菜单栏交互