快好知 kuaihz

Axure原型设计:活动抽奖转盘

生活中在购物的时候经常会遇到一些可以抽奖的活动,很多时候都采用转盘抽奖的形式,抽中奖自然很开心啦,但是这个转盘原型是怎样做出来的呢,马上来看下吧!

先来个完整图,所有的布局结构,如下图:

步骤一:搭建组件

转盘”:一个300×300白底黑框的圆形(大小适中就可以),一条垂直线,一条45度垂直线,一条水平线,一条45度水平线,四条线组成8等份,放置在圆形的正中;每一等份放置一个文本标签,用于抽奖凭证,以上所有组件组合并命名为“转盘”。

抽奖按钮”与“抽奖指针”:一个100×100的灰底黑框圆形,中间文字为“抽奖”,命名为“抽奖按钮”,并放置于转盘的正上方;一个10×30的灰底黑框的三角形,命名为“抽奖指针”并放置于“抽奖按钮”正上方。

步骤二:为“抽奖按钮”添加鼠标点击时用例

只要一个用例就可以完成转盘抽奖效果啦

该用例动作:相对旋转转盘,角度为[[100000+Math.random()*360]],顺时针方向,锚点为中心,动画为线性,时间为2000毫秒(时间主要控制转的速度)。

这样就全部完成了,这个只用设置一个用例,所以相对会简单一些。

弄好赶紧看看预览效果:https://83ompk.axshare.com/index.html

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:转盘  转盘词条  原型  原型词条  抽奖  抽奖词条  活动  活动词条  设计  设计词条  
原型

 如何利用axure制作简易版的推...

我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的...(展开)

原型

 更快,更爽的制作原型-Axure...

尽管原型制作工具哪家强的论战在知乎愈演愈烈,但Axure无疑还是多数产品狗的主力工具。究其原因,Blink简单的总结为:在目前互联网环境下,Axure是更好的平...(展开)

原型

 Axure教程:如何自制横向滚动...

本文为我们介绍了自制横向滚动条的三个步骤,以及其中的注意要点。更多详细内容请见正文~一般如果我们需要使用横向滚动条,会直接使用动态面板提供的横向滚动条。由于横向...(展开)