通过网络动画API应用的“意志改变”会有预期的效果吗？

Question

据谷歌称：

一般的经验法则是，如果动画可能在下一个200 is的.中触发，那么对动画元素进行改变是个好主意。在大多数情况下，对于应用程序当前视图中任何要动画的元素，无论您打算更改哪个属性，都应该启用更改。

因此，我的问题是，在任何属性实际上是动画之前，will-change是否可以通过网络动画API应用，这会产生预期的效果吗？或者，在幕后发生的任何事情的生命周期中，让will-change正常工作是不是太晚了？

似乎通过这个API修改的属性实际上并没有作为CSS属性反映在DevTools中，所以我无法验证这是否真的应用了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

看起来，在使用WAAPI (Web动画API)时，will-change实际上是完全不必要的。

如果你的动画有一个延迟，你不需要担心使用意志改变。-- 来源

来自规范的作者之一：

如果你有一个积极的延迟，你不需要改变，因为浏览器将分层在开始的延迟，当动画开始，它将做好准备。

Answer 2

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

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

另一种方法是简单地给动画添加一个短暂的延迟。在动画的延迟阶段，浏览器需要应用will-change: opacity (或其他正在动画的属性)。(规范参考)

尽管如此，这样做确实没有好处。应用will-change的目的是让浏览器为动画准备内容(例如，将其重新栅格为单独的层)，这样动画就可以立即启动。如果您只是正常地启动动画，浏览器将根据需要重新扫描，然后从一开始就开始动画。

使用will-change的好处是，如果您在需要启动要动画的元素之前就知道了，您可以让浏览器提前做好准备。