利用CSS变量指定抽奖大转盘指针位置

前言

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

可以使用CSS3变量。

范例

image.png

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

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

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

代码

  <style>
    .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;
    }
  </style>
  <img src="zhizhen.jpg" class="img">
  <button>匀速转</button> <button>渐停</button>
  <script>
    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;
    }
  </script>

CSS

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

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

JS

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

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

最后编辑于：2020.08.04 15:20:40