Браузер с ускорением анимации

Обновлено: 21.11.2024

На производительность веб-анимации влияют два основных фактора: рендеринг и аппаратное ускорение.

Визуализация — это процесс обновления модели DOM и отображения этого изменения на экране. Это влияет на производительность всех анимаций.

Аппаратное ускорение — это возможность запускать анимацию вне основного потока JavaScript. Это влияет на производительность анимации, которая запускается одновременно с другими процессами JS, такими как рендеринг React или другая обработка данных.

Давайте рассмотрим каждый из них подробнее.

Когда мы обновляем стили элемента:

Браузер должен отразить это изменение, повторно отобразив страницу, взяв HTML и CSS и превратив их в изображение, которое отображается на вашем экране.

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

Как правило, быстрее сделать меньше работы.

Например, если мы обновим высоту одного элемента, это изменит размер элемента. Изменение размера элемента может затем повлиять на размер и/или положение родственного или дочернего элемента, что само по себе может иметь эффект домино и так далее. Поэтому нам нужно пересчитать макет всех затронутых элементов.

Всякий раз, когда изменяется макет страницы, браузер также должен перерисовывать и перекомпоновывать затронутые слои. Многие стили влияют на макет, например height , border-width , padding , position и т. д. К счастью, эти стили обычно легко заметить, когда их изменение влияет на размер и/или положение элемента (за исключением transform ).

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

Однако это не жесткое правило. Если макет элемента изолирован, например, он имеет position: absolute и очень мало дочерних элементов, то вы можете плавно анимировать его. Просто убедитесь, что вы протестировали эти анимации на устройствах с низким энергопотреблением.

Самые эффективные стили — это те, которые запускают только третий этап рендеринга — компоновщик.

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

Браузеры также добавляют новые значения в этот список. Например, Chrome и Firefox полностью обрабатывают фильтр и SVG в компоновщике, а Chrome скоро добавит поддержку background-color и clip-path.

Кроме того, поскольку Motion One создан на основе API веб-анимации, браузеры достаточно умны, чтобы автоматически размещать элементы, анимирующие эти значения, на новом графическом слое.

Существует также множество значений, таких как box-shadow и border-radius, которые можно обновить без запуска рендеринга, но для этого требуется потенциально дорогая краска (шаг 2).

Всегда следует тестировать анимацию этих свойств на устройствах с низким энергопотреблением.

Однако есть способы улучшить производительность этих анимаций.

Уменьшить размер слоя

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

Вы можете намекнуть браузеру, что им следует создать новый слой, установив для стиля willChange значение "transform":

Создание новых слоев не бесплатно. Каждый занимает место на графическом процессоре. Так что делайте это с осторожностью.

Использовать альтернативные стили

Во-вторых, вы можете попробовать заменить стили более эффективными альтернативами.

Мы уже видели, что браузеры улучшают поддержку фильтра в компоновщике. Поэтому вместо анимации boxShadow анимируйте фильтр с помощью функции тени:

Точно так же браузеры добавляют clipPath в компоновщик. Поэтому вместо анимации borderRadius анимируйте clipPath с помощью функции вставки:

Так как же узнать, какие стили активируют компоновку или рисование, а какие — только композицию?

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

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

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

В своей основе анимация смешивает два значения в течение определенного промежутка времени. Например, если мы хотим анимировать между «100px» и «200px» в течение одной секунды, если прошло 0,5 секунды, наша анимация вычислит «150px». Это очень простое вычисление, которое не требует значительных затрат по сравнению с рендерингом.

Однако в браузере это значение можно вычислить несколькими способами:

С помощью JavaScript с использованием requestAnimationFrame (например, Greensock и Anime.js)
С API веб-анимации
С помощью CSS

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

Однако WAAPI и CSS могут запускать некоторые анимации вне основного потока JS непосредственно в самом компоновщике. Поскольку обычно это графический процессор, его часто называют аппаратным ускорением.

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

Поскольку Motion One построен на WAAPI, он также может запускать анимацию с аппаратным ускорением.

