Как работает JavaScript: принципы CSS и JS-анимации + как оптимизировать производительность

JavaScript браузер Программа перевода самородков CSS

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

Если вы пропустили первую главу, вы можете найти их здесь:

  1. Как работает JavaScript: обзор движка, среды выполнения, стека вызовов
  2. Как работает JavaScript: 5 советов по оптимизации кода в движке V8
  3. Как работает JavaScript: управление памятью + обработка 4 распространенных утечек памяти
  4. Как работает JavaScript: рост событийного цикла и асинхронное программирование + 5 советов по лучшему программированию с помощью async/await
  5. Как работает JavaScript: глубокое погружение в WebSockets и HTTP/2 с SSE и как выбрать правильный
  6. Как работает JavaScript: конкуренция с WebAssembly + Почему WebAssembly лучше, чем JavaScript в некоторых ситуациях
  7. Как работает JavaScript: внутреннее устройство веб-работника и 5 сценариев, которые вы должны использовать
  8. Как работает JavaScript: жизненный цикл Web Worker и варианты использования
  9. Как работает JavaScript: механизм веб-push-уведомлений
  10. Как работает JavaScript: отслеживание изменений DOM с помощью MutationObserver
  11. Как работает JavaScript: механизмы рендеринга и советы по оптимизации производительности
  12. Как работает JavaScript: внутри сетевого уровня + как оптимизировать его производительность и безопасность

Обзор

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

Однако анимировать интерфейс не так просто. Что анимировать, когда и что анимировать — каверзные вопросы.

JavaScript и CSS анимация

Два основных способа создания анимации веб-страниц — это JavaScript и CSS. Нет абсолютно правильного или неправильного, все зависит от ваших целей.

CSS-анимация

Анимация с помощью CSS — это самый простой способ заставить содержимое на экране двигаться.

Мы рассмотрим быстрый пример того, как переместить элемент на 50 пикселей по осям X и Y. Это делается путем настройки перехода CSS, который занимает 1000 мс.

.box {
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 1000ms;

  transform: translate(0, 0);
  transition: transform 1000ms;
}

.box.move {
  -webkit-transform: translate(50px, 50px);
  transform: translate(50px, 50px);
}

когда классmoveПосле добавления,transformЗначение изменится, и начнется переход.

Помимо длины перехода, а также для другихослаблениепараметры, это суть анимации, которую вы видите. Мы обсудим смягчение более подробно позже в этой статье.

Если вы создаете отдельные классы CSS для управления анимацией, как в приведенном выше фрагменте кода, вы можете использовать JavaScript для включения и выключения каждой анимации.

Предположим, у вас есть такой элемент:

<div class="box">
  Sample content.
</div>

Затем вы можете включать и выключать каждую анимацию с помощью JavaScript:

var boxElements = document.getElementsByClassName('box'),
    boxElementsLength = boxElements.length,
    i;

for (i = 0; i < boxElementsLength; i++) {
  boxElements[i].classList.add('move');
}

Приведенный выше фрагмент кода получает всеboxэлементы класса и добавленыmoveкласс для запуска анимации.

Это может обеспечить хороший баланс для вашего приложения. Вы можете сосредоточиться на управлении состоянием с помощью JavaScript и просто установить соответствующий класс для целевого элемента и позволить браузеру обрабатывать анимацию. Если вы пойдете по этому пути, вы можете слушатьtransitionendСобытия для элементов, но только если вы можете отказаться от поддержки старых версий Internet Explorer:

мониторtransitionedСобытие, возникающее при завершении перехода, например:

var boxElement = document.querySelector('.box'); // 获取有 box 类的第一个元素。
boxElement.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
  // 处理过渡完成。
}

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

Ключевые кадры используются, чтобы указать браузеру, какое значение свойство CSS должно иметь в данный момент, и заполнить промежутки (между ключевыми кадрами).

Давайте посмотрим на пример:

/**
 * 这是没有加浏览器属性前缀的简化版本
 * 如果加上，会比较冗长！
 */
