微信小程序转盘大抽奖

有需要写个积分抽奖功能,大题思路就有两个,一呢转盘上的内容使用文字,自己调整位置和角度,二呢使用整个的图片,优缺点一目了然。

比较懒就借鉴了第二种:

首先在js中全局定义:

//微信提供的创建动画的方法

const animation = wx.createAnimation({

duration: 6000,

timingFunction: 'ease'

})

Page({

//初始化角度

data:{

扫描二维码关注公众号,回复: 6232912 查看本文章

deg:0,

animationData:{}

}

move() {

//转盘共有六分,每个60°,所以30,90正指着中间,这都是可调整的,也可以定义在data中让程序自个计算,现在的随机数是为了模拟后端返回的那个中奖号码,

let arr = [30,90,150,210,270,330]

let madom =Math.floor( Math.random()*6)

let index = arr[madom]

)

//从当前角度开始旋转,  并重置与0点位置     7*360设置的多转几圈

let rotateAngle = this.data.deg - (this.data.deg % 360) + index + 7 * 360

animation.rotate(rotateAngle).step()

this.setData({

animationData :animation.export(),

deg: rotateAngle

})

},

})

wxml部分

<view class="rotate_box">

<image class='w_img' src="https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png"

animation="{{animationData}}" />

<view class="startbox" bindtap="move">

<image class='start_img' src="https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png" />

</view>

</view>

wxss部分

.startbox{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%)

}

.start_img{

width: 120rpx;

height: 120rpx;

}

.w_img{

width: 500rpx;

height: 500rpx;

}

.rotate_box{

text-align: center;

position: relative;

}

猜你喜欢

转载自blog.csdn.net/MercedesCc/article/details/90077496