代码之家 › 专栏 › 技术社区 › qbuffer

如何延迟吐温。点击按钮前的js动画?(3.js)

tweenjs tween.js tween three.js javascript

0

qbuffer · 技术社区 · 9 年前

我想让我的相机的tween动画只在单击对象时开始。这个物体可能是我的三个物体中的一个。js场景,或者只是一个HTML按钮。这是我的摄像机动画代码,它可以工作:

            // initial position of camera
            var camposition = { x : 0, y: 0, z:3100 };
            // target position that camera tweens to
            var camtarget = { x : 0, y: 0, z:8500 };
            var tweencam = new TWEEN.Tween(camposition).to(camtarget, 1600);

            tweencam.onUpdate(function(){
                camera.position.x = camposition.x;
                camera.position.y = camposition.y;
                camera.position.z = camposition.z;
            });

            // delay tween animation by three seconds
            tweencam.delay(3000);

            tweencam.easing(TWEEN.Easing.Exponential.InOut);

            tweencam.start();

我不想将动画延迟三秒钟,而是想检测鼠标1按钮被单击的时间,然后启动动画。不确定如何做到这一点,或者是否有更简单的替代方法?

1 回复 | 直到 9 年前

1

2

Obsidian Age 9 年前

您所要做的就是将tween的开头封装在一个函数中,然后单击按钮调用此函数:

function launchTween() {
  tweencam.start();
}

<button onclick="launchTween()">Launch Tween</button>

整个代码如下所示:

// initial position of camera
var camposition = {
  x: 0,
  y: 0,
  z: 3100
};
// target position that camera tweens to
var camtarget = {
  x: 0,
  y: 0,
  z: 8500
};
var tweencam = new TWEEN.Tween(camposition).to(camtarget, 1600);

tweencam.onUpdate(function() {
  camera.position.x = camposition.x;
  camera.position.y = camposition.y;
  camera.position.z = camposition.z;
});

tweencam.easing(TWEEN.Easing.Exponential.InOut);

function launchTween() {
  tweencam.start();
}

<button onclick="launchTween()">Launch Tween</button>

希望这有帮助!:)