Повторное растрирование составных слоев при изменении масштаба

Крис Харрельсон
Chris Harrelson
X GitHub

ТЛ;ДР

Начиная с Chrome 53, весь контент перерисовывается при изменении масштаба преобразования, если у него нет свойства will-change: transform CSS. Другими словами, will-change: transform означает «пожалуйста, анимируйте это быстро».

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

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

Последствия для веб-разработчиков

В соответствии с этим изменением will-change: transform можно рассматривать как принудительное растрирование содержимого в фиксированное растровое изображение, которое впоследствии никогда не изменяется при обновлениях преобразования. Это позволяет разработчикам увеличить скорость преобразования анимации этого растрового изображения, например, его перемещение, вращение или масштабирование.

Мы не делаем различия между масштабными и трансляционными преобразованиями.

Используйте will-change: transform для элементов, когда вам нужна очень быстрая (другими словами, 60 кадров в секунду) скорость анимации преобразования, и ожидается, что растрирование элемента с высоким качеством в каждом кадре будет недостаточно быстрым. В противном случае избегайте will-change: transform .

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

Дополнительные соображения по реализации

Удаление will-change: transform приводит к повторному растрированию контента в четком масштабе, но только в следующем кадре анимации (через requestAnimationFrame) . Таким образом, если у вас есть слой с will-change: transform на нем и вы просто хотите запустить повторный растр, но затем продолжить анимацию, вы должны удалить will-change: Transform, а затем повторно добавить его в requestAnimationFrame() c allback.

Если в какой-то момент во время анимации вы захотите выполнить растр в текущем масштабе, примените описанную выше технику для удаления в одном кадре, повторное добавление will-change: transform в следующем кадре.

Побочным эффектом этого может стать потеря составного слоя контента, в результате чего приведенная выше рекомендация может оказаться несколько дорогостоящей. Если это проблема, мы рекомендуем добавить transform: translateZ(0) к контенту, чтобы гарантировать, что он останется в составном слое во время этой операции.

Краткое описание воздействия

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

  • Качество визуализированного контента : визуализированный вывод элементов, которые анимируют масштаб преобразования, по умолчанию всегда будет четким.
  • Производительность : анимация преобразования при наличии will-change: transform будет быстрой.
  • Контроль разработчика : разработчики могут выбирать между качеством и скоростью для каждого элемента и каждого кадра анимации, добавляя и удаляя
    will-change: transform .

Более подробную информацию см. в указанном выше проектном документе .

Примеры

В этом примере элемент с идентификатором remainsBlurry останется размытым после этого изменения, но элемент с идентификатором noLongerBlurry станет четким. Это потому, что у первого есть свойство will- change: transform CSS.

Примеры анимации масштабирования преобразования из реальных приложений.