评论

小程序转盘功能实现

小程序转盘

实现方法: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(),
    });
  },

最后一次编辑于  2020-09-24  
点赞 1
收藏
评论

3 个评论

  • admin
    admin
    2020-09-29

    已阅

    2020-09-29
    赞同
    回复
  • Admin ²º²⁴
    Admin ²º²⁴
    2020-09-25

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

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

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

    2020-09-25
    赞同
    回复 2
    • Lv.42
      Lv.42
      2020-09-25
      标题起的有歧义了,应该是转盘动画的实现,主要想分享这个简单的动画实现方法,结果发现两年前就有人有相同的思路了https://segmentfault.com/a/1190000016964831
      2020-09-25
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-09-25回复Lv.42
      这个没事,别人是别人的,你是你的想法。不care,不冲突
      2020-09-25
      回复
  • 谋谋谋
    谋谋谋
    2020-09-24

    已阅

    2020-09-24
    赞同
    回复
登录 后发表内容