Изи(нги)

Всем привет!

Решил рассказать о своем "любимом" изинге, которым пользуюсь практически в каждом проекте. Для примера взял ролик, который делал для шапки своего сайта.

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

Приложил графики значений и скорости для наглядности, которыми пользуюсь в том числе, но в данном случае хотелось сильнее сделать акцент на плавном замедлении и подтянуть график ближе к оси Y.

Разница в анимации наглядно продемонстрирована в разделе анимации Material Design 3:

Compared to the utilitarian style of M2, M3 easing is more expressive. Transitions have snappy take offs and very soft landings.

Durations are slightly longer compared to M2. This gives transitions time to come to a gentle rest without feeling abrupt.

Очень рекомендую познакомиться с данным ресурсом и его предыдущей версией, если вы глубоко не погружались в построение систем анимаций интерфейсов, да и не только.

У себя на канале делюсь своими наблюдениями, собираю инспирейшн и просто рассказываю про свой путь в моушен-дизайне!