CreateJS 鏈式動畫未達到目標位置

Question

我正在使用 Three.js 和 CreateJS 開發一個項目。 我的動畫有問題，多次移動同一個對象。 第一個動畫永遠不會到達目標位置，因此下一個動畫永遠不會開始。

這是我嘗試之一的 js 代碼：

import * as THREE from './libs/three.module.js'

let box, canvas, renderer, scene, camera;

function init(){
    setUpCamera();
    setUpScene();
    animate();
}
window.addEventListener('load', init);

function setUpCamera() {
    canvas = document.querySelector('.webgl')
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100)
    camera.position.set(0, 10, 15) // 0, 10, 5
    camera.rotation.x = (-40)*  Math.PI / 180

    renderer = new THREE.WebGLRenderer({
        canvas: canvas
    })

}

function setUpScene() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfe3dd);
    scene.add(camera);
    loadBox();
}

function loadBox(){
    let boxGeometry = new THREE.BoxGeometry(5, 5, 5);
    let boxMaterial = new THREE.MeshStandardMaterial( { color: 0x96f2af} );
    box = new THREE.Mesh( boxGeometry, boxMaterial);
    scene.add(box);
}

//This is the animation that won't work
//--------------------------------------------------
function animateBox(){
    console.log("box x position = " + box.position.x);
    createjs.Tween.get(box.position)
        .to({ x: 10 }, 300, createjs.Ease.linear) //this first animation never stops
        .to({ x: -10 }, 300, createjs.Ease.linear); //this second animation never starts
}
//--------------------------------------------------

function animate(){
    animateBox();
    renderer.render(scene, camera);[![enter image description here][1]][1]
    requestAnimationFrame(animate);
}

這是控制台輸出，顯示從未達到目標位置：

Answer 1

看起來您正在為每一幀創建一個新的補間。 Tweens 運行他們自己的 requestAnimationFrame - 所以你應該開始一次補間，而不是每一幀。