微信小程序-转盘抽奖效果

最新推荐文章于 2024-09-13 05:12:07 发布

卖萌的大学士

最新推荐文章于 2024-09-13 05:12:07 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/Hr411422/article/details/105070617

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转盘抽奖效果代码块：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()
		});
	},
})