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

TesterHome 发布于2019-08-23 13:00 / 3350人阅读

摘要：公司说要做个活动，迎接双十一。。大概的思路就是页面有个转盘，然后转盘是一个背景。转盘的指针也是用图片。如下图然后第二步，翻查小程序文档。最后根据小程序文档说，这个参数需要输出。为真的时候运行正常旋转的方法，为假的时候。

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

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

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

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

记住，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.再去旋转新的度数。

GPU云服务器云服务器 php大转盘抽奖代码大转盘抽奖活动大转盘抽奖算法小程序的功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99152.html

一起抽圣诞的惊喜盒子吧！（小程序起手式）

摘要：平安夜圣诞节总是让人联想到平安果圣诞袜圣诞树圣诞老人圣诞橱窗等等让人欢喜满满期望满满的词语。礼物祝福笑脸惊喜温暖都伴随而来，最近课程轻松，便想着做一个有关圣诞的小程序，来当作对小程序的初步学习。 Christmas is coming! 平安夜/圣诞节总是让人联想到平安果、圣诞袜、圣诞树、圣诞老人、圣诞橱窗等等让人欢喜满满、期望满满的词语。礼物、祝福、笑脸、惊喜、温暖都伴随而来，最...

codecook 2019-08-21 18:20 评论0 收藏0
转盘抽奖脚本自己撸

摘要：效果需求很多场景都需要做各种活动，抽奖最是司空见惯了，跑马灯的，转盘的，下面先花几分钟撸出一个转盘的吧，当然网上至少有一打的可供参考。但是我们只差一个定时器循环了接下里实现这个主循环，不断更新值就可以了。 demo 效果需求很多场景都需要做各种活动，抽奖最是司空见惯了，跑马灯的，转盘的，下面先花几分钟撸出一个转盘的吧，当然网上至少有一打的 demo 可供参考。真的只需要一点点时间而...

赵春朋 2019-08-23 11:01 评论0 收藏0
微信小程序营销组件wxapp-market

摘要：是基于微信小程序的营销组件，用于快速开发营销玩法类小程序项目页面，包含大转盘刮刮乐老虎机水果机九宫格翻纸牌摇一摇手势解锁等多种营销组件。 wxapp-market 是基于微信小程序的营销组件，用于快速开发营销玩法类小程序项目页面，包含大转盘、刮刮乐、老虎机、水果机、九宫格翻纸牌、摇一摇、手势解锁等多种营销组件。使用 1.拉取仓库 git clone git@github.com:o2...

william 2019-08-23 12:25 评论0 收藏0
jQuery带次数带弹窗的大转盘抽奖代码（支持h5）

摘要：您已拥有次抽奖机会，点击立刻抽奖开始抽奖初始次数，由后台传入为随机出来的结果，根据概率后的结果如果在执行就退出标志为在执行先判断是否登录未登录则执行下面的函数请先登录登录了就执行下面当抽奖次数为的时候执行没有次数了还有次 showImg(https://segmentfault.com/img/bVbqAdu); showImg(https://segmentfault.com/img...

lemon 2019-08-02 16:10 评论0 收藏0