일정 기간 동안 여유를 가지고 움직이는 움직임

Question

나는 물건을 일정한 거리만큼 움직이고 움직이기 쉽게하고있다.

this.x/y 객체 moveable의 종점을 대상 이 this.time을 완료하는 움직임 걸리는 프레임의 양이 운동이

를 시작한 이후 경과 한 프레임의 양입니다 this.duration입니다 :이 있습니다

moveable.x += 
    (Math.cos(Math.PI * 2 * (this.time/this.duration) + Math.PI)/2 + .5) * ((this.x - moveable.x)/(this.duration - this.time)) * Math.PI; 

moveable.y += 
    (Math.cos(Math.PI * 2 * (this.time/this.duration) + Math.PI)/2 + .5) * ((this.y - moveable.y)/(this.duration - this.time)) * Math.PI; 

이 개체는 이동해야 할 곳과 매우 가까운 곳에서 개체를 가져옵니다. 어떤 종류의 방정식을 사용해야하는지 잘 모르겠습니다. 어떤 도움이 필요합니까?

추신 : 내가 가지 않을 다양한 이유 때문에 속도와 가속을 사용하지 않을 것입니다.

Answer 1

당신은 CSS 애니메이션 및 전환을 사용할 수 있지만 우리는 (이론적으로) 당신의 자바 스크립트 고수 경우 :

을 완화하기 위해 다음 밖으로 완화 :

함수 (COS를 고려 (π (X +1)) +1)/2. 이것은 x가 0에서 1로 갈수록 0에서 1로 줄어 듭니다. += 대신에 moveable을 재정의했습니다.

var init=[x:moveable.x , y:moveable.y] // initial position 
... 
moveable.x = 
(Math.cos(Math.PI*(this.time/this.duration+1))+1)/2 //goes from 0 to 1 
    * (this.x - init.x) //total difference in position (now goes from 0 to dx) 
    + init.x // goes from init.x to this.x 

그런 다음 y에 대해 반복 할 수 있습니다.