时间戳

首页 > 解决方案 > 获取当前时间的 Animation KeyframeEffect 属性值？

javascript - 获取当前时间的 Animation KeyframeEffect 属性值？

问题描述

我们如何获取当前时间的 Animation KeyframeEffect 的属性值？

例如，假设我们有以下动画，天真地尝试获取属性的当前值，而不向 传递任何element内容KeyframeEffect，只希望对内存中的数字进行动画处理：

const keyframes = new KeyframeEffect(null, [
    { // from
        someProp: 0,
    },
    { // to
        someProp: 35,
    }
], {duration: 2000, easing: 'ease'})

const anim = new Animation(
    keyframes,
    document.timeline
)

anim.play()

requestAnimationFrame(function loop() {
  console.log('current value of someProp:', keyframes.getComputedTiming().progress * 35)

  if (anim.playState != 'finished') requestAnimationFrame(loop)
}, 100)

的输出不正确，因为我的数学与选择的current value of someProp不相符。easing"ease"

假设我们在 a 上ScrollTimeline，或者currentTime时间线的 以我们不知道的任意方式修改，等等。尝试使用基于当前时间的自定义数学和数组处理自己计算值会变得复杂。

有没有办法简单地访问属性的当前值？

我们想要这样做的原因是看看是否可以使用 Web 动画来为 WebGL 场景、画布绘图或任何不为 DOM 元素 CSS 属性设置动画的东西制作动画。

标签： javascriptweb-animations

解决方案

推荐阅读