html做转盘指针被压住,利用CSS变量指定抽奖大转盘指针位置

前言

有这样一种情况，某些CSS3动画的效果依赖于后端传过来的不定值数据，这时候，怎样将后端数据注入到CSS3动画里呢？

可以使用CSS3变量。

范例

image.png

点击匀速转按钮，指针会以自身中心点为旋转点，进行匀速旋转，而且无限旋转下去。

当点击渐停按钮，也就是模拟服务器发来了中奖数据，比如180°方向是二等奖，服务器认定你中了二等奖，那么指针会旋转几圈，最终渐停到180°方向。

整体从匀速旋转到渐停，视觉效果要自然。怎么写？

代码

.img {

margin: auto;

width: 200px;

height: 200px;

}

@keyframes rotate-linear {

from {

transform: rotate(0deg);

}

to {

transform: rotate(720deg);

}

}

.rotate-linear {

animation: rotate-linear .6s linear forwards infinite;

}

@keyframes rotate-stop {

from {

transform: rotate(0deg);

}

to {

transform: rotate(var(--target-deg));

}

}

.rotate-stop {

animation: rotate-stop 6s forwards ease-out;

}

匀速转 渐停

var flag = 0;

var timer = null;

document.getElementsByTagName('button')[0].onclick = function () {

document.getElementsByTagName('img')[0].classList.add('rotate-linear');

timer = setInterval(() => {

if (flag === 1) {

clearInterval(timer);

document.getElementsByTagName('img')[0].classList.remove('rotate-linear');

document.querySelector('body').style.setProperty('--target-deg', 3600 + 180 + 'deg');

document.getElementsByTagName('img')[0].classList.add('rotate-stop');

}

}, 600);

}

document.getElementsByTagName('button')[1].onclick = function () {

flag = 1;

}

CSS

一个匀速关键帧，0.6秒转一圈，一个渐停关键帧，用6秒时间从飞速旋转到渐停。

核心：transform: rotate(var(--target-deg));，尽管CSS中没有这个变量，但是没有关系，JS给body赋予这个变量就行了。

JS

点击按钮之后开始匀速旋转，每0.6秒查看一次flag有没有变化，点击渐停按钮后，flag会发生变化，此时去掉匀速旋转动画，加上渐停动画。

渐停动画的角度怎么定？假定180是服务器发回来的数据，意思是指针要停到180°位置。为什么要3600 + 180？因为渐停过程要6秒，所以要给足够的旋转角度，3600是我认为差不多的一个数字。