移动命令

一、移动端产品中,大量使用驼式导航,通常会把主要命令,集中于驼峰处,以浮动功能集的形
式出现。
下面我们模拟驼式浮动功能集利用移动命令实现的案例。

  1. 在桌面中拖拽出多个圆形进行摆放,分别命名,“加号”、“1/2/3/4”,并记录 1/2/3/4
    在页面中的坐标。(可直接将坐标写入元件名称的位置)

在这里插入图片描述
2. 将“1/2/3/4”与加号重叠,注意,此处加号为顶部图层。

在这里插入图片描述
3. 选择“加号”,添加命令,鼠标单击时——移动——勾选“1/2/3/4”——移动方式:绝对位置——
将 1/2/3/4 的坐标写入每一个元件的 X 和 Y 的位置——动画:弹性——时间:500 毫秒。

在这里插入图片描述
(图 24)
4. 预览后,可以单击“加号”,所有圆形会移动到第一步记录的位置。
5. 若需再次添加点击按钮后,圆形收回的效果,只需要做出新的按钮,将命令赋予新按钮,
坐标,动画,位置等均与第三步相似。
二、删除消息或删除商品

  1. 从元件库拖拽矩形、文字进行排版,并将删除进行命名。

在这里插入图片描述
7. 从元件库拖拽动态面板置于舞台。

在这里插入图片描述
注意:此处动态面板的宽与高,必须与灰色矩形宽高保持一致。
8. 将舞台元件全部放入动态面板状态 1 坐标左上角 0.0 点,并把全部元件打组。

在这里插入图片描述
若元件位于坐标左上角 0.0 点时,状态 1,蓝色虚线刚好与灰色矩形位置重合。
注意:此处需记录删除按钮的宽度。
9. 回到舞台,添加命令。选择动态面板——双击向左拖动结束时——打开用例编辑窗口——选
择移动——勾选组合——移动:相对位置——X:负的删除按钮的宽度——Y:0——动画:线性——时间:300 毫秒。
预览时未拖动效果:

在这里插入图片描述
10. 在 Axure RP 中打开动态面板状态 1 页面,添加命令,选择删除按钮——鼠标单击时——
显示 / 隐藏——勾选组合——可见性:隐藏——动画:无 / 逐渐。
11. 预览时,可先拖动消息框,后点击删除按钮,将消息隐藏。

三、鼠标移入图片弹出提示信息
12. 从元件库中拖拽出 2 个矩形,分别修改并命名“蓝色矩形”“弹窗”。

在这里插入图片描述
2. 从元件库拖拽出动态面板,动态面板宽高与蓝色矩形保持一致。

在这里插入图片描述
3. 将蓝色矩形和弹窗放入动态面板状态 1 中。
“蓝色矩形”放在状态 1 坐标左上角 0.0 点位置。
“弹窗”放在状态蓝色矩形正下方。

在这里插入图片描述
4. 修改“弹窗”不透明度,数值为 30 左右即可,记录弹窗高度。

在这里插入图片描述
5. 返回 index 页面,添加命令,选择动态面板——鼠标移入时——移动——勾选弹窗——移
动:相对位置——X 坐标:0——Y 坐标:弹窗高度(负数)——动画:弹性 / 弹跳 / 线性——时间:
300 毫秒。

在这里插入图片描述
6. 预览时,将鼠标滑入动态面板,弹窗即可向上弹出。
7. 鼠标移出时,弹出收回。
8. 在 index 页面,添加命令,选择动态面板——鼠标移出时——移动——勾选弹窗——移动:
相对位置——X 坐标:0——Y 坐标:弹窗高度(正数)——动画:弹性 / 弹跳 / 线性——时间:
300 毫秒。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值