• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:原型设计之转盘抽奖

Axure教程:原型设计之转盘抽奖

作者: @维度 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure原型图教程,axure app原型教程,axure原型设计教程,axure制作app原型教程,原型工具axure教程等相关知识, @维度 希望在学习及工作中可以帮助到您

转盘抽奖一般会出现在一些金融类网站中,通过转盘抽奖来激活用户浏览行为,后来又多用于微信的公众号运营中,通过转盘抽奖来宣传活动,从而达到吸粉的目的。这一章就教大家如何使用axure原型工具制作转盘抽奖原型。

第一步:拖拉摆放好相关控件

1、转盘:300X300的白底黑框圆形,一条垂直线、一条45度垂直线、一条水平线、一条45度水平线,四线交叉组合居中放于白底黑框圆形上方,将白底黑框圆形等分切割成八份,每一份放一个文本标签,文本标签的文字角度可通过键盘微调适当即可,文本标签的文字有三个分别是“一等奖”,“二等奖”和“三等奖”,其余的皆为“谢谢惠顾”,将以上元件组合并命名为“转盘”。

2、抽奖按钮:100X100的灰底黑框圆形,中间文字为“抽奖”,将此元件命名为“抽奖按钮”,并居中置于“转盘”上方。

3、抽奖指针:10X32的灰底黑框三角形,将此元件命名为“抽奖指针”,并置于“抽奖按钮”的正上方。

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

此用例中只添加一个动作,即:相对旋转转盘,角度为[[100000+Math.random()*360]],方向为顺时针,锚点为中心,动画为线性,时间为2000毫秒。

好了,预览并点击“抽奖按钮”即可以看到转盘抽奖效果。

效果图:axure原型设计之转盘抽奖

附件下载:转盘抽奖rp文件

您可能想查找下面的文章:

  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure教程:原型设计之转盘抽奖
  • Axure教程:原型设计之水泡导航栏
  • Axure教程:原型设计之播放控制条
  • Axure教程:微信面对面建群原型设计
  • Axure教程:原型设计之弹幕

相关文章

  • 2017-06-13Axure教程:原型设计之弹幕
  • 2017-06-14高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 2017-06-13Axure实例:顶栏和侧边栏的固定和窗口自适应
  • 2017-06-14Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
  • 2017-06-14Axure操刀微信H5页面之《加密情书》的交互设计
  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-14Axure教程 | 漂亮的不像实力派的锤子时钟
  • 2017-06-14Axure 7高保真还原Web首页布局和交互教程
  • 2017-06-14Axure7.0教程(七)math函数的使用(2)Math函数简介
  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?
    • Axure教程 | Axure8旋转功能应用——幸运大转盘
    • Axure教程:原型设计之水泡导航栏
    • Axure中继器的基本使用:实现一个简易的人员添加、删除模块
    • Axure教程:中继器如何切换标记状态?
    • Axure教程:商品详情页产品图效果展示
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • axure实现网站的通用注册原型设计
    • Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有