Axure基础详解二十一:动态面板随机抽奖效果

效果演示

  • 随机抽奖时闪烁效果
  • 抽奖结束后奖品展示效果

组件

分为三块区域【奖品区】、【抽奖盘】、【奖品展示弹窗】

奖品区

**【奖品区】**由8个同等大小的矩形和一个"抽奖按钮"组成的九宫格。


抽奖盘

建立一个动态面板,设置8个面板状态,命名为"抽奖盘",在每个面板状态里分别插入半透明浅蓝色矩形,分别按顺序放置在对应九宫格8个不同的位置。(【抽奖盘】默认隐藏)


奖品展示弹窗

在建立一个动态面板,设置8个面板状态,命名为"奖品展示面板",分别插入"奖品区"对应的8个奖品矩形,和一个"确认按钮"(【奖品展示弹窗】默认隐藏。)


最后将这三个区域组合起来,居中对齐在一起。层级关系是:奖品展示弹窗>抽奖盘>奖品区。


全局变量

设置一个全局变量"shuiji",用来记录随机次数。

设置交互

"抽奖按钮"单击时的交互

**【禁用按钮】**防止多次点击;

**【设置变量】**设置变量"shuiji"为[[Math.ceil(Math.random()*8)+16]]。

**【设置初始化面板状态】**设置动态面板"抽奖盘"和"奖品展示面板"的面板状态都为"状态1",目的是重置数据。

**【设置随机抽奖面板状态】**设置动态面板"抽奖盘"和"奖品展示面板"的面板状态都为"下一个",自动循环,循环间隔100毫秒。两个面板状态循环时间必须保持一致。


"抽奖盘"动态面板状态改变时交互

条件1: 如果变量"shuiji"大于0,那么**【设置变量】**"shuiji"为【shuiji-1】。

条件2: 如果变量"shuiji"等于0,那么**【设置面板状态】** "抽奖盘"和"奖品展示面板"的面板状态停止循环。【等待】 1000毫秒,最后**【显示】**"奖品展示弹窗"。


"确认按钮"单击时交互

【隐藏】"抽奖盘"和"奖品展示弹窗"

**【启用按钮】**启用"抽奖按钮"


相关推荐
梓贤Vigo6 小时前
【Axure原型分享】拖拉拽动态调整页面布局-动态面板
交互·产品经理·axure·原型
木斯佳10 小时前
HarmonyOS 纸感交互实战:把天气卡片做成便利贴撕下效果
华为·交互·harmonyos
Ulyanov10 小时前
《PySide6 GUI开发指南:QML核心与实践》 第五篇:Python与QML深度融合——数据绑定与交互
开发语言·python·qt·ui·交互·雷达电子战系统仿真
不喝水就会渴1 天前
从基础到实战:鸿蒙 ArkUI 属性动画开发指南
华为·交互·动画·harmonyos
cy_cy0021 天前
从旁观到参与,体感游戏赋能教育展厅
大数据·科技·人机交互·交互·软件构建
bitt TRES1 天前
如何使用C#与SQL Server数据库进行交互
数据库·c#·交互
fTiN CAPA1 天前
开源模型应用落地-FastAPI-助力模型交互-进阶篇-中间件(四)
开源·交互·fastapi
梓贤Vigo1 天前
【Axure视频教程】中继器表格自适应行高
交互·产品经理·axure·原型·教程
Mr..Jackey1 天前
RA6809 的 HMI(人机交互) 开发:菜单逻辑架构设计与实现详解(4)
单片机·51单片机·人机交互·交互
key_3_feng1 天前
HarmonyOS 6.0 轻量化服务卡片交互设计方案
华为·交互·harmonyos