Колесо тотализаторов HTML5 — очень простая версия CSS3

HTML

В Интернете есть много кодов и примеров о проигрывателе лотереи, некоторые используют JavaScript для управления анимацией, некоторые используют Canvas для достижения, у них разные идеи, в этой статье будет представлен способ использования CSS3 для достижения эффекта анимации проигрывателя, очень просто, нужно всего несколько строк кода.

Демонстрация эффекта

демонстрационный адрес

основная идея

Используя переход CSS3 (эффект перехода), учитывая элемент, который необходимо повернуть, установите конечный угол свойства поворота преобразования и добавьте функцию времени перехода для управления скоростью вращения, включая начальную скорость и конечную скорость. выглядит следующим образом (префикс браузера Вы можете добавить сами):

#pointer {
  transition: transform 6.5s;
  transition-timing-function: ease-in-out;
}

Таким образом, после того, как задан конечный угол, элемент будет вращаться, а конечный угол может свободно управлять количеством оборотов вращения.Например, конечный угол равен angelEnd, то есть число оборотовm=angelEnd/360И округляя, первые несколько кругов полные 360 без специальной обработки, ключ в том, что угол последнего круга определяет результат лотереи, код выглядит следующим образом:

    let base = 2160; //先转满360×6圈
    let result = getRandom(-30,330); // 最后一圈角度，获取-30到330的随机数
    let angelEnd = -(base+result)// 结束角度数，负数代表逆时针旋转
    $("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 设置CSS

Оценка результата лотереи

Слушая вращение элементаtransitionendПолучить событие окончания анимации.В этом обратном вызове можно судить о результате розыгрыша, и вычислять его на основе данных о призе и диапазоне углов приза.Код такой:

    gifts = {
      "1":{
          angleStart : -30,
          angleEnd : 30,
          tips : "恭喜您获得理财金2000元~~"
      },
      "2":{
          angleStart : 31,
          angleEnd : 90,
          tips : "恭喜您获得理财金1000元~~"
      },
      "3":{
          angleStart : 91,
          angleEnd : 150,
          tips : "很遗憾没有能中奖，再试一次吧~"
      },
      "4":{
          angleStart : 151,
          angleEnd : 210,
          tips : "恭喜您抽中京东E卡一张~"
      },
      "5":{
          angleStart : 211,
          angleEnd : 270,
          tips : "恭喜您获得理财金5200元~~"
      },
      "6":{
          angleStart : 271,
          angleEnd : 330,
          tips : "很遗憾没有能中奖，再试一次吧~"
      }
      
    $("#pointer").on('transitionend',function(){
        for (var key in gifts) {
          // 最后一圈的角度落在哪个奖品区间
          if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) {
            // 得到奖品的key值
            alert(options.gifts[key].tips);
          }
        }
    })

Установите назначенные призы

Каждая лотерейная программа может зарезервировать внутренний интерфейс, и проигрыватель не является исключением.Установив угол последнего круга, можно заранее установить призовой результат.Код выглядит следующим образом:

let _key = null; // 内定奖品id

if (_key) {
  result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd)
}

На данный момент завершена простая программа лотереи с поворотным столом.Согласно приведенным выше идеям, можно вращать не только указатель, но и диск.Вы можете испытать демонстрацию, чтобы увидеть конкретный эффект.

Полный код проектаGithub, полезно дать звезду!

Категории