Использование роберта Пеннера, упрощающего анимацию элементов dom
У меня возникли проблемы с пониманием, как это работает. Я прочитал учебник на веб-сайте Роберта Пеннера, где объясняются различные параметры:
t: времяb: начальное значениеc: изменениеd: продолжительность
Я указал значения, но это не похоже на работу. Почему? Кажется, я не получаю эффект упругости, но больше одной остановки где-то в начале.
https://jsfiddle.net/m1qzqvu8/4/
var elem = document.getElementsByTagName('div')[0]
function fn(){
var x = parseInt(elem.style.left);
if(x < 200) {
x += easeOutElastic(0, 10, 100, 4)
elem.style.left = x + "px"
}
requestAnimationFrame(fn)
}
fn()
function easeOutElastic (t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}