Axure RP9教程 抽奖小程序

Axure RP9教程 用动态面板实现一个简单的抽奖转盘效果

一、说明

抽奖小程序,在移动端APP比较常见,通常在签到抽奖,比较常见,如何是实现这样一个功能,接下来的案例会一一给大家介绍。

二、案例演示

Axure RP9教程 抽奖小程序
案例链接

三、操作说明

通过上述案例,我们解决解决两个问题,外部的环形如何绘制,指针转盘效果如何实现。

  1. 第一步绘制一个环形
  2. 首先我们将一个圆形拖到画布中,右键选择形状,将圆形更改为扇形
    Axure RP9教程 抽奖小程序
  3. 通过选择扇形起始点,更改扇形大小
    Axure RP9教程 抽奖小程序
  4. 通过上述操作绘制10个扇形;
    Axure RP9教程 抽奖小程序
  5. 最后将10个扇形拼接成一个圆形
    Axure RP9教程 抽奖小程序
  6. 在圆形上再绘制一个圆形,半径小于原圆形,就形成了一个环形效果图;
    Axure RP9教程 抽奖小程序
  7. 在绘制一个抽奖的指针,首先添加一个圆形,再添加一个三角形
    Axure RP9教程 抽奖小程序
  8. 将圆形及三角形组合,再创建动态面板
  9. 给动态面板添加鼠标单击时交互事件,同步添加旋转动作
    Axure RP9教程 抽奖小程序
  10. 编辑函数值:[[Math.random()*1080+1080]]
    Axure RP9教程 抽奖小程序
    Axure RP9教程 抽奖小程序
    Axure RP9教程 抽奖小程序
    最终打工告成!

案例中用到一个知识点:动态面板旋转