微信小程序大转盘 示例源码

【实例截图】

【核心代码】

//index.js
//获取应用实例
var app = getApp()
var cxt_arc;
var timer;
var n=1;
var timer;
var which = 1;//中奖项
var luck = ["5积分", "5金币", "10积分", "10金币", "谢谢参与", "20金币"];//定义奖项
Page({
  data: {
    animationData:{},//动画
    isclick: "start",//按钮事件
    hiddenModal:true,//弹框是否隐藏
    detail: "恭喜您获得" luck[which-1]//弹框内容
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  start: function (e) {
    var _this = this;
    n=1;
    this.setData({
      isclick: "stop"
    })
    reset.call(_this);
    timer = setInterval(function () {
      //开始旋转
      star.call(_this);
      //
      n  ;
    }
      , 300);
     //启动动画
    function star() {
      console.log("开始动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 300,
        timingFunction: "linear"
      });
      animation.rotate(360*n).step();
      this.setData({
        animationData: animation.export()
      })
    }
    //重置动画
    function reset() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 0,
        timingFunction: "linear"
      });
      animation.rotate(0).step();
      this.setData({
        animationData: animation.export()
      })
    }
 
  },
  stop: function (e) {
    var _this = this;
    this.setData({
      isclick:""
    })
    clearInterval(timer);
    timer = null;
    console.log("结束动画.....");
    sto.call(_this);
    function sto() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 1.4 * (2160 - (which - 1) * 60),
        timingFunction: "ease-out"
      });
      console.log(Math.random()*60); 
      animation.rotate(360 * n   (2160 - ((which-2) * 60) - 35 - (Math.random() * 50))).step();
      this.setData({
        animationData: animation.export()
      })
    }
 
    timer = setTimeout(function () {
      _this.setData({
        hiddenModal: false
      })
    }
      , 1.4 * (2160 - (which - 1) * 60 300));
 
  },
  listenerConfirm: function (e) {
      var _this = this;
      this.setData({
        hiddenModal:true,
        isclick: "start"
      })
      reset.call(_this);
      function reset() {
        console.log("重置动画.....")
        var animation = wx.createAnimation({
          transformOrigin: "50% 50%",
          duration: 0,
          timingFunction: "linear"
        });
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      }
    }
})


// //index.js
// //获取应用实例
// const app = getApp()
// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {},
//     hasUserInfo: false,
//     canIUse: wx.canIUse('button.open-type.getUserInfo')
//   },
//   //事件处理函数
//   bindViewTap: function() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad: function () {
//     if (app.globalData.userInfo) {
//       this.setData({
//         userInfo: app.globalData.userInfo,
//         hasUserInfo: true
//       })
//     } else if (this.data.canIUse){
//       // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
//       // 所以此处加入 callback 以防止这种情况
//       app.userInfoReadyCallback = res => {
//         this.setData({
//           userInfo: res.userInfo,
//           hasUserInfo: true
//         })
//       }
//     } else {
//       // 在没有 open-type=getUserInfo 版本的兼容处理
//       wx.getUserInfo({
//         success: res => {
//           app.globalData.userInfo = res.userInfo
//           this.setData({
//             userInfo: res.userInfo,
//             hasUserInfo: true
//           })
//         }
//       })
//     }
//   },
//   getUserInfo: function(e) {
//     console.log(e)
//     app.globalData.userInfo = e.detail.userInfo
//     this.setData({
//       userInfo: e.detail.userInfo,
//       hasUserInfo: true
//     })
//   }
// })