Всем привет!
Есть такой класс:
export class Animate {
constructor({timing, duration, draw}) {
this.listAnimation = {
'ease-out': (timeFraction) => { return 1 - Math.pow(1 - timeFraction, 1.675); }
};
this.animate(this.listAnimation[timing], duration, draw);
}
animate(timing, duration, draw) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
let progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}
}
Класс для анимации я добавил туда возможность выбора анимации и нашел функцию для ease-out, не уверен что она правильная но все же:
this.listAnimation = {
'ease-out': (timeFraction) => { return 1 - Math.pow(1 - timeFraction, 1.675); }
};
Какими функция можно реализовать такие анимации из css как:
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
