vue简单实现转盘抽奖

2023-07-04 14:16:08 80

本文实例为大家分享了vue简单实现转盘抽奖的具体代码，供大家参考，具体内容如下

1.0思路整理

转盘抽奖很常见，之前也没写过，现在有空来写写，分析如下：

1.1转盘旋转-----可以用transform的rotate来解决
1.2旋转动画-----transition过渡来处理
1.3停留目标位置及中奖提示？------通过控制旋转角度控制停留位置，中奖提示，考虑添加回调

1.1开始行动

上面的思考，我们知道了大概要实现的步骤，首先我们搞张图片

这个圆盘有10份，每一份360/10=36deg，假设要停留在第二个---->20金币，顺时针（含初始位置并计为1），即共需要旋转(2-1)*36=36，这样，我们可以得出，停留位置需要旋转的角度=(target-1)*36。

1.2中奖回调

上面的步骤，我们知道了如何控制到目标位置，那接下来就是事件通知，起初想的是，固定转动时间，然后开启定时器计时，很显然不靠谱，有没有什么可以在动画结束后就通知呢？transitionend，我找到了这个事件，可以监听元素动画结束事件，只不过有些兼容这个好办

/**
动画结束事件兼容
**/
whichTransitionEvent(){
letel=document.createElement('span'),
transitions={
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for(lettintransitions){
if(el.style[t]!==undefined){
returntransitions[t];
}
}
el=null;
}

2.0完整示例

控制转动位置和事件通知都找到方法了，接下来开干！

栗子：

完整代码






.img_rotate{
transform:rotate(0deg);
}
.round_box{
width:100%;
max-width:375px;
position:relative;
overflow:hidden;
img{
width:100%;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
.pointer{
width:5px;
height:90px;
background-color:#f40;
position:absolute;
top:-90px;
}
.pointer::before{
content:'';
width:0;
height:0;
border-top:15pxsolidtransparent;
border-right:15pxsolidtransparent;
border-bottom:15pxsolid#f40;
border-left:15pxsolidtransparent;
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
}
}
}

3.0tips

总体来说有几个点需要注意

1、动画开始前上锁

2、动画结束后通知，状态复位

/**
比如：
基数3圈reset360*3
停留位置第二个（2-1）*36=36
总共角度360*3+36
动画停止后，因为还要继续旋转，所以不可能把角度一直增加，因此需要复位
360*3+36其实可以考虑就转了36度，然后再增加需要转的角度
**/

3、继续旋转，因为我们计算是以30M流量为初始值的，所以在此旋转仍然需要以30M为起点，此时假设现在停留位置是300度，也就是说再转60度，也就回到了初始位置，本人也是按照这个思路进行复位的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue简单实现转盘抽奖

1.0思路整理

2.0完整示例

转盘抽奖

3.0tips

热门推荐

随机推荐