Просите кадры: пример

Недавно писал про то, что в джаваскрипте надо просить кадры. Решил сделать простой пример.

Задача: написать функцию, которая будет трясти элемент как МакОс трясёт окна авторизации с неправильным паролем.

Сначала надо написать математическую функцию. Для этого ищем сайт который строит график функции и пробуем. В моём случае функция вышла такая:

15 / (x1.25 / 20 + 0.5) * sin (x / 2)

Затем пишем эту функцию на джаваскрипте.

function draw(min, max){
    let pos = (15 / ((Math.pow(min, 1.15) / 10 + 0.5) - 0.05) * Math.sin(min / 2));
    min += 1;
    a.style.transform = 'translateX('+pos+'px)';
    if (min < max){
        requestAnimationFrame(function(){
            draw(min, max);
        });      
    }
}

Функция вызывается рекурсивно, таймеры писать не надо. Чтобы рассчитать длительность надо разделить количество кадров на 60. Я буду запускать эту функцию с параметрами 0 и 80, поэтому длительность анимации будет 1.33 секунды.

Для подобных анимаций лучше использовать transform, т.к. тогда этот слой становится композитным и рендерится быстрее.

Поделиться
Отправить
19 июня, 19:15   джаваскрипт