javascript関数を呼び出すことによってスムーズモーションでオブジェクトを移動する方法

Question

オブジェクトを{x = 0、y = 0、z = 0}から{x = 5、y = 0、zに移動できるようにしたい= 0}から{x = 5、y = 5、z = 0}に変更します（スクリプト内でchangeX（5）のような関数を呼び出すことによって）。私はsetInterval（といくつかの他のメソッド）でjavascriptループを作成することでこれを試しました。しかしのsetInterval iは、例えば、これを行う際に、非ブロッキング関数である：、

changeX(5); 

changeY(5); 

から私のオブジェクトが移動{X = 5に{X = 0、Y 0、Z = = 0}、yは5 = 、z = 0}を通過することなく、{x = 5、y = 0、z = 0} changeX（n）は（XCO + n）が可変XCOを調整し、Iはループを有する：

function render() { 
    sphere.setAttribute('position', coords()); 
    requestAnimationFrame(render); 
} 
function coords() { 
    return `${xCo} ${yCo} ${zCo}`; 
} 

右座標にオブジェクトを配置します。

私はこれを解決する方法があります/実行時にAフレームアニメーションを追加する方法はありますか？

Answer 1

最も一般的なアニメーション技法であるキーフレームアニメーションを直線補間で使用できます。

let keyframe = new Array(); 
// Keyframe components: Time and X,Y,Z coordinates for that time 
keyframe.push({t:0.0,x:0,y:0,z:0}); 
keyframe.push({t:1.5,x:5,y:5,z:0}); 
keyframe.push({t:2.4,x:3,y:0,z:1}); 

補間機能：これを使用する

function getInterpolation(out, time) { 

    // select proper segment 
    let j = 1; 
    while(time >= keyframe[j].t && j < (keyframe.length-1)) j++; 
    let i = (j - 1) % keyframe.length; 

    // Time phase 0 to 1 between keyframes 
    let T = (time - keyframe[i].t)/(keyframe[j].t - keyframe[i].t); 

    // linear interpolation 
    out.x = keyframe[i].x + T * (keyframe[j].x - keyframe[i].x); 
    out.y = keyframe[i].y + T * (keyframe[j].y - keyframe[i].y); 
    out.z = keyframe[i].z + T * (keyframe[j].z - keyframe[i].z); 
} 

方法：あなたはどのように仕事上のラフなアイデアを持って

let time = 0.0; 
let coords = {x:0,y:0,z:0}; 

function render() { 

    time += 0.016667; // fake clock 

    getInterpolation(coords, time); 

    sphere.setAttribute('position', coords); 
    requestAnimationFrame(render); 
} 

、あなたはいくつかの部分を最適化することができ、それをより作りますmodulare、あなたはまた、実際のタイマーを実装することができます、ループプロセスを追加します。また、線形のもの以外の補間を使うこともできますが、これは別の（より数学的な）対象になります。