자바 스크립트 함수를 호출하여 객체를 스무드 모션으로 이동하는 방법

Question

{x = 0, y = 0, z = 0}에서 {x = 5, y = 0, z로 객체를 이동하고 싶습니다. 예를 들어 내 스크립트에서 changeX (5)와 같은 함수를 호출하여 {0 =}에서 {x = 5, y = 5, z = 0} 나는 setInterval (와 몇 가지 다른 메소드)로 자바 스크립트 루프를 만들어 이것을 시도했다. 그러나 setInterval을 비 차단 기능은 그래서, 예를 들어 다음을 수행

changeX(5); 

changeY(5); 

는 행 내 개체 이동 {X = 0, Y = 0 일, Z = 0}에가 {X = 5, y는 5 = , z = 0}을 통과하지 않고 {x = 5, y = 0, z = 0} changeX (n)은 변수에 XCO (XCO + N)를 조정 및 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}); 

보간 기능 :

이

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); 
} 

당신은 그 일이, 당신은 몇 가지 부품을 최적화 할 수있는 방법에 대한 거친 생각을 가지고, 그것을 더합니다

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); 
} 

이를 사용하는 방법 modulare, 또한 실제 타이머를 구현하고 루프 프로세스를 추가 할 수 있습니다. 선형 보간법과 다른 보간법을 사용할 수도 있지만, 이것은 다른 수학적 주제가 될 것입니다.