Javascript 对于A帧（和anime.js），如何在动画中间更改动画速度？

我正在使用A形框架制作一个示例。 场景由浮动对象（在两个不可见边界之间反弹）组成。 这是使用动画混合实现的，如下所示：

<a-mixin id="bounceX"
   animation__bouncex="property:object3D.position.x;  to:5; dir:normal;
                        loop:1; dur:3600; easing:linear;
                        startEvents:bouncex;pauseEvents:holdx;resumeEvents:bounceOnx"
></a-mixin>

现在，对于与浮动对象的交互，当鼠标光标悬停在对象上时，它应该减慢速度，如果用户单击它，它应该停止。如果鼠标光标未单击就离开对象，则应以其原始速度继续移动。 我能够捕获mouseenter、单击和mouseleave事件，并将它们记录到控制台

代码的问题部分是：如何在飞行途中更新动画以使其减速？ 我尝试更新el.components.animation\uuu bouncex.config和el.components.animation\uuuu bouncex.data中的值（持续时间，dur），但运气不佳。 这不起作用，直到动画完成，速度才改变

AFrame>components>animation.js提到以下内容：

* The component manually controls the tick by setting `autoplay: false` on anime.js and
 * manually * calling `animation.tick()` in the tick handler. To pause or resume, we toggle a
 * boolean * flag * `isAnimationPlaying`.

此处的故障片段：

您可以使用my（），它允许您提供速度系数：

// speed up <a-box animation="" by 2x
element.setAttribute("animation-speed", "multiplier", 2);

如果我们为“反弹”对象添加一些边界并更改速度，我们最终会得到如下结果：

//组件声明
AFRAME.registerComponent（“foo”{
init:function（）{
this.xMax=4；//x上边界
this.xMin=-4；//x下边界
this.speed=0.005；//基本移动速度
this.dir=1；//动画方向
//将鼠标悬停在球体上将更改动画速度
const-sphere=document.querySelector（“a-sphere”）
this.speedUp=this.changeSpeed.bind（this，0.01）；
this.slood=this.changeSpeed.bind（this，0.005）；
sphere.addEventListener（“mouseenter”，this.speedUp）//悬停
sphere.addEventListener（“mouseleave”，this.delook）//离开
},
变速器（spd）{
该速度=spd；
},
勾选：函数（t，dt）{
//抓住底层的THREE.js位置
const pos=this.el.object3D.position
//检查对象是否已通过边界-如果已通过，请更改方向
如果（pos.x>this.xMax）this.dir=-1；
如果（pos.x

我确实知道如何使用

动画

组件实现同样的效果，但这会有点复杂，我会尝试将其添加到回答中谢谢！我更新了示例以包含您的代码（只需将加速/减速分配交换为mouseleave/mouseenter）。我将期待动画的更新。另外，想知道两者之间的性能差异是什么（动画更新和上面的示例）。性能是更好还是更差？如果一个简单的

x=velocity*dir*dt

比健壮的animejs库要慢，我会非常惊讶。它考虑了多种因素。我想我已经做到了。如果你喜欢，请告诉我。如果您确实愿意启动回购（或一些反馈：）

// speed up <a-box animation="" by 2x
element.setAttribute("animation-speed", "multiplier", 2);

// called on each render loop
tick: function(t, dt) {
  // grab the underlying three.js objects position
  const pos = this.el.object3D.position
  
  // position = speed * time
  pos.x = this.speed * dt; // this.speed can be set anywhere in the component
}