用Axure动态面板制作简易抽奖小程序

一、目标

通过axure动态面板的功能，实现一个简易的抽奖程序。

二、技能要求

要求看本来的同学，需要对动态面板的功能又一个基本的掌握。如果不熟悉的话，也可以通过本文来了解一下动态面板的属性。

三、目的

技痒，想写个文分享一下，输出一下自己的思路。

四、背景

我第一篇文章发布了后，首页的文章第一的位置很快就被那个高保真抽奖的文章给挤下去了，看那篇文章在上面挂了很久，阅读量还比我的高，不太爽。看了下，人家作者是用前端代码实现的，题文不符，我就想能不能用axure实现一个差不多的效果。因此想到了动态面板，随手实现了一下。从想法到实现大概花了半小时，但是写教程可能要半天。因为码字有点费手，本落手速慢。

五、教程

原型预览链接

步骤1：新建一个原型，并新建一个页面

步骤2：拖一个手机壳模型到页面中

步骤3：拖一个动态面板到页面的手机模型中央位置

步骤4：拖一个按钮到动态面板正下方位置

图片上传失败了，后面再补充图片吧。

步骤5：双击动态面板，然后拖入一个矩形，矩形背景设置为无背景色。双击矩形，进行文字编辑，输入参与抽奖者姓名。有若干参与者，则新建面板状态，重复步骤5即可。（人太多的话就放弃这个方式吧，用别人写好的程序它不香吗？但是你也可以花时间慢慢搞，装个×也不错，想做好看点的话再加上头像什么的就更好了，这里我就不多说怎么添加头像了……）

步骤6：编辑按钮文字为“开始”，并设置交互样式，选中样式背景色为粉色

步骤7：给按钮添加单击事件，添加情形，当按钮文字为“开始”时，设置按钮文本为“停止”，且设置选中状态为“真”，并设置动态面板状态为下一项，勾上向后循环，且循环时间设置为100毫秒；当前设置完成后，点击“开始“按钮后，页面上动态面板的名字会快速滚动起来。此时为开始抽奖状态。

步骤8：继续给按钮添加情绪，当按钮文字为“停止”时，设置按钮文案为“开始”，且设置选中状态为“假”，并设置动态面板为“停止循环”；当前设置完成后，点击“停止”按钮后，页面上的动态面板滚动会停止在当前名字。此时为抽奖结束状态，显示的名字即为中奖者。