Принесет ли «изменение», примененное через API веб-анимации, желаемый эффект?

По данным Google:

Общее эмпирическое правило заключается в том, что если анимация может быть запущена в течение следующих 200 мс [...] то хорошей идеей будет использование will-change для анимации элементов. Для В большинстве случаев для любого элемента в текущем представлении вашего приложения, который вы собираетесь анимировать, должна быть включена функция will-change для любых свойств, которые вы планируете изменить.

Итак, мой вопрос: можно ли применить will-change через API веб-анимации до того, как какое-либо свойство будет фактически анимировано, и будет ли это иметь желаемый эффект? Или слишком поздно в жизненном цикле того, что происходит за кулисами, чтобы will-change работало должным образом?

Похоже, что свойства, измененные с помощью этого API, на самом деле не отражаются в DevTools как свойства CSS, поэтому я не могу проверить, действительно ли это вообще применяло will-change.

Пример идеи:

this.animation = document.querySelector('#my-element').animate(
  [
    {
      willChange: 'opacity', // will-change applied before any animated property has been changed
      opacity: 'initial',
    },
    {
      willChange: 'opacity',
      opacity: 'initial',
      offset: 0.01, // 1% of the way through the animation
    },
    {
      willChange: 'opacity',
      opacity: 0.5,
      offset: 0.5, // 50% of the way through the animation
    },
    { 
      willChange: 'initial',
      opacity: 'initial'
    },
  ],
  1000
);

person Slbox    schedule 30.10.2020    source источник


Ответы (2)


Да, это будет иметь желаемый эффект.

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

Альтернативный подход — просто добавить короткую задержку к анимации. Во время фазы задержки анимации браузер должен применить will-change: opacity (или любые другие анимируемые свойства). (Справочник по спецификациям)

Тем не менее, в этом нет никаких преимуществ. Цель применения will-change — позволить браузеру подготовить контент к анимации (например, растрировать его как отдельные слои), чтобы анимация запускалась без задержки. Если вы просто запустите анимацию как обычно, браузер при необходимости повторно растрирует изображение, а затем начнет анимацию с самого начала.

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

person brianskold    schedule 01.11.2020
comment
Часто упоминается, что will-change нельзя оставлять включенным даже для элементов, которые будут изменяться. Интересно, действительно ли проблематично просто оставить его включенным для элемента, свойства которого будут меняться довольно часто? - person Slbox; 02.11.2020
comment
Можно оставить его включенным, если вы применяете его только к небольшому количеству элементов. Применение его ко всем элементам может означать, что браузеру придется создавать слои для всего, что резко увеличит использование памяти. В результате браузеры часто имеют бюджет на изменение, после чего они просто игнорируют любые свойства изменения. Так что лучше всего просто применить его к нескольким элементам, которые, как вы ожидаете, будут анимированы в следующий раз. - person brianskold; 02.11.2020
comment
Это действительно интересно относительно браузеров, у которых есть бюджет на изменение. У вас случайно нет источника этой информации? - person Slbox; 02.11.2020
comment
Я являюсь основным автором спецификации веб-анимации и реализатором в Firefox. Вы можете увидеть предупреждения о бюджете в консоли Firefox DevTools, если вы превысите бюджет. Вы также можете увидеть это, если вы просматриваете исходный код Firefox, например. searchfox.org/mozilla-central/rev/ Почему вы приняли другой ответ? - person brianskold; 05.11.2020
comment
Я принял другой ответ, потому что нашел ответ и ответил на него. Я бы с радостью изменил принятый ответ на ваш, если бы вы упомянули, что являетесь основным автором, дождались ответа о том, почему я принял другой, а затем обновили ваш, чтобы он содержал эту информацию. Но вместо этого вы рефлекторно проголосовали за мой ответ, который действительно ответил на вопрос, по-видимому, с вашей прямой цитатой, в отличие от вашей, как только я опубликовал его. Почему вы забыли упомянуть, что вы автор в своем исходном ответе? - person Slbox; 05.11.2020

Похоже, что will-change на самом деле совершенно не нужен при использовании WAAPI (API веб-анимации).


если у вас есть задержка анимации, вам не нужно беспокоиться об использовании will-change. -- Источник

От одного из авторов спецификации:

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

person Slbox    schedule 04.11.2020
comment
Это неправильно. Пожалуйста, смотрите мой ответ выше. Я являюсь основным автором указанной вами спецификации веб-анимации. Я добавил текст, который требует, чтобы браузеры применяли изменение воли к анимированному контенту во время его задержки. Тем не менее, will-change по-прежнему полезен, поскольку позволяет браузеру распределять содержимое по уровням до того, как вы примените анимацию. - person brianskold; 05.11.2020
comment
Довольно странно, что вы голосуете против прямой цитаты из себя. Извините, если что-то не так, но все, что я могу сделать, это использовать то, что я могу найти. Сейчас я не принял свой ответ, но должен сказать, что ваш подход к тому, чтобы показать мне, что я ошибаюсь, оставляет много желать лучшего... - person Slbox; 05.11.2020
comment
Почему эта цитата неверна? Не произойдет ли это разделение на слои благодаря использованию задержки WAAPI? И как его применение через ключевые кадры может работать лучше, чем то, что браузер применил бы с помощью задержки? Кажется, назад. Вы автор, так что вы, очевидно, знаете лучше, но если вы не возражаете, немного объясните, это будет иметь большое значение. - person Slbox; 05.11.2020
comment
Резюме неверно, потому что неправда, что will-change совершенно не нужен при использовании API веб-анимации. По-прежнему полезно разрешить браузеру распределять содержимое по слоям, прежде чем применять анимацию, как упоминалось в моем комментарии. - person brianskold; 05.11.2020
comment
Извините, я понятия не имею, каково значение отрицательного голоса. Я проголосовал за него, потому что это неправильно, и я пытался указать людям на правильный ответ. Разве не так работает голосование? - person brianskold; 05.11.2020
comment
Я просмотрел отрицательные голоса (поскольку я ничего не знаю об этих вещах), и если вас беспокоят цифры репутации, по-видимому, я могу отказаться от отрицательных голосов, если вы отредактируете ответ. Прости за это. Я действительно понятия не имел, что это было проблемой. - person brianskold; 05.11.2020
comment
Кроме того, когда я говорю о том, что will-change все еще полезен, я имею в виду применение его к элементу вне диапазона, например. через таблицу стилей или атрибут стиля, а не через ключевые кадры. Для настольного сценария, где кнопка анимируется при нажатии, вы можете применить will-change, например, к :hover или :focus. - person brianskold; 05.11.2020
comment
Не беспокойтесь, я понимаю. Стек — странное место с тем, как обрабатываются отрицательные голоса. Если бы вы могли обновить свой ответ, включив в него цитату, которую я включил в свою, и добавить предостережения, на которые вы указываете, что will-change по-прежнему полезен для анимации/переходов/всего, что запускается вне WAAPI, я был бы рад принять ваш ответ. - person Slbox; 06.11.2020