Разные типы анимации в js?

Question

[lilwings]

Всем привет!

Есть такой класс:

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;

Comments

[RAX7]

https://gist.github.com/gre/1650294

Answer 1

[Kovalsky]

gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
robertpenner.com/easing

Живой редактор функций - www.timotheegroleau.com/Flash/experiments/easing_f...

Если не хочется ради него включать флеш, то можно скачать исходник

Comments

[lilwings]

Спасибо!)