Руководство по анимации в Интернете
Автор Adi Purdila
Время урока 1 час
Язык Английский
В современной сети анимация играет большую роль в восприятии пользователем и доставке информации. Дни медленных браузеров давно прошли, и браузеры, которые мы сегодня используем, используют новейшие технологии, чтобы обеспечить максимально возможный опыт. Таким образом, большую часть времени мы получаем гладкую, гладкую и высокопроизводительную анимацию.

В этом курсе вы узнаете, как создавать эти плавные анимации, как браузеры работают за кулисами, а также как измерять производительность анимации.

Изучите веб-анимацию

Мы создали полное руководство, которое поможет вам оживить CSS , если вы только начинаете изучать основы или хотите изучить более продвинутые методы.

  • Введение

Будучи студентом CSS, вы, вероятно, знаете, как создавать анимацию, или, по крайней мере, искать правильный синтаксис для анимации чего-либо в браузере. Это может быть с переходом, ключевыми кадрами или даже JavaScript. Однако есть большая разница между плавной анимацией и медленной или дрожащей.

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

  • Производительность веб-анимации

Добро пожаловать на первый урок, на котором мы спросим: что можно считать высокой эффективностью? Давай выясним.

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

Давайте копать немного глубже.

На уроке № 1 мы быстро ознакомились с тем, что делает браузер, после ввода адреса и нажатия клавиши ввода. Поскольку этот курс не касается конкретно HTTP-запросов или DNS-запросов, давайте сосредоточимся на рендеринге страниц.

На самом деле довольно просто измерить производительность ваших анимаций, потому что все необходимые инструменты доступны в браузере. Итак, я собираюсь показать вам анимацию, а затем мы измерим производительность как в Chrome, так и в Firefox.

Вы можете создавать веб-анимацию двумя способами: с помощью CSS и с помощью JavaScript. Какой из них вы должны использовать, это горячо обсуждаемая тема! Некоторые люди говорят, что JavaScript-анимация на самом деле столь же эффективна, в то время как другие говорят, что CSS - это путь.

Вот что я знаю об этом и что имеет для меня смысл.

В этом последнем уроке давайте рассмотрим неэффективную анимацию, созданную с помощью CSS. Мы проведем некоторые измерения, а затем исправим и измерим снова. Наконец, мы сравним два.

Скрытый контент

  • Вы не зарегистрированы
  • Вы не вошли как пользователь
  • У Вас просрочена подписка
  • Ваша подписка не даёт вам право скачивать данный раздел