| Автор | Adi Purdila |
| Время урока | 1 час |
| Язык | Английский |
В этом курсе вы узнаете, как создавать эти плавные анимации, как браузеры работают за кулисами, а также как измерять производительность анимации.
Изучите веб-анимацию
Мы создали полное руководство, которое поможет вам оживить CSS , если вы только начинаете изучать основы или хотите изучить более продвинутые методы.
- Введение
Добро пожаловать на курс
Будучи студентом CSS, вы, вероятно, знаете, как создавать анимацию, или, по крайней мере, искать правильный синтаксис для анимации чего-либо в браузере. Это может быть с переходом, ключевыми кадрами или даже JavaScript. Однако есть большая разница между плавной анимацией и медленной или дрожащей.
В идеале мы хотим, чтобы все наши анимации были гладкими и шелковистыми, потому что они более приятны для глаз и улучшают восприятие пользователем. И это вполне выполнимо, пока мы делаем правильные вещи. Это именно то, что мы узнаем в этом курсе.
- Производительность веб-анимации
Введение в производительность веб-анимации
Добро пожаловать на первый урок, на котором мы спросим: что можно считать высокой эффективностью? Давай выясним.
Как добиться высокой производительности анимации
Чтобы получить высокопроизводительные анимации, мы должны сделать две вещи: анимировать свойства, которые удобны для анимации и используют аппаратное ускорение.
Давайте копать немного глубже.
Как браузеры работают за кулисами
На уроке № 1 мы быстро ознакомились с тем, что делает браузер, после ввода адреса и нажатия клавиши ввода. Поскольку этот курс не касается конкретно HTTP-запросов или DNS-запросов, давайте сосредоточимся на рендеринге страниц.
Как измерить производительность анимации
На самом деле довольно просто измерить производительность ваших анимаций, потому что все необходимые инструменты доступны в браузере. Итак, я собираюсь показать вам анимацию, а затем мы измерим производительность как в Chrome, так и в Firefox.
CSS против JavaScript анимации
Вы можете создавать веб-анимацию двумя способами: с помощью CSS и с помощью JavaScript. Какой из них вы должны использовать, это горячо обсуждаемая тема! Некоторые люди говорят, что JavaScript-анимация на самом деле столь же эффективна, в то время как другие говорят, что CSS – это путь.
Вот что я знаю об этом и что имеет для меня смысл.
Простой пример оптимизации анимации
В этом последнем уроке давайте рассмотрим неэффективную анимацию, созданную с помощью CSS. Мы проведем некоторые измерения, а затем исправим и измерим снова. Наконец, мы сравним два.
Скрытый контент
- Вы не зарегистрированы
- Вы не вошли как пользователь
- У Вас просрочена подписка
- Ваша подписка не даёт вам право скачивать данный раздел