Анімація в дизайні

З диснеївських 12 принципів в інтерфейсах критичні 4: timing (200–500 мс для UI, довше — гальмує), easing (ease-out на появу, ease-in на зникнення, ніколи linear), squash & stretch (мікро-пружність для кнопок), anticipation (елемент «готується» до дії — привертає увагу). Решта — для сторітелінгу і моушн-роликів.

Мікровзаємодії: ховер, натискання, перемикачі (50–200 мс). Переходи станів: поява/зникнення елементів, акордеони (200–300 мс). Навігаційні переходи: shared-element, hero-анімації (300–500 мс). Завантаження: скелетони краще за спінери. Декоративні: паралакс, скрол-анімації — обережно з продуктивністю і prefers-reduced-motion.

Lottie (JSON) — векторна анімація з After Effects/Figma, ~50–200 КБ, масштабується — стандарт для продукту. Rive — інтерактивна анімація зі станами. GIF — тільки для мессенджерів (важкий, без прозорості, 256 кольорів). Відео (mp4/webm) — для промо-роликів. CSS/Web Animations — для простих переходів, без файлів.

Анімація має відповідати на запитання «що сталося» за <500 мс. Завжди перевіряйте prefers-reduced-motion (включено в ОС у багатьох). 60 fps або не робіть — скачуща анімація гірша за відсутність. Анімуйте transform і opacity — вони на GPU; width/height/layout — викликають reflow. У дизайн-системі фіксуйте токени: duration-xs/s/m, easing-стандарт.