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

Axure教程 | Axure8旋转功能应用——幸运大转盘

作者: @Axure原型设计工场 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含幸运大转盘,幸运大转盘图片,幸运大转盘抽奖活动,幸运大转盘制作,幸运大转盘活动方案等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

xingyundazhuanpan

大转盘活动在各种抽奖的活动场景中出现,游戏活动简单直观。

在axure8中,我们欣喜地看到提供了一些非常实现的动作,如旋转、设置大小、设置透明度等。

今天我们详细介绍一下旋转功能的应用,直接上在线效果图,先体验一下:

dzp

点击这里:幸运大转盘

大转盘活动常见于手机端活动,如APP客户端或者触屏版页面,因玩法简单,很受一些商家的欢迎。特别是在节假日,春节、元旦、情人节等等这些重要的节日,各种转盘活动层出不穷,商家也是变着花样来玩大转盘。现在一些线下的商超都会经常在门户搞一些这样的大转盘活动。

功能说明:

  1. 可以选择是转盘旋转还是指针旋转
  2. 转盘旋转时,指针复位;指针旋转时,转盘复位
  3. 旋转效果:先慢后快,最后再慢下来

一、素材准备

在网上找一张大转盘的图片(可以到花瓣网上找一找,类似图片很多),然后使用PS将图片分解成三个部分如下(这里就不说PS如何处理了),注意后面两个图片要保存PNG格式,带有透明部分背景的:

大转盘图片分解

二、导入图片到axure中

将三张图片分别拖入设计区域,按顺序排好,注意三个位置的,排列好的效果如下:

排列好的图片

为了能表现两种大转盘的转法,添加了两个单选框,分别以转盘转动,以及指针旋转的方式。

三、添加事件处理

给中间的抽奖按钮添加事件处理,因为有两种旋转方式,因此,需要在事件处理里添加判断:

旋转事件处理

事件说明:

1)设置了一个全局变量angle,代表要旋转的角度,设置变量值为360度范围内的随机值360*Math.random(),为了让转盘多转一会,设置了默认至少转20圈,即20*360=7200.

2)接着计算当前的奖品,也是定义了一个变量award

3)下一步就是根据当前选中的旋转方式,设置转盘按顺时针方向开始旋转,并添加了动画效果

设置动画效果

4)将指针位置旋转复位

选择指针旋转的方式情况下,和上面的情况类似,只是旋转的对象不同而已。

自从有了axure8的这些旋转、设置大小、设置透明度后,一些原型的效果做起来真是相对简单多了。

但是还有些功能没有在意料之中,就是在动作中设置蒙板效果(看不见的区域把它挡住),设置文字的大小、颜色等样式,期望新的版本中能进一步支持这些功能。

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

  • Axure教程 | Axure8旋转功能应用——幸运大转盘

相关文章

  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)
  • 2017-06-14Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-13Axure教程:怎样做低保真轨迹追踪与回放
  • 2017-06-14Axure7.0教程(六)math函数的使用(1)动态面板环状移动
  • 2017-06-14Axure基础教程—文本框用法
  • 2017-06-13Axure教程:商品详情页产品图效果展示
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-14Axure 原型 | 关于中继器的简单使用及应用的场景
  • 2017-06-13Axure教程:原型设计之播放控制条

文章分类

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

最近更新的内容

    • Axure教程:微信面对面建群原型设计
    • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
    • Axure教程|购物车商品增减删除练习
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure教程 | 原型中的商品图放大镜效果
    • 如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
    • Axure教程:如何使用Axure中继器元件?
    • Axure 8.0 实例 | 模拟一个上传图片的原型
    • Axure教程:微信聊天列表原型制作(一)
    • Axure7.0教程(七)math函数的使用(2)Math函数简介

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

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