Как правило, если стиль вызывает только этап композитного рендеринга, теоретически он также может быть анимирован на нем.

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

Другие значения, такие как filter , background-color , clip-path и SVG, уже поддерживаются или получают поддержку в большинстве браузеров.

Переменные CSS и отдельные преобразования

Motion One отличается от WAAPI и CSS тем, что поддерживает анимацию отдельных трансформаций:

Под капотом анимируются переменные CSS, и в настоящее время они не ускорены, хотя применяются для преобразования .

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

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

Например, до недавнего времени, если Chrome обнаруживал такое преобразование на основе %:

Не будет аппаратного ускорения.

В Webkit есть немало спасательных средств от ускоренной анимации.

Похоже, это связано с тем, что он пытается использовать Core Animation, и в результате многие ошибки в нем затем обнаруживаются в Webkit.

Кроме того, функция Core Animation не полностью совпадает со спецификацией WAAPI.

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

Если для параметра PlayplayRate установлено значение, отличное от 1:

Если для направления задано значение, отличное от нормального:

Если используется пошаговое смягчение:

Если используется замедление кубического Безье со значением y, выходящим за пределы диапазона 0–1 (обычно используется для перерегулирования), И имеется более двух ключевых кадров или двух ключевых кадров, в которых не используется линейное замедление:

Наконец, фильтр поддерживается, но только в macOS.

По этой причине Motion One по умолчанию отключает аппаратное ускорение в Webkit.

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

Однако мы рекомендуем тщательно протестировать эти анимации в Safari и во встроенном браузере WKWebView, подобном тому, который используется в iOS Chrome.

Все это говорит о том, что аппаратное ускорение анимации может стать минным полем.

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

Если вы столкнулись с большим количеством ненужной информации из загруженного потока JavaScript, придерживайтесь transform и opacity , установите для параметра allowWebkitAcceleration значение true и убедитесь, что вы тщательно тестируете браузеры Webkit.

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

преобразование и непрозрачность являются самыми дешевыми для отображения во всех браузерах. Браузеры постоянно улучшают производительность рендеринга других стилей (и SVG), с появлением filter , background-color и clip-path на горизонте.

Стили, активирующие макет, могут быть анимированы для элементов, которые не влияют на макет окружающих элементов (например, если они имеют position: absolute ). Но убедитесь, что вы протестировали эти анимации во многих браузерах, особенно на устройствах с низким энергопотреблением.

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

Подпишитесь на нашу рассылку, чтобы быть в курсе событий Motion One и инструментов разработчика Motion. Мы не рассылаем спам, а отписка происходит мгновенно.

Ваше полное руководство по созданию анимации — начиная с нуля.

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

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

Хорошая производительность означает достижение конечной цели 60 кадров в секунду (FPS). Это связано с тем, что в наши дни большинство устройств обновляют свой экран со скоростью 60 раз в секунду. Браузер должен соответствовать этой скорости и рисовать новый кадр при каждом обновлении. В противном случае анимация будет выглядеть так, как будто она не меняется и движется хаотично:

Чтобы избежать этого, нам нужно понимать, что браузер делает под капотом и как это должно информировать наш код. В частности, мы рассмотрим:

Часть 1

Как браузер отображает элементы, от пустого до рисования
Что следует и не следует анимировать

Браузер под капотом

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

Как браузер отображает элементы

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

Пересчитывает стили: сопоставьте элемент с соответствующими селекторами CSS (например, .heading > span , .title ) и рассчитайте, какие стили следует применить.
Макет: создайте размеры и положение — по сути, его ширину, высоту и расположение на странице.
Рисование. Закрасьте каждый видимый пиксель, включая фон, границы, тени и текст. Элементы обычно рисуются слоями.
Композитные слои: возьмите слои, созданные Paint, объедините их в правильном порядке и выведите на экран.

