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

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

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

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

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   джаваскрипт