Axure教程:转盘抽奖交互原型
效果如下:
抽奖流程
一、主要内容
(1)主要元件:动态面板
(2)重点:旋转交互、随机函数、触发动作。
(3)难点:通过停止位置判断抽奖结果
(4)涉及函数及解释:
- target:目标元件
- text:元件文本
- Math.random():返回0-1之间的一个数字
- rotation:元件旋转角度
二、原型准备:主要包含两个页面
(1)框架页面
包含手机边框+内联框架,主要用于将内容调入当前页面,展示整体效果。
双击内联框架,选中index(内容)页面,把内容页面引用到内联框架中。
(2)内容页面
包含作品全部元件内容。(提示内容默认隐藏)。
三、原型拆解说明
(1)转盘
由两大部分组成,背板+按钮,旋转部分与按钮指针分开,方便添加交互,对背板命名为:zhuanpan。
(2)剩余次数
数字为单独的文本标签,这样方便对数字进行运算。数字3命名为:cishu
(3)抽奖结果动态面板拆分说明
抽奖结果动态面板包含四个面板状态,并分别对应转盘上的四个奖项。动态面板命名为:jiangpin,默认设置隐藏。
四、交互动作
1. 【开始抽奖】按钮交互
鼠标单击时:添加判断如果次数(cishu)元件值大于0,执行旋转,次数减1等交互;当次数(cishu)值小于0,显示提示信息,2秒后隐藏。
交互设置:
- 旋转角度表达式:[[Math.random()*360+3600]],从0-1中随机产生一个数字(乘以360),这样在360度中任意得到一个角度;加3600,是让转盘至少能转10圈,然后再任意停止到一个度数上。
- 次数交互设置:target.text-1,表示用次数(cishu)文本减1。
- 禁用当前元件[开始抽奖]:避免重复单击按钮,影响次数文本递减、以及转盘重复旋转。
- 等待10010毫秒:为了能在旋转结束以后,再出抽奖结果。所以这个时间可以等于或稍大一点旋转的时间。
- 显示奖品(jiangpin)动态面板:将隐藏的奖品(jiangpin)动态面板显示出来。
- 触发事件:因为需要在旋转结束以后,判断旋转的角度,给出具体的抽奖结果。但因在交互动事件中,没有旋转结束时事件;所以需要把交互写到奖品(jiangpin)动态面板上,通过触发事件来触发jiangpin动态面板相应的事件,产生抽奖的结果。(当前以把判断过程交互,写在动态面板载入时为例,所以触发的是奖品(jiangpin)元件的载入时事件)。抽奖判断结果交互见下
- 启用当前元件[开始抽奖]:这样才可以继续点击抽奖。
2. 奖品动态面板交互
把抽奖结果交互写在奖品(jiangpin)动态面板的任何事件都可,当前以写在载入时为例。
因为转盘上有4个奖项区间,每个区间90度范围;停止后,用最终旋转的度数除以360度,取余数,就能判断在转盘相应的位置,然后再输出相应奖项(设置面板状态)。
其中,需将else if,转换为if。
添加条件的具体设置见下:
表达式说明([[LVAR1.rotation%360]]):获取转盘(zhuanpan)旋转角度,取余360。得到最终停止的角度。
3. 【确认收下】按钮交互
鼠标单击时:隐藏奖品(jiangpin)动态面板。
五、整理
将jiangpin动态面板、提示(tishi)元件移入内容区域垂直剧中对齐;全选所以内容,将坐标改到(0,0)原点。
最后回到框架页面,预览一下整体效果。
Axure教程:转盘抽奖交互原型相关推荐
- axure 内部框架内容下滑_Axure教程:转盘抽奖交互原型
本文跟大家分享,如何使用axure制作转盘抽奖交互原型,不带登录流程. 效果如下: 抽奖流程 一.主要内容 (1)主要元件:动态面板 (2)重点:旋转交互.随机函数.触发动作. (3)难点:通过停止位 ...
- java后台怎么设置转盘抽奖_[Java教程]转盘抽奖
[Java教程]转盘抽奖 0 2015-09-09 12:00:06 html部分 css部分,由于做的这个转盘是手机端的,采用的响应式布局.turntableWap{ padding:1rem; b ...
- 如何用Axure快速制作APP交互原型
对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使 ...
- Axure手机移动端交互原型通用元件库
点此下载全部资源 这套全新的作品在移动端元件库v1.0的基础上优化而来的,新版本正式命名为:AxureUX手机移动端交互原型通用元件库.新作品不仅对旧版本中全部的元件进行了重新整理和设计,而且还整合了 ...
- 【Axure教程】随机抽奖原型
随着商业的进步与发展,在to c的系统里面,抽奖可以说是必备的功能. 所以我们今天来学习,在Axure里面做一个最一个既美观,而且复用性又强的抽奖原型,完成后效果如下图所示: [原型预览] https ...
- 交互原型设计软件 Axure RP Pro 5 中文教程
互联网的一些事 (2008.07.22 更新了Axure RP pro5 的交互部分,最下面) yixieshi 一直在用visio做交互原型和画pageflow,朋友推荐用Axure RP 4,试用 ...
- axure手机页面设计说明_使用Axure打造最佳的移动端交互原型教程(附元件库分享)...
一直以来Axure在对移动端原型设计方面的支持都不是十分理想,它没有像目前其它几类原型设计工具(Justinmind.墨刀等)一样提供移动端设备的模板和相关交互组件,但是Axure自由灵活的特性却同样 ...
- 【Axure教程】随机函数与抽签原型
随机函数是axure里面常用的函数,常用于验证码.抽签等案例.所以今天作者就教大家如何制作高保真的抽签原型.该原型主要使用中继器原件配合随机函数制作,通过填写中继器表格内容,或者复制excel表格内容 ...
- axure读取服务器文件,Axure教程|云盘案例原型:文件管理
今天和大家分享一个后台文件管理demo,包括图片管理.视频管理.音乐管理.文档管理和其它文件管理.这个demo也可以看做云盘.网盘的demo. 该原型交互效果齐全,使用也简单,只需要填写中继器表格即可 ...
最新文章
- 知识图谱(三)——知识体系构建和知识融合
- uniapp动态显示数组_uni-app学习:4、数据绑定(变量、数组、显示控制)
- boost::math::skew_normal用法的测试程序
- 谷歌开源3D舞蹈生成模型FACT,舞姿清奇!
- C语言指定初始化器解析及其应用
- Redis-字典(hash)基础
- 北邮人工智能学院刘勇教授实验室,招聘博士后研究人员
- Bootstrap table分页问题汇总
- Armchart Js版属性学习与总结
- django实现搜索功能
- shell 之while两种写法
- 杰里之用户可在 chargebox.h 添加自定义命令,命令号必须大于等于 0xC0,小于 0xFE【篇】
- 如何解决SpringBoot的单测启动慢的问题
- Vscode下载安装使用教程_Vscode搭建Python开发环境_Vscode常用插件
- exynos 4412
- 温室大棚冬季增温方案,适合自己的才最好
- 2019年熔化焊接与热切割作业安全生产模拟考试题库及答案
- Mac 不能打开文件夹xxx 因为您没有权限查看其内容
- 关于EXECryptor参数设置的问题
- 你不得不了解的三大动态域名解析软件选型要素
热门文章
- ASTERIX CAT021、CAT048标准和Python解码模块
- createJs 用到动画注意事项(动画师及程序员都需要了解下)
- 功能全面丰富优化 高德地图上线景区导览图及身边事功能
- MES系统如何实现质量管理?
- 台达PLC-EH3.铆压机,3轴,Z轴(SMC)电缸下降的距离用的是位置加扭矩模式
- 项目总结:vue.js2.5饿了么APP(5)主要组件实现 - 商品详情页部分
- 任务管理器没有菜单栏?
- 创业公司提前被收购 投资者怎样处理可转债股最明智
- Grasshopper如何安装Gha文件(电池插件)
- Android 设置输入法[软键盘]将底部布局推上去