Синие квадраты на приведенной выше диаграмме указывают, какие свойства CSS запускают какой этап процесса рендеринга. Например, установка ширины или высоты элемента запускает Layout. Это важно знать, потому что процесс рендеринга представляет собой водопад — каждый шаг запускает все, что следует за ним. Если браузер выполняет Layout, он также должен выполнять Paint и Composite Layers. Если он делает Paint, он должен делать Composite Layers, но может избегать Layout. Чем выше вы начнете спускаться по водопаду, тем больше работы потребуется. Полный список триггеров CSS см. в этом руководстве.

Макет и рисование — самые затратные операции не только потому, что они выше, но и потому, что они могут заставить браузер повторно отображать другие элементы. Например, изменение ширины родительского контейнера влияет на размер дочерних элементов, что приводит к необходимости прохождения водопада для каждого дочернего элемента. Это показывает, как анимация Layout/Paint может отрицательно сказаться на производительности — она создает много работы, которую браузер может не выполнить до следующего обновления экрана.

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

Как работает браузер

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

Оба потока передают свою работу центральному процессору (ЦП). Это материнская плата компьютера, и она отвечает за обработку почти всего. Раньше вся работа отсылалась на ЦП; но в настоящее время современные браузеры могут разгрузить часть этого на графический процессор (GPU). Это может значительно повысить производительность, поскольку вы убираете работу с загруженного ЦП.

Только определенные виды работы переносятся на GPU. Чтобы соответствовать требованиям, операция не должна запускать работу основного потока, такую как Layout и Javascript. Это означает, что он может быть обработан одним потоком композитора. Таким образом, браузер может применить оптимизацию композитинга, в результате чего будет создан новый слой компоновщика. Затем слой загружается и обрабатывается графическим процессором. Этот процесс называется аппаратным ускорением.

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

Представление слоев композитора через Google

Единственная загвоздка здесь в том, что большинство элементов не получают аппаратного ускорения на GPU. Браузер решает, что подходит, а что нет, как мы увидим ниже.

Что следует и не следует анимировать

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

Не запускайте верхнюю часть водопада визуализации.
Избегайте основного потока.
Используйте преимущества потока компоновщика и графического процессора.

Соберем все воедино. Самый эффективный способ анимации — это анимация ключевых кадров CSS или переходы только при трансформации и непрозрачности. Это соответствует нашим критериям, следуя этим рекомендациям:

Анимировать только свойства составных слоев

Изменяя только свойства CSS, которые запускают составные слои, вы обходите большую часть водопада рендеринга и любую работу, которая должна выполняться в основном потоке. Это сводится к двум свойствам — transform и opacity. Это может показаться ограничивающим, но многое можно сделать только с помощью преобразования!

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

Используйте CSS вместо Javascript

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

Используйте аппаратное ускорение

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

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

Оранжевая рамка явно присутствует, но вы можете заметить кое-что странное — граница присутствует только во время движения элемента и исчезает после завершения анимации. Это небольшой, но важный нюанс: элементы получают новый слой только в момент анимации. Затем он реабсорбируется внешним слоем.

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

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

Это то, чего мы пытались избежать! Чтобы предотвратить повторное поглощение элемента, нам нужно применить will-change :

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

will-change также полезен, когда вам нужно анимировать свойства Paint, потому что слой можно перекрасить, не затрагивая другие элементы.

⚠️ Тем не менее, есть большая оговорка — will-change — это мощный инструмент, который следует использовать с осторожностью. Категорически не рекомендуется помещать каждый элемент на отдельный слой. Это связано с тем, что для управления каждым уровнем требуются память и ресурсы, что может перевешивать преимущества использования графического процессора.

В следующий раз…

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

Статьи по теме

Встраиваемые веб-приложения с Shadow DOM

Разделение PDF-файлов с помощью HexaPDF

Извлечение встроенного текста из PDF-файлов с помощью Poppler в Ruby

Информационный бюллетень Viget

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

Нижний колонтитул сайта

Есть неразрешимая проблема или смелая идея?

Приступаем к работе

Подпишитесь на нашу рассылку

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

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

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

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

