Пружины и пользовательские кривые времени

То, как анимация ускоряется и останавливается, формирует её характер. Кривая времени определяет, будет ли движение резким, плавным или упругим.

Кривая linear перемещает объект с постоянной скоростью от начала до конца. Она может ощущаться механической, поэтому больше подходит для индикаторов выполнения, чем для интерфейса.

Кривая easeInOut начинается медленно, ускоряется, а затем плавно замедляется до остановки — это самый естественный выбор для большинства элементов интерфейса.

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

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

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

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

Для полного контроля timingCurve позволяет определить пользовательскую кривую Безье с собственными управляющими точками и длительностью.

Добавьте .delay к любой анимации, чтобы подождать перед её началом. Это особенно удобно для последовательного появления нескольких элементов.

Используйте repeatForever или repeatCount, чтобы зациклить анимацию. Это идеально подходит для пульсирующих точек и подсказок о загрузке.

Модификатор .speed ускоряет или замедляет анимацию, не заставляя переписывать её кривую или длительность.

Вы изучили кривые времени — от linear до easeInOut, живые пружины с bounce, пользовательские кривые Безье, задержки и повторы. Теперь ваше движение обладает характером. 🚀