通过网络动画 API 应用 'will-change' 是否会达到预期的效果？

Question

The general rule of thumb is that if the animation might be triggered in the next 200ms [...] then having will-change on animating elements is a good idea. For most cases, then, any element in your app’s current view that you intend to animate should have will-change enabled for whichever properties you plan to change.

所以我的问题是，是否可以在任何属性实际动画化之前通过网络动画 API 应用 will-change，这会产生预期的效果吗？还是在幕后发生的任何事情的生命周期中，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
);

Answer 1

是的，它会达到预期的效果。

动画会影响元素的计算样式，但许多 DevTools 面板会显示元素的指定样式，因此您在那里看不到它。

另一种方法是简单地向动画添加一个短暂的延迟。在动画的延迟阶段，浏览器需要应用 will-change: opacity（或正在动画的任何其他属性）。 (Spec reference)

也就是说，这样做真的没有什么好处。应用 will-change 的目的是让浏览器准备动画内容（例如通过 re-rasterizing 将其作为单独的层）以便动画立即开始。如果您只是正常启动动画，浏览器将根据需要 re-rasterize 然后从头开始播放动画。

使用 will-change 的优点是如果您知道在之前需要启动动画，您可以让浏览器执行此操作提前准备。

Answer 2

看起来will-change在使用WAAPI时实际上是完全没有必要的（网络动画API。）

if you have a delay on your animation, you don’t need to worry about using will-change. -- Source

来自规范的作者之一：

If you have a positive delay, you don’t need will-change since the browser will layerize at the start of the delay and when the animation starts it will be ready to go.

通过网络动画 API 应用 'will-change' 是否会达到预期的效果？

Would 'will-change' applied via the Web Animations API have the desired effect?

css

animation

web-animations

will-change

web-animations-api

想法示例：