如何用Axure实现砸彩蛋的交互原型-控件新闻-慧都网

如何用Axure实现砸彩蛋的交互原型

转帖|行业资讯|编辑：郝浩|2016-06-13 14:05:00.000|阅读 324 次

概述：本文讲解了如何使用原型设计工具Axure RP设计用锤子砸橙蛋的原型

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

准备工作：安装软件Axure RP 8或者7。下载地址>>

第一步：从元件库拖入动态面板，将该动态面板命名为彩蛋，创建彩蛋的初始状态

这是动态面板的初始状态，将该面板状态命名为“彩蛋未砸”。

第二步：根据需要分别设置彩蛋砸开的结果状态

这里我一共设置了4种状态，依次为彩蛋砸开未中、彩蛋砸开已中、没有中奖提示、中奖提示。

第三步：再次拖入一个动态面板，画一个锤子。

从元件库新拖入一个动态面板，命名为锤子。恩，这个锤子不是老罗的锤子！（题外话：当然也可以直接导入一个锤子图片- -。我只是想着自己用矩形画个锤子看看）。然后，将锤子的动态面板设为隐藏。

第四步：设置鼠标移入彩蛋，显示锤子随鼠标移动；鼠标移出，隐藏锤子的用例事件

设置彩蛋动态面板的移入移出事件：当鼠标移入彩蛋动态面板时，锤子会跟随鼠标移动，移出彩蛋动态面板时，锤子消失。

这里需要注意的是，锤子随鼠标移动的设置，需要使用鼠标指针的变量。移动到绝对位置的X轴、Y轴变量为鼠标指针的Cursor.x、Cursor.y，为了让锤子显示在鼠标稍靠后的地方，因此在变量的基础坐标上减去50。（视实际情况减去对应数值）

第五步：设置锤子的鼠标单击事件，也就是彩蛋的交互。

这里我设置的是红蛋没奖、橙蛋有奖，先说没砸中的交互。

5.1 设置锤子砸红蛋的单击条件

锤子接触到彩蛋时，并且此时彩蛋面板状态为彩蛋未砸。

5.2 设置锤子符合条件时的用例事件

当锤子接触到红蛋，单击鼠标后，

设置面板状态为彩蛋砸开未中

隐藏锤子

等待1000毫秒

设置面板状态为没有中奖提示

5.3 同理设置锤子砸橙蛋的条件和用例事件

整个彩蛋的交互实现基本就是这样。

本文转载自产品100

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：敏捷BI真的是颠覆性的BI创新吗？下一篇：逆向思维：如何使用排除法筛选目标框架

在线采购

中文文档库

试用/Demo下载

开发社群