Можно ли задавать кривые Безье для функций js?

Question

[eternal_blue]

Здравствуйте, нужен скрипт, который прибавит к числу внутри элемента заданное число, но не просто прибавит, а сделает это красиво в плане анимации, чтобы добавлялось по единичке и так до нужной суммы чисел. Реализовал так:

function up(elem, num) {
    counter = 0;
    function timer() {
        if(counter < num) {
            counter = counter + 1;
            elem.innerHTML = parseInt(elem.innerHTML) + 1;
            setTimeout(timer, 100);
        }
    }
    timer();
}

Но в таком коде очевидно невозможно сделать красивое ускорение или замедление анимации, чтобы в начале цифры прибавлялись с одной скорость, а в конце замедлялись (всякие ease, ease-out и прочие функции кривых Безье). Можно ли как нибудь добавить временные функции?

Comments

[alex4answ]

Можно, вы же по сути просто значение timeout менять будете, на learn.javascript были примеры где-то в разделах js анимации

[eternal_blue]

alex4answ, я сообразил, что можно создать переменную time, которая будет равна например 3000 разделить на число, на которое мы хотим увеличить, и потом это подставлять в качестве второго аргумента setTimeout, в итоге плюс 12 и плюс 112 будут выполняться в одно и то же время, 3000 миллисекунд

[alex4answ]

eternal_blue, тут уж как хотите интерполируйте ))

[eternal_blue]

alex4answ, о, так вот же оно, requestAnimationFrame. Напишите ответ об этом

[Maxim Kirshin]

возьми любую либу для анимации числа.
как пример: https://inorganik.github.io/countUp.js/

Если же хочется прямо самому, но правильно, посмотри как в этих либах написано

[alex4answ]

eternal_blue, requestAnimationFrame это другое, что об этом писать?
прочтите документацию и все

Answer 1

[alexalexes]

https://easings.net/ru#
Открываете любой график.
Внизу приведена формула математической функции.
Ее используете для создания своего JS аналога.