TGViewer
WebDev+ | Веб-разработка WebDev+ | Веб-разработка @webdev_plus · 7.9K subscribers
Post #873 1.37K
Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать:

① Эластичность: деформация для передачи веса и гибкости
② Антиципация: подготовка пользователя перед действием
③ Сцена: привлечение внимания к важному
④ Действие: покадровая анимация или ключевые позы
⑤ Непрерывность: ничего не останавливается и не начинается резко
⑥ Плавность: плавные входы и выходы
⑦ Арки: плавные движения для большего реализма
⑧ Контекст: детали, поддерживающие основное действие
⑨ Время: правильная продолжительность для плавности или скованности
⑩ Преувеличение: акценты для лучшего донесения идеи
⑪ Объем: добавление согласованности, глубины и реализма
⑫ Привлекательность: приятные, запоминающиеся анимации с характером

Вот полная статья с примерами: 12 принципов анимации

@WebDev_Plus
More from @webdev_plus
  1. Oct 12, 2026Эта библиотека позволяет запускать полноценные 3D-физические симуляции прямо в браузере. J…
  2. Oct 11, 2026Свойство shape-outside Определяет форму, вокруг которой должно обтекаться соседнее встроен…
  3. Oct 11, 2026Быстрый совет по JS: используйте Gamepad API, чтобы в реальном времени отслеживать статус…
  4. Oct 10, 2026Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирова…
  5. Oct 10, 2026Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, ко…
  6. Oct 9, 2026Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локальног…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →