mouseleave上的补间变量无法正常工作

Question

我试图在mouseleave上将变量补间降为零，但是当鼠标离开容器时没有任何反应。

我尝试过各种各样的事情。我做错了什么？

以下是代码：

 function ondocumentMouseLeave ( event ){


            new TWEEN.Tween( mouseY )
            .to ( 0 , 500 )
            .easing( TWEEN.Easing.Linear.None)
            .start();


            new TWEEN.Tween( mouseX )
            .to ( 0 , 500)
            .easing( TWEEN.Easing.Linear.None)
            .start();
            }

这是jsfiddle：

https://jsfiddle.net/cxp8rex2/16/

如果这是一个简单的问题我很抱歉，我对此有点新鲜。

Answer 1

您需要使用对象并补间其属性，如：

function ondocumentMouseLeave ( event ) {

  var mouse = {x: mouseX, y: mouseY};

  new TWEEN.Tween( mouse ).to ( { x: 500, y: 500 }, 1000 )
    .easing( TWEEN.Easing.Linear.None )
    .onUpdate(function() {
        mouseX = this.x;
        mouseY = this.y;
    })
    .start();

}

查看tween.js user guide。