超简单小程序转盘实现

实现原理：Animation.rotate()

相关文档链接https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

代码

.wxml

<!-- 转盘 -->
<image animation="{{cs_an}}" src="https://wx1.sbimg.cn/2020/09/24/GzvuO.png" class="pan_img" />
<!-- 操作 -->
<button bindtap="kai">开始抽奖</button>
<button bindtap="zhi">重置</button>

.wxss

/* 转盘图片 */
.pan_img {
  width: 750rpx;
  height: 750rpx;
}

.js

data: {
    cs_an: {},
},

kai: function () {
    console.log("开始");
    var animation = wx.createAnimation({
      duration: 5000, // 转圈时间
      timingFunction: "ease",
    });
    // 转25圈+60°
    animation.rotate(360 * 25 + 60).step();

    this.setData({
      cs_an: animation.export(),
    });
  },

  zhi: function () {
    console.log("重置");
    var animation = wx.createAnimation({
      duration: 0,
    });
    animation.rotate(0).step();
    this.setData({
      cs_an: animation.export(),
    });
  },

效果图

主要实现了转圈效果，具体可按照需求更改代码