小程序转盘功能实现
发布于 4 年前 作者 guiying51 4774 次浏览 来自 分享

实现方法:Animation.rotate()

代码示例

.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

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(),
    });
  },

2 回复

感谢分享。建议做个代码片段更爽。

很好奇,你这样转的话那不是每次都转到同一个位置,中的同一个奖,居然没用随机功能?也没有中奖算法。

不过这个基本的转盘结合小程序的动画功能确实转起来了,效果还算入门了。

回到顶部