Руководство по анимации в Интернете

Автор	Adi Purdila
Время урока	1 час
Язык	Английский

Описание

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

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

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

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

Описание уроков

Введение

Добро пожаловать на курс

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

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

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

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

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

Как добиться высокой производительности анимации

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

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

Как браузеры работают за кулисами

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

Как измерить производительность анимации

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

CSS против JavaScript анимации

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

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

Простой пример оптимизации анимации

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