Последние версии популярных браузеров, таких как Firefox, Chrome, IE9, Safari и Opera, поддерживают аппаратное ускорение. Однако большая часть анимации выполняется с помощью механизма рендеринга браузера. Ускорение графического процессора активируется только тогда, когда есть указание на то, что будут выполняться тяжелые вычисления.

Ускорение графического процессора может быть активировано при выполнении следующих задач:

Переходы CSS3
Трехмерные преобразования CSS3
Рисование на холсте
3D-рисование WebGL

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

Самым убедительным указанием CSS для браузера на включение аппаратного ускорения является 3D-преобразование. Чтобы активировать GPU для компоновки HTML-элемента, мы можем применить к элементу следующее правило CSS.

Звучит здорово! Но как это будет полезно для нас, если мы просто хотим перелистывать страницы?
Давайте построим что-нибудь и посмотрим, как это работает.

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

Многопанельный макет — это распространенный шаблон пользовательского интерфейса, который позволяет работать с экранами разных размеров, обеспечивая сбалансированный и эстетически приятный макет. Он может объединять несколько представлений в одно для небольших экранов и обеспечивать составное представление для экранов с большей площадью.

Давайте создадим следующий макет с несколькими панелями, вдохновленный родным приложением Gmail для устройства Google Nexus 7”.

Примечание. Следующий пример кода оптимизирован для браузеров Firefox и Chrome.

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

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

Основная функциональность, которую мы хотим реализовать в представлении для мобильных устройств, заключается в отображении страницы сведений об элементе при нажатии на заголовок и возможности вернуться на страницу со списком заголовков с помощью «кнопки «Домой». На планшете мы должны иметь возможность щелкать элементы списка и отображать на странице сведений содержимое выбранного элемента. Мы можем добиться этого, добавив следующий код JavaScript:

Как видите, jQuery не выполняет анимацию. Я использую jQuery только для замены классов, а фактическая анимация происходит, когда мы меняем классы местами.

Я добавил прослушиватели кликов для заголовков и прослушиватель для кнопки "Домой".
Когда событие клика срабатывает на заголовке,
- мы помечаем выбранный элемент как выбранный
- выталкиваем список заголовков из фокуса
- перетаскиваем список деталей в фокус
/>- скрыть все страницы сведений, кроме страницы выбранного элемента
При нажатии кнопки «Домой»
- мы вытягиваем список деталей из окна просмотра
- вытаскиваем список элементов снова в фокусе

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

Ключ к тому, как будут вести себя элементы Div и списки, лежит в CSS, но сначала нам нужно определить класс для ускоренных элементов HTML.

В этом случае я использовал translateZ для включения ускорения, некоторые старые мобильные версии браузеров не поддерживают 3D-преобразование или преобразование по оси Z, для поддержки этих браузеров вы можете настроить другой класс, используя translateX или translateY, однако они не будут работать с аппаратным ускорением.

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

Переход синтаксиса для CSS3 довольно прост:

[Я расскажу немного больше о функциях синхронизации в конце этой статьи.]

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

У нас есть три состояния для скользящих списков: in_focus, out_left и out_right, поскольку мы хотим двигать список заголовков и список сведений в двух разных направлениях. Определение разных правил стиля в селекторе классов в одном медиазапросе и в другом приведет к разной анимации HTML-элемента для разных размеров экрана. Таким образом, скользящие страницы для мобильных пользователей могут стать фиксированными страницами или страницами с вкладками для пользователей планшетов.

Если вы хотите сохранить всю логику представления в JavaScript, вам не следует использовать анимацию jQuery для изменения значений свойств; это не будет ускорено графическим процессором. Также вам придется иметь дело с конкретными префиксами поставщиков отдельно, "-vendor-transform : translate3d(0,0,0)" не будет ускорен.

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

Но действительно ли это ускорено?

Простой способ проверить, включился ли GPU, — включить отображение частоты кадров в веб-браузере Chrome для страниц с аппаратным ускорением.

