欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何优雅地做一个抽奖转盘

发布时间:2017:08:25 08:00:20 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1055个文字,预计阅读时间3分钟
导语
之前出了一个帖子如何让你的原型图动起来,很多童鞋问我抽奖转盘是怎么做的?今天抽空跟大家聊聊。

  之前出了一个帖子如何让你的原型图动起来,很多童鞋问我抽奖转盘是怎么做的?今天抽空跟大家聊聊。(视频第22秒见效果)这个是用Axure7.0做的,稍后介绍一下使用Axure 8.0和Principle来做转盘抽奖交互~(Principle交互效果)

  

如何优雅地做一个抽奖转盘

 

  本文目录如下:

  1. (Principle)使用交互软件做抽奖

  1.1 准备材料

  1.2 设置点击事件

  1.3 设置补间动画时间

  2. (Axure 7.0)使用动态面板做转盘抽奖效果

  2.1 准备材料

  2.1 设置动态面板

  2.3 设置事件

  3. (Axuer 8.0)使用自带的旋转功能做抽奖转盘效果

  3.1 准备材料

  3.2 添加事件

  1. (Principle)使用交互软件做抽奖

  1.1 准备材料

  对Principle不了解的童鞋可以在官网上了解一下,做交互设计个人比较推荐用这款(不过唯一不足的是,它只有Mac版本) http://principleux.com/

  准备材料(可以将Sketch上的文件直接复制到Principle中)简单粗暴,以JO+管家App为例,如下图

  

如何优雅地做一个抽奖转盘

 

  

如何优雅地做一个抽奖转盘

 

  1.2 设置点击事件

  

如何优雅地做一个抽奖转盘

 

  点击图上的”闪电箭头”选中Tap,拖拽至想跳转的页面(此处Tap为点击事件)。

  

如何优雅地做一个抽奖转盘

 

  然后画布上出现一个绿色的箭头,如图所示:

  

如何优雅地做一个抽奖转盘

 

  需求为点击“抽奖”按钮后,视图将会不停的切换,所以需要在第二张视图后设置一个事件“Auto”,点击“Auto”拖拽至下一张视图,这里重复的工作较多,就只截一张图了。

  

如何优雅地做一个抽奖转盘

 

  做完上述动作后,会发现点击抽奖,视图变化太快,交互不好,所以,下面需要设置补间动画的时间。

  1.3 设置补间动画时间

  点击“Animate”将下面的工作区显示出来

  

如何优雅地做一个抽奖转盘

 

  然后

  

如何优雅地做一个抽奖转盘

 

  点击箭头,将这个时间用鼠标拉长一点,设置为0.1秒的间隔即可,然后就可以预览了Principle交互效果

  2. (Axure 7.0)使用动态面板做转盘抽奖效果

  2.1 准备材料

  

如何优雅地做一个抽奖转盘

 

  拉一个圆形,和一根直线,多复制几根,调整元件的位置角度,搞定,如图

  

如何优雅地做一个抽奖转盘

 

  2.1 设置动态面板

  接下来做一个指针,拉一个动态面板,在动态面板中,添加若干状态,如图:

  

如何优雅地做一个抽奖转盘

 

  在这里选中其中一个状态,在状态页面中移动指针位置,按照旋转的方向,来9个,差不多了。

  

如何优雅地做一个抽奖转盘

 

  

如何优雅地做一个抽奖转盘

 

  

如何优雅地做一个抽奖转盘

 

  

如何优雅地做一个抽奖转盘

 

  此处省略….

  如上图,每个角度变换一下即可

  2.3 设置事件

  设置“抽奖”按钮事件,如图:

  

如何优雅地做一个抽奖转盘

 

  ok,已经搞定。

  此方法我在Axure 7.0时用的,更新了Axure到8.0 后 更加方便。下面介绍一下8.0版本的玩法。

  3. (Axuer 8.0)使用自带的旋转功能做抽奖转盘效果

  3.1 准备材料

  上述2个例子,一个是转动卡片的效果,,一个是转动箭头的效果,此处介绍哦一下转动转盘的效果,转盘动箭头不动,先准备一下材料。

  

如何优雅地做一个抽奖转盘

 

  指针固定不动即可,首先先将转盘上的元素“组合”起来取个名称“转盘”。

  然后在“点我”这个元件上添加事件。

  3.2 添加事件

  设置旋转,参数为:相对位置、角度为[[1000+Math.random()*360]]、方向为顺时针、锚点为中心、动画为线性、事件为1000毫秒。

  

如何优雅地做一个抽奖转盘

 

  搞定,预览即可。

  看到这里Axure7.0基本上可以卸载了,赶紧升级吧~

  若要做复杂一点的交互,推荐使用Principle,比AE入手快~又简单~~加油

  作者:Bass

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:平面设计中色彩搭配设计

下一篇:设计沉思录:58便当M端页面改版

  • 18893 文章总数
  • 2303380访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信