.box {
  /* 指定动画 */
  animation-name: movingBox;

  /* 动画时长 */
  animation-duration: 2300ms;

  /* 动画重复次数 */
  animation-iteration-count: infinite;

  /* 动画正反交替进行 */
  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(150px, 200px);
    opacity: 0.2;
  }

  100% {
    transform: translate(40px, 30px);
    opacity: 0.8;
  }
}

Это работает так (быстрая демонстрация) — стек сеансов.GitHub.IO/blog/demos/…

С анимациями CSS вы можете определить саму анимацию независимо от целевого элемента и использоватьanimation-nameсвойство, чтобы выбрать нужную анимацию.

Для CSS-анимации по-прежнему иногда требуются префиксы свойств браузера.-webkit-Для Safari, Safari Mobile и Android. Chrome, Opera, Internet Explorer и Firefox будут работать без префикса. Многие инструменты могут помочь вам создать префиксы свойств браузера для требуемого CSS, что позволит вам писать версии без префиксов в исходных файлах.

JavaScript-анимация

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

Анимации JavaScript записываются как часть кода. Вы также можете инкапсулировать их в другие объекты. Вот что вам нужно написать на JavaScript, чтобы воссоздать переход CSS, описанный ранее:

var boxElement = document.querySelector('.box');
var animation = boxElement.animate([
  {transform: 'translate(0)'},
  {transform: 'translate(150px, 200px)'}
], 500);
animation.addEventListener('finish', function() {
  boxElement.style.transform = 'translate(150px, 200px)';
});

По умолчанию веб-анимация изменяет только отображение элементов. Если вы хотите, чтобы ваш объект оставался там, где он был перемещен, вам следует изменить его базовый стиль после завершения анимации. Вот почему мы слушаемfinishсобытие и будетbox.style.transformсвойство установлено наtranslate(150px, 200px), что совпадает со вторым преобразованием нашей анимации.

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

Что такое послабление?

Естественные движения делают пользователей более удобными в вашем веб-приложении, что улучшает взаимодействие с пользователем.

Естественно, ничто не перемещается линейно из одной точки в другую. На самом деле, вещи имеют тенденцию ускоряться или замедляться, когда они движутся в физическом мире вокруг нас, потому что мы не находимся в вакууме, и на это влияют различные факторы. Человеческий мозг привык ожидать такого рода движения, поэтому, когда вы анимируете свое приложение, вы должны использовать это знание в своих интересах.

Есть несколько терминов для понимания:

  • "легкость"- Начните медленно, затем ускорьтесь.
  • "Расслабься"- Начни быстро, потом помедленнее.

Их можно комбинировать, например, «легкость внутрь».

Замедление может сделать анимацию более естественной.

Упрощать ключевые слова

Переходы и анимация CSS позволяют выбрать тип плавности, который вы хотите использовать. Существуют разные ключевые слова, влияющие на замедление анимации. Конечно, вы можете полностью использовать пользовательское смягчение.

Вот несколько ключевых слов, которые вы можете использовать для управления плавностью в CSS:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

Давайте пройдемся по ним один за другим, чтобы увидеть, что именно это означает.

Линейный (linear) анимация

Анимация без замедления называетсялинейныйанимация.

Вот иллюстрация линейного перехода:

Значение увеличивается на равную величину с течением времени. При использовании линейного движения оно всегда кажется неестественным. В общем, вам следует избегать линейного движения.

Вот простой способ реализовать линейную анимацию:

transition: transform 500ms linear;

Полегче (ease-out) анимация

Как упоминалось ранее, анимация замедления начинается быстрее, чем линейная анимация, а затем замедляется. Вот как это выглядит:

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

Есть много способов добиться эффекта легкости, но самый простой — использовать ключевые слова CSS:

transition: transform 500ms ease-out;

Легкость в (ease-in) анимация

Это противоположно простоте — начните медленно и быстро закончите. Схема выглядит следующим образом:

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

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

transition: transform 500ms ease-in;

Легко входит и выходит (ease-in-out) анимация

Это комбинация облегчения входа и выхода, как показано ниже:

