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

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

tweenjs tween.js tween three.js javascript

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 年前

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>

希望这有帮助!:)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前