не получается сделать анимацию в js

plnkr.co/edit/SsqTsJBTOD8dMG33?p=preview&preview

нужно сделать вот такую анимацию(зеленую) из той которая дана ниже нужно сделать такую анимацию

из вот такой


Ответы (1 шт):

Автор решения: De.Minov

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

// formula     http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: beginning value,
// c: change in value,
// d: duration
function easeInOutQuad(x, t, b, c, d) {
    if ((t /= d / 2) < 1) {
        return c / 2 * t * t + b;
    } else {
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }
}

function move() {
    //position += increment;
    time += 1 / fps;
    position = easeInOutQuad(time * 100 / duration, time, start, finish, duration);

    if (position >= finish) {
        clearInterval(handler);
        box.style.left = finish + "px";
        return;
    }
    box.style.left = position + "px";
}

var box = document.getElementById("box"),
    fps = 60,
    duration = 2, // seconds
    start = 0, // pixel
    finish = window.innerWidth - box.clientWidth,
    distance = finish - start,
    increment = distance / (duration * fps),
    position = start,
    time = 0,
    handler = setInterval(move, 1000 / fps);
body {
  background: gainsboro;
}
#box {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  position: absolute;
  left: 0;
}
<div id="box"></div>

Перевод ответа пользователя Nina Scholz - источник.

→ Ссылка