Для этого просто введите «chrome:flags» в Chrome, прокрутите вниз до счетчика FPS, включите его и нажмите кнопку «Перезапустить сейчас» в нижней части экрана.

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

Еще несколько слов о переходах:

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

Если вы не уверены, какое смягчение вам нужно, вам может помочь инструмент смягчения CSS CEASER.

Изящная деградация

Переходы и преобразования CSS изящно деградируют в старых браузерах, поэтому вам не нужно бояться их использования, но если вы хотите предоставить такую же анимированную презентацию, вы всегда можете использовать анимацию jQuery. Библиотеки, такие как Modernizr, могут помочь вам решить, что делать.

На что следует обратить внимание при включении ускорения графического процессора

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

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

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

И самое главное, всегда получайте удовольствие от его разработки.

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

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

В новостях на этой неделе Firefox получил закругленные контуры, анимация SVG теперь ускоряется с помощью графического процессора в Chrome, в CSS нет физических единиц измерения, доступен кроссворд The New York Times и переменные CSS. разрешаются до того, как значение будет унаследовано.

Давайте знакомиться с новостями!

В Firefox появятся закругленные контуры

Идея, чтобы контур повторял кривую границы, существовала с тех пор, как в середине 2000-х стало возможным создавать закругленные границы с помощью свойства border-radius. Его предложили Mozilla, WebKit и Chromium более десяти лет назад, а с 2015 года он даже стал частью спецификации пользовательского интерфейса CSS:

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

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

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

Анимации SVG теперь ускоряются с помощью графического процессора в Chrome

До недавнего времени анимация элемента SVG с помощью CSS приводила к перерисовке каждого кадра (обычно 60 раз в секунду) в браузерах на основе Chromium. Такая постоянная перерисовка может негативно сказаться на плавности анимации и производительности самой страницы.

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

Переключение на GPU-ускорение автоматически сделало анимацию SVG более производительной в браузерах на основе Chromium (Firefox тоже делает это), что, безусловно, является хорошей новостью для Интернета:

Ура, больше доступных для чтения с экрана, прогрессивно улучшенных SVG-анимаций и меньше Canvas.

В CSS не может быть реальных физических единиц

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

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

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

Затем этот коэффициент масштабирования можно установить в пользовательском свойстве и использовать для вычисления точной длины в CSS:

Кроссворд Times доступен для пользователей программ чтения с экрана

Команда NYT Open написала о некоторых улучшениях на веб-сайте New York Times, которые сделали его более доступным за последние годы. На веб-сайте используется семантический HTML ( , , и т. д.), повышенная контрастность важных компонентов (например, вход и регистрация) и ссылки для перехода к содержимому, которые адаптируются к платному доступу сайта.

Кроме того, команда Games сделала ежедневный кроссворд доступным для пользователей клавиатуры и программ чтения с экрана. Кроссворд реализован в виде сетки SVG-элементов. По мере того как пользователь перемещается по головоломке, атрибут aria-label текущего квадрата (доступное имя) динамически обновляется, чтобы обеспечить дополнительный контекст.

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

Переменные CSS разрешаются до наследования значения

Юань Чуан недавно поделился небольшой викториной по CSS, на которую я дал неправильный ответ, потому что не был уверен, разрешается ли переменная CSS (функция var()) до или после наследования значения. Я попытаюсь объяснить, как это работает, на следующем примере:

Вопрос: цвет абзаца в нижнем колонтитуле черный или коричневый? Есть две возможности. Либо (A) объявленные значения обоих настраиваемых свойств наследуются абзацу, а затем свойство color принимает значение brown , либо (B) свойство --text-color принимает значение black непосредственно в элементе, а затем это значение наследуется от абзаца и назначается свойству цвета.

Правильный ответ — вариант Б (черный цвет). Переменные CSS разрешаются до наследования значения. В этом случае --text-color возвращается к черному, потому что --main-color не существует в элементе. Это правило указано в модуле CSS Variables:

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

Читайте также: