1

Хочу сделать анимацию, как в рулетке (или как вращающий барабан, или как в казино), то есть анимация должна быстро начинаться и постепенно-постепенно завершаться. Пробовал через cubic-bezier, результат не удовлетворил, - анимация получалась дерганной... попробовал через чистый js, рекурсией, но нифига не соответствует моим представлениям:

var timer = null;
var sec = 1000 / 80;
var target = document.getElementById('box');
var dis = target.offsetLeft;

document.onclick = function(){

    function anim(t){
        timer = setInterval(function(){

            dis += 1;

            target.style.left = dis + 'px';

            if(target.offsetLeft >= 100) {
                clearInterval(timer);
                anim(sec+=10)
            }

       }, t);
   }

    anim(sec);

}
#box {
    background: red;
    color: #fff;
    width: 200px;
    padding: 10px 0;
    position: absolute;
}
<div id="box">OK</div>

Скажите, как правильно реализовать такую анимацию?

2 ответа 2

0

Примерно так, но я бы использовал другую функцию инкремента. И условие остановки нужно задать. У вас одновременно использовалась и рекурсия, и интервал. Что порождало неадекватное поведение.

Если что не понятно - спрашивайте

var sec = 20;
var target = document.getElementById('box');
var dis = target.offsetLeft;

document.onclick = function(){

    function anim(t){
        setTimeout(function(){
            dis += 1;

            target.style.left = dis + 'px';

            anim(sec*=1.05)
       }, t);
   }

    anim(sec);

}
#box {
    background: red;
    color: #fff;
    width: 200px;
    padding: 10px 0;
    position: absolute;
}
<div id="box">OK</div>

0
console.clear();
const anim = document.getElementById('anim');

anim.onclick = () => {
  let velocity = 10;
  let path = 0;
  let acceleration = 0.11;

  let timer = setInterval(() => {
      path += velocity;
      velocity -= acceleration;

      anim.style.left = path + 'px';

      if(velocity <= 0) clearInterval(timer);
  }, 35);
};

JSBIN

Мы перемещаем элемент, исходя из его скорости (velocity), которая уменьшается со временем.

В итоге, создается ощущение замедления.

Время, через которое будет вызываться анимация можно настроить, для более плавной картинки ( 30-50 самое то )

1
  • Спасибо! Понял механизм. Я неправильно все делал. А как быть, если координата x фиксирована? То есть, например, элемент нужно переместить на 300px, используя эту анимацию?
    – Ghost
    5 дек 2016 в 17:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.