连续设置 Web Animation API 的 currentTime 属性 有什么 Performance/Efficiency 含义？
What are the Performance/Efficiency implications of setting Web Animation API's currentTime property continuously?
在毫秒内连续更新 Web 动画的 currentTime 属性 有什么 Performance/Efficiency 含义？
我想做的是将网络动画在其时间范围内的当前点与用户在屏幕上平移手指联系起来。通常，这是通过从指针移动事件调用 requestAnimationFrame 并直接在元素上设置 css 属性来完成的。但是，我想改用网络动画。
let animatedObj = animatedEl.animate(props, timing)
animatedObj.pause()
el.addEventListener('pointermove', (event) => {
animatedObj.currentTime = (.... percentage of pointer position ....)
})
但它是否比 requestAnimationFrame 和直接设置 css 属性更容易出现卡顿或耗电？设置 currentTime 不是为在 ms 内持续更新而设计的吗？在设置动画的 currentTime 的同时使用 requestAnimationFrame 会更好吗？
以这种方式设置 currentTime 是完全可以接受的，理论上应该比直接设置 CSS 属性性能更高，因为 CSS 属性 值不' 每帧都需要 re-parsed。然而，在实践中，差异应该可以忽略不计。通过使用网络动画，您还可以使用缓动效果等，这可能是一个优势。
我假设您的示例中的 animatedObj 已暂停。通过暂停它，您可以确保它不会在平移位置不变时不必要地触发样式更新。
通过使用 requestAnimationFrame 你可以确保你的回调是 运行 在样式更新之前（但在动画时间更新之后），在某些情况下，这可能意味着你可以避免弄脏和两次更新样式从而产生更好的性能。不过，最终，这将取决于您的应用程序，因为它可能会通过从 getComputedStyle、innerHeight 等
中读回值来刷新样式
此外，通过使用 requestAnimationFrame，您可以确保每帧只更新一次样式，即使多个事件到达同一帧也是如此。
请注意，性能仍然无法与常规播放的网络动画相媲美，因为与常规动画不同，浏览器无法将此 manually-driven 动画卸载到合成器（这可能减少电池使用，因为样式不需要在主线程上更新）。即将推出的 scroll-linked 动画功能应该对此有所帮助。
在毫秒内连续更新 Web 动画的 currentTime 属性 有什么 Performance/Efficiency 含义？
我想做的是将网络动画在其时间范围内的当前点与用户在屏幕上平移手指联系起来。通常，这是通过从指针移动事件调用 requestAnimationFrame 并直接在元素上设置 css 属性来完成的。但是，我想改用网络动画。
let animatedObj = animatedEl.animate(props, timing)
animatedObj.pause()
el.addEventListener('pointermove', (event) => {
animatedObj.currentTime = (.... percentage of pointer position ....)
})
但它是否比 requestAnimationFrame 和直接设置 css 属性更容易出现卡顿或耗电？设置 currentTime 不是为在 ms 内持续更新而设计的吗？在设置动画的 currentTime 的同时使用 requestAnimationFrame 会更好吗？
以这种方式设置 currentTime 是完全可以接受的，理论上应该比直接设置 CSS 属性性能更高，因为 CSS 属性 值不' 每帧都需要 re-parsed。然而，在实践中，差异应该可以忽略不计。通过使用网络动画，您还可以使用缓动效果等，这可能是一个优势。
我假设您的示例中的 animatedObj 已暂停。通过暂停它，您可以确保它不会在平移位置不变时不必要地触发样式更新。
通过使用 requestAnimationFrame 你可以确保你的回调是 运行 在样式更新之前（但在动画时间更新之后），在某些情况下，这可能意味着你可以避免弄脏和两次更新样式从而产生更好的性能。不过，最终，这将取决于您的应用程序，因为它可能会通过从 getComputedStyle、innerHeight 等
此外，通过使用 requestAnimationFrame，您可以确保每帧只更新一次样式，即使多个事件到达同一帧也是如此。
请注意，性能仍然无法与常规播放的网络动画相媲美，因为与常规动画不同，浏览器无法将此 manually-driven 动画卸载到合成器（这可能减少电池使用，因为样式不需要在主线程上更新）。即将推出的 scroll-linked 动画功能应该对此有所帮助。