快好知 kuaihz

Axure 8.0小技巧:快速制作简单转盘

轮盘抽奖在各种App和网页的活动页面中经常使用,如何才能方便的设计出抽奖页面呢?

原型分析

流程分析:点击“抽奖”按钮后,轮盘转动足够多圈数后停下

必备元素分析:指针图片、轮盘图片(笔者是用Axure自带的椭圆形和钢笔工具随手画的)、抽奖按钮。

实现步骤

元件的层次

指针在顶层、轮盘在底层,通过”右击图片->顺序”来改变层次。

触发旋转事件

一句话描述抽奖过程:点击按钮后,什么图片围绕什么点 平滑地用多长时间转动了多少角度

注:动画可以自行选择,只要不选”无”就能有过程动画。

角度的设置

既要转够足够圈数,又要有随机性。

足够圈数:我们假设5圈,那就是360*5=1800°;

随机性:我们选择使用”Math.random()”函数来产生随机值(该函数产生0到1之间的随机数),所以我们用“360*Math.random()”来满足随机部分(0~360°)。

下面我们设置角度函数:  [[1800+360*Math.random()]]

按下”F5″来鉴定下自己的血统吧=w=。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:转盘  转盘词条  快速  快速词条  简单  简单词条  技巧  技巧词条  制作  制作词条  
原型

 Axure RP 8新功能和优化...

我结合我的设计工作,来讲一下Axure8改进和新增功能:1. 画板区:我的电脑是13寸的,画板区希望越大越好,因些我把电脑分辨率调到最小,新的8整体界...(展开)

原型

 Axure8.0教程:“百度一下...

百度作为最大的中文搜索引擎,在某种程度上,有点学习google的简约至上的原则,但是给人的感觉还是不够彻底。今天,使用Axure 8.0花了一下午的时间基本重现...(展开)