获取当前时间的 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" 不一致。

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

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

我们想要这样做的原因是看看是否可以使用 Web Animations 来为 WebGL 场景、画布绘图或任何不为 DOM 元素 CSS 属性设置动画的内容进行动画处理。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript web-animations