转盘抽奖角度计算 前端

前端转盘抽奖计算 基于vue2.0版本 核心内容并没有多少，思想适用所有框架

理想效果

以转盘最上方为选中奖项

解决思路

1、选项数组 = 我们知道共有多少种结果放入数组中
2、单份角度= 360/选项数组.length；一个圆有360° 我们根据所有选项总和 把这个圆形拆分为均等份
3、 旋转角度 = 负的（每份角度*（目标元素下标+1））
有些同学会出现旋转完的角度正好处于目标元素的分界线 这种情况需要我们补偿一些角度让其正好选中正中间
补偿角度=单份角度/2；
及 旋转角度= 负的（每份角度*（目标元素下标+1）- 补偿角度）

如果直接转到目标结果的话会显得有些生硬 推荐随机转几圈后停到目标元素

成功示例

<template>
	<view class="content">
		<image class="img" :style="turn" :src="require('../../components/s-dial_bg.png')" mode=""></image>
		<view class="">抽到第几个奖<input type="number" :value="value" /></view>
		<button @click="goSpin">抽奖</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				turn:{},
			}
		},
		onLoad() {
			
			
		},
		methods: {
			goSpin(){
				let arr=[10,20,30,50,80,200];
				let everyDeg=360/arr.length;//每份角度
				let makeDeg=everyDeg/2;//补偿角度 转到中间
				// 旋转角度= 负的（每份角度*（目标元素下标+1）- 补偿角度）
				
				let randomCircle=( Math.floor(Math.random()*(8-3))+3 )*360;//3-7随机基础圈数*角度
				let deg= -(everyDeg*this.value-makeDeg+randomCircle);
				this.turn=`transform:rotate(${deg}deg) translateZ(0);-webkit-transform:rotate(${deg}deg) translateZ(0);transition:all 2.5s ease-in-out;`
			}
		}
	}
</script>

<style>
.img{
	width: 500rpx;
	height: 500rpx;
}
</style>