如何使用 web-sys 和 js-sys 对对象进行“动画”处理

Question

我一直在尝试在前端框架中模拟此 JavaScript 代码，但未能获得太多关注。

window.onpointermove = event => { 
  const { clientX, clientY } = event;
  
  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, { duration: 3000, fill: "forwards" });
}

这就是我正在尝试的：

fn animate_blob_to_follow_mouse(event: MouseEvent, blob: Element) {
    let client_x = event.client_x();
    let client_y = event.client_y();
    let keyframes = js_sys::Array::new();

    let keyframe = JsValue::from_str(&format!(
        "{{left: '{}px', top: '{}px'}}",
        client_x, client_y
    ));
    keyframes.push(&keyframe);

    let effect = KeyframeEffect::new_with_opt_element_and_keyframes(
        Some(&blob),
        Some(keyframes.as_ref())
    ).unwrap();

    // Set duration and fill directly on the KeyframeEffect
    let animation = Animation::new_with_effect_and_timeline(Some(&effect), None).unwrap();
    animation.play().unwrap();
}

但是在运行时，这甚至无法构造 KeyframeEffect 对象，因为

keyframes

不是 Object 类型。然而，Object 的文档似乎需要一个对象来创建一个对象。

此外，AnimationTimeline的文档似乎说该对象仅对

current_time()

有用，这似乎对于提供动画的持续时间和填充没有帮助。

简而言之，我认为我没有走在正确的道路上，并且希望得到一些指点。如果使用

web-sys

和

js-sys

复制此 JS 代码很简单，那么我将感谢一个有效的示例。

Answer 1

我已经设法让它像这样工作：

let keyframes = JsValue::from_serde(&json!([
    {"transform": "translate(0rem, 10rem)"},
    {}
]))
.unwrap();

image.animate_with_f64(Some(&keyframes.try_into().unwrap()), 200.0);