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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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