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

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

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

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

步骤一:搭建组件

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

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

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

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

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

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

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

 

本文由 @ 方子 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 旋转有点抖呢,咋解决呢

    回复
  2. 如能让转盘慢慢的停下来 而不是突然停下来

    回复
  3. 回复
  4. 你这个预览地址是你本地的预览地址,别人是看不到的2333

    回复
    1. 当时我就震惊了 ;-)

      回复
    2. 震惊

      回复
    3. 是吗 ;-) 我本来想放发布的那个网址的,发不出错了,就用了这个,我自己是可以看到的,但是不知道大家看不到,谢谢提醒

      回复