微信小程序-轉盤抽獎效果

轉盤抽獎效果代碼塊：https://developers.weixin.qq.com/s/iSkxf5mb7NgA

部分引用邏輯，共同學習。

希望有更多的同學可以互相交流 好與不好 多多評論 

結構

<view tips="轉盤抽獎" class="lotter_body_box boxS flexC">
    <view class="boxS lotter_body flexC view_scale">
        <image class="lotter_body_bj_1" src="https://starcdn.xintiao100.com/star-xcx/images/packageB_rotatingLottery_2_1.png" />
        <view class="lotter_body_content" animation="{{animationData}}">
            <image class="lotter_body_content_bj" src="https://starcdn.xintiao100.com/star-xcx/images/packageB_rotatingLottery_1_2.png" />
            <view wx:for="{{8}}" wx:key="index" class="lotter_body_content_view lotter_body_content_view_{{index+1}} flexC boxS">
                <view class="lotter_body_content_name flexC boxS">
                    名稱{{index+1}}
                </view>
                <view class="lotter_body_content_icon flexC boxS">
                    圖片
                </view>
            </view>
        </view>
        <image class="lotter_body_pointer" src="https://starcdn.xintiao100.com/star-xcx/images/packageB_rotatingLottery_3.png" />
    </view>
    <view tips="開始按鈕" class="boxS flexC lotter_start_but" catchtap="clickFn" data-cid="1">
        開始按鈕
    </view>
</view>

樣式

.boxS{box-sizing:border-box}
.flexC{display:flex;align-items:center;justify-content:center}
.flexl{display:flex;align-items:center;justify-content:flex-start}
.flexL{display:flex;align-items:center;justify-content:flex-start}
.flexR{display:flex;align-items:center;justify-content:flex-end}
.flexS{display:flex;align-items:center;justify-content:space-between}
.flexSA{display:flex;align-items:center;justify-content:space-around}
.flexCZ{display:flex;flex-direction:column;align-items:center}

.lotter_body_box{position:fixed;z-index:5;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4)}
.lotter_body{width:710rpx;height:710rpx;position:relative;margin-bottom:200rpx}
.lotter_body_bj_1{width:710rpx;height:710rpx;position:absolute;top:0;left:0}
.lotter_body_content{width:710rpx;height:710rpx;position:relative}
.lotter_body_content_bj{width:710rpx;height:710rpx;position:absolute;top:0;left:0}
@keyframes a{
0%{transform:rotate(0)}
100%{transform:rotate(2000deg)}
}
.lotter_body_content_view{width:231rpx;height:281rpx;position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.lotter_body_content_name{width:100%;height:50rpx;margin-top:14rpx;margin-bottom:40rpx}
.lotter_body_content_name image{width:95rpx;height:49rpx}
.lotter_body_content_icon{width:100%;height:50rpx}
.lotter_body_content_icon image{width:124rpx;height:100rpx}
.lotter_body_content_view_1{top:83rpx;left:291rpx;transform:rotate(25deg)}
.lotter_body_content_view_2{top:162rpx;left:372rpx;transform:rotate(70deg)}
.lotter_body_content_view_3{top:269rpx;left:367rpx;transform:rotate(115deg)}
.lotter_body_content_view_4{top:347rpx;left:293rpx;transform:rotate(160deg)}
.lotter_body_content_view_5{top:349rpx;left:190rpx;transform:rotate(205deg)}
.lotter_body_content_view_6{top:274rpx;left:111rpx;transform:rotate(250deg)}
.lotter_body_content_view_7{top:166rpx;left:106rpx;transform:rotate(295deg)}
.lotter_body_content_view_8{top:87rpx;left:180rpx;transform:rotate(340deg)}
.lotter_body_pointer{width:80rpx;height:114rpx;position:absolute;top:15rpx;left:318rpx}
.lotter_start_but{width:100%;height:400rpx;position:absolute;bottom:0rpx;left:0;background-color: cadetblue;}

JS邏輯

const app = getApp()
let animationRun = null; //構建的動畫
Page({
	data: {
        animationData: {}, //存儲動畫
	},
	onLoad: function () {

	},
	clickFn(e) {
		let target = e.currentTarget.dataset;
		switch (Number(target.cid)) {
			case 1: //點擊開始按鈕，開啓轉盤抽獎
				this.setTimeout_fn(6)
				break;
		}
	},
	// 轉盤動畫執行邏輯
	setTimeout_fn(awardIndex) {
		let runNum = 5; //旋轉週數
		let duration = 1500; //時長
		this.runDeg = this.runDeg || 0;
		this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 8)) + 22.5;
		//創建動畫
		if (!animationRun) {
			animationRun = wx.createAnimation({
				duration: duration,
				timingFunction: 'ease-in-out'
			})
		}
		animationRun.rotate(this.runDeg).step({ duration: duration, transformOrigin: "50%,50%", timingFunction: 'ease' });
		this.setData({
			animationData: animationRun.export()
		});
	},
})