Axure学习笔记（十四）-抽奖转盘效果的实现（利用旋转事件）

最新推荐文章于 2023-11-14 20:37:58 发布
最新推荐文章于 2023-11-14 20:37:58 发布
阅读量591 收藏
点赞数
分类专栏： Axure 文章标签： axure 产品设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48911487/article/details/119818398
版权

注：本篇笔记适用环境：win10+Axure RP 8

1.先看一下随机函数random

 

2.在底层图片上设置点击事件（转盘图：先放置一个转盘的图片在底层，上方在放一指针的图片）

注：这个图里面截错了，选中的应该是下面那个转盘图片，不是上面这个图片

其中旋转角度的函数为：

 

最低0.47元/天 解锁文章
雨季袭来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure：转盘抽奖交互原型
weixin_41182796的博客
12-18 888
大家都知道，每次在填写问卷调查结束，为了能够留存客户的停留时间或是某个活动要做准备时，可能都要进行一次转盘的抽奖活动，那么我们怎么用原型制作呢。下面就是如何使用axure制作转盘抽奖的交互原型，想要登录注册流程的，坐等我下期出哦~ 效果图如下 抽奖流程 主要内容 所需主要原件：动态面板、按钮、文本框（将内容修改为3，不为5哈，不想再改图片了呢）、提示框等。 交互： （1） 进入...
axure转盘抽奖.
weixin_50544428的博客
09-19 262
1.首先打开Axure,拉出相应的素材，并把椭圆形和三角形合并。 2.然后放在素材正中间位置并对他进行改变，点击的时候让它动起来。 3.找到属性里的鼠标点击时找到旋转，然后找到椭圆形和三角形的组合并设置旋转、角度、反向、锚点、动画和时间。 4.然后就可以在预览里查看效果。 这是我所学到的Axure引用步骤，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔。 ...
Axure教程：转盘抽奖交互原型
weixin_42277536的博客
10-29 1070
效果如下： 抽奖流程 一、主要内容 （1）主要元件：动态面板 （2）重点：旋转交互、随机函数、触发动作。 （3）难点：通过停止位置判断抽奖结果 （4）涉及函数及解释： target：目标元件 text：元件文本 Math.random()：返回0-1之间的一个数字 rotation：元件旋转角度 二、原型准备：主要包含两个页面 （1）框架页面 包含手机边框+内联框架...
axure大转盘元件库
06-20
axure元件，之间载入即用。模拟大转盘抽奖
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
rp原型聚集地
08-21 652
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘 原型演示及下载地址：https://www.pmdaniu.com/storage/121701/dd435fc88672012b0972ead60eb982bd-30328/start.html#g=1&p=%E4%B 作品图片展示：三种圆形转盘抽奖样式 作品图片展示：圆形转盘抽奖+中奖动态样式 作品图片展示：方形九宫格转盘抽..
Axure Cloud for Business On-Premise本地服务器服务端
10-11
先下载文件，然后参照 安装部署说明：https://blog.csdn.net/aoyesky/article/details/127267755 注意：没有服务器也可以公司内⽹找⼀台不⽤的win7以上电脑就可以
axure-rp-extension-for-ch-0.6.3.zip
06-13
用于在谷歌或其他 Chrome 内核浏览器打开 Axure RP 发布的 HTML 文件
3D模型--百行代码实现旋转立体魔方
01-31
最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。...所以，建立矩形类如下pointA,pointB,pointC,pointD是小矩形的四个顶点，angleX,angl
Axure-RP-Extension-for-Chrome插件包及教程.rar
07-08
谷歌浏览器的RP产品原型浏览插件， 内附Axure-RP-Extension-for-Chrome_v0.6.3插件压缩包， 以及插件安装的详细文档， 已有多位用户根据文档安装使用，安全可靠，方便简介
Axure学习笔记.doc
04-12
Axure学习笔记.doc
Axure设计的大转盘案例
07-23
用Axure设计的大转盘：按照现在流行的产品设计软件，制作的大转盘，然后是采用过滤器和一些事件处理完成的。
鼠标悬停动画效果九宫格导航页面
12-28
鼠标悬停动画效果九宫格导航页面
Axure旋转 6.28
A_tuohai的博客
06-28 421
1、 打开Axure RP8 2、 设置背景颜色为#415C5C 3、 将素材拖动到Axure，并摆放对应位置 4、 在地球图片添加用例，选择载入时，设置旋转为相对位置，角度为720°，方向为顺时针，锚点为中心，动作选择线性，时间10000毫秒 5、 将这设置好了之后，将其复制到<旋转时>，千万不能设置错误，否则跟效果会有所偏差 6、 将地球设置好了之后，就可以设置飞机了，在<载入时>设置飞机这张图片，设置旋转为相对位置，角度为360°，方向为顺时针，锚点设置成中心，锚点偏移
Axure RP9教程 抽奖小程序
热门推荐
jun118166的博客
06-22 1万+
Axure RP9教程 用动态面板实现一个简单的抽奖转盘效果一、说明二、案例演示三、操作说明 一、说明 抽奖小程序，在移动端APP比较常见，通常在签到抽奖，比较常见，如何是实现这样一个功能，接下来的案例会一一给大家介绍。 二、案例演示 案例链接 三、操作说明 通过上述案例，我们解决解决两个问题，外部的环形如何绘制，指针转盘效果如何实现。 第一步绘制一个环形 首先我们将一个圆形拖到画布中，右键选择形状，将圆形更改为扇形 通过选择扇形起始点，更改扇形大小 通过上述操作绘制10个扇形； 最后将10个扇形
Axure RP从入门到精通（三十七）案例（卡片向不同方向旋转）
人不风流枉少年
06-25 796
制作一个卡片并转为动态面板，命名为卡片，为State1命名为列表。 制作State2内容，为State2命名为详情。 在动态面板State1列表的左侧添加一个热区并新增一个鼠标单击事件。 同理我们需要在动态面板列表页面的右侧、顶部、底部都放置一个热区并为热区添加单击事件。 顶部：向上翻转 底部：向下翻转 以上示例是点击不同的边缘进入详情页，进入详情页还要重新出来到列表页，所以也要为详情页增加热区。不同的是此次翻转效果是相反的，点击上方要从下方翻转，点击左方要从右方翻转。 示..
MPAndroidChart饼图及折线图
dream_summer的博客
09-08 1320
Android图表工具 MPAndroidChart 源码：https://github.com/PhilJay/MPAndroidChart 下载：https://github.com/PhilJay/MPAndroidChart/releases 教程：Android图表控件MPAndroidChart的简单介绍（MPAndroidChart3.0） MPAndroidChart折线图/柱状图/饼形图的使用 Android图表（最新版）----柱状图和饼状图 ...
【Axure教程】随机抽奖原型
mushe93的博客
11-16 855
今天教大家制作随机抽奖的原型
Axure基础详解十九：转盘抽奖效果
太空背包客的博客
11-13 600
转盘抽奖效果
Axure基础详解二十：中继器随机抽奖效果
最新发布
太空背包客的博客
11-14 441
中继器随机抽奖效果
axure抽奖转盘制作
05-19
Axure是一款原型设计工具，可以通过Axure制作一个抽奖转盘。以下是一个简单的步骤： 1. 打开Axure，创建一个新页面。 2. 在页面上添加一个圆形形状，作为转盘的底部。 3. 添加一个箭头形状，作为指针。 4. 在转盘上添加中奖信息，可以通过文本框或图片来展示。 5. 在交互面板中，添加一个旋转动作，并将旋转的角度设置为随机值。 6. 添加一个按钮，作为抽奖按钮，在按钮的交互面板中，与转盘的旋转动作关联。 7. 在交互面板中添加一个判断条件，当转盘停止时，弹出一个提示框，展示中奖信息。 以上是一个简单的抽奖转盘制作步骤，你可以根据需要进行修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值