Не используйте его для анимаций, которые длятся слишком долго, из-за чего ваш пользовательский интерфейс будет казаться невосприимчивым.

Использование ключевых слов CSSease-in-outРеализуйте анимацию облегчения входа и выхода:

transition: transform 500ms ease-in-out;

пользовательское смягчение

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

Фактически,ease-in,ease-out,linear,easeКлючевые слова могут соответствовать предопределеннымКривая Безье, ЭтоСпецификация перехода CSSа такжеСпецификация веб-анимацииЕсть подробная инструкция.

Кривая Безье

Давайте посмотрим, как работают кривые Безье. Кривая Безье имеет четыре значения, точнее, она принимает две пары чисел. Каждая пара описывает координаты X и Y кубической контрольной точки Безье. Кривая Безье начинается в точке (0, 0) и заканчивается в точке (1, 1). Вы можете установить эти два набора чисел. Значение X обеих контрольных точек должно быть в диапазоне [0, 1], а значение Y каждой контрольной точки может превышать предел [0, 1], хотя в спецификации явно не сказано, насколько.

Даже если значения X и Y каждой контрольной точки имеют небольшое изменение, вы дадите вам совершенно другую кривую. Давайте посмотрим на два диаграмма Бесселя, координаты точек аналогичны, но разные.

а также

Как видите, эти два графика совершенно разные. Разница векторов между первой контрольной точкой двух кривых составляет (0,045, 0,183) и разница второй контрольной точки (-0,427, -0,054).

CSS для второй кривой записывается следующим образом:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

Первые два числа — это координаты X и Y первой контрольной точки, а последние два числа — это координаты X и Y второй контрольной точки.

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

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

Как и все остальное в мире, анимация имеет свою цену. Анимация некоторых свойств дешевле, чем других. Например, анимация изменяетwidthа такжеheightизменяет свою форму и может привести к перемещению и изменению формы других элементов на странице. Этот процесс называется компоновкой. мы впредыдущий постМакет и рендеринг подробно обсуждались в .

Как правило, вам следует избегать использования анимации свойств, которая запускает макет или рисование. Для большинства современных браузеров это означает ограничение анимации (модифицированных свойств) доopacityа такжеtransform.

will-change

вы можете использовать[will-change](https://dev.w3.org/csswg/css-will-change/)Сообщите браузеру, что вы собираетесь изменить атрибуты элемента. Браузер выполнит наиболее подходящую оптимизацию, прежде чем вы внесете изменения. Но не злоупотребляйтеwill-change, так как это приведет к пустой трате ресурсов браузера и вызовет дополнительные проблемы с производительностью.

Вы можете добавить преобразование и непрозрачность, как этоwill-change:

.box {  will-change: transform, opacity;}

Браузерная поддержка Chrome, Firefox и Opera очень хорошая.

Выберите JavaScript или CSS?

Вы можете знать - вопрос не прав или неправильный ответ. Вам нужно только вспомнить следующее:

  • Анимации на основе CSS и изначально поддерживаемые веб-анимации обычно обрабатываются в потоке, который называется «поток компоновщика». Он отличается от «основного потока» браузера, где выполняются стилизация, макет, рисование и JavaScript. Это означает, что если браузер выполняет какую-то трудоемкую задачу в основном потоке, эти анимации могут продолжать работать без перерыва.
  • во многих обстоятельствах,transformsа такжеopacityВсе может быть обработано в потоке композитора.
  • Если какая-либо анимация запускает рисование, компоновку или и то, и другое, «основной поток» выполняет эту работу. То же самое и с анимацией, основанной на CSS или JavaScript: накладные расходы на макет или рисование огромны, что делает выполнение связанного с ними CSS или JavaScript и рендеринг бессмысленным.

Выберите правильный объект для анимации

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

Используйте анимацию для улучшения взаимодействия

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

Избегайте дорогостоящих свойств анимации

Хуже плохо размещенной анимации могут быть только те, из-за которых страница тормозит. Этот тип анимации делает пользователей разочарованными и несчастными.

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

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

Если хочешьпопробуйте SessionStack, есть бесплатный план.

ресурс

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории