小程序制作大转盘抽奖功能,巨简约的代码!!

2018-11-09 admin

公司说要做个活动,迎接双十一。。然后最怕的事情出现了,就是做转盘。以前没怎么写过动画,特别怕这些东西。。。好了,废话不说。直入正题。


首先,先构图。大概的思路就是页面有个转盘,然后转盘是一个背景。转盘的指针也是用图片。如下图:

clipboard.png

然后第二步,翻查小程序文档。发现有个wx.createAnimation(创建动画的参数),参数如下。

clipboard.png

好了,开始js和界面结合一起用了。

clipboard.png 记住,animation这个属性放在你想添加动画的view。至于animationData等下解释.

let that
const app = getApp()
Page({
  data: {
    animationData:{},//初始动画数据
    Prize:[45,90,135]//45度安慰奖,90度二等奖,135度一等奖
  },
  start() {
    let animation = wx.createAnimation({    //创建动画实例
      duration: 3000,
      timingFunction:'ease'
    })
      animation.rotate(360*3+Prize[i]).step()  //因为公司项目转盘分为8个区域,所以每个区域就是45°了.先设置必定转3圈,然后加上后台返回来的标识,假设这个是安慰奖,随意,这个旋转最后就是到45度这个位置。
      that.setData({
        animationData: animation.export()//最后根据小程序文档说,这个参数需要export输出。
      })

  },
  onLoad() {
    that = this
  },
  onShow() {
  }
})

好了,大功告成,试一试吧。。。 特别说明一些坑位,动画只运行一次。怎么点击start方法动画都不会再重运行。。解决方法,在data里面定义个isTrue布尔值,判断该值。为真的时候运行正常旋转的方法,为假的时候。需要将旋转的度数变为0.再去旋转新的度数。

原文链接:https://segmentfault.com/a/1190000016964831

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45000.html

文章标题:小程序制作大转盘抽奖功能,巨简约的代码!!

相关文章
网站变灰代码
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: g...
2015-11-12
HTML5手机游戏大爆发
HTML5技术的应用从未像今天如此火爆,从手游领域蔓延至整个移动互联网,从创业公司掘金到巨头深度介入。HTML5正推动移动互联网发展新趋势的诞生,引领未来投资的风向标,围绕HTML5创业的黄金时代即将到来。 追根溯源,HTML5手游之所以备...
2015-11-12
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
js实现文字向上轮播功能
话不多说,请看实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
2017-03-10
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> &lt...
2017-03-06
2014年十大编程语言
近日,IEEE Spectrum推出了一个最流行的编程语言排行榜。排行榜筛选了12项指标,综合了10个来源(含 IEEE Xplore、Google、GitHub)的数据,最终评选出了下面这个排行榜(满分100,得分越高排名越靠前),其中的...
2015-11-11
回到顶部