자바 스크립트로 요소 이동

Question

자바 스크립트로 요소를 이동하는 가장 좋은 방법은 무엇입니까? 시간 초과 또는 간격을 사용합니까? 10 밀리 초 동안 시간 초과 이벤트가 발생 했습니까? 그렇지 않습니까? 픽셀 단위 또는 전체 거리의 일정 비율로 픽셀을 이동합니까? 간격을 사용하는 경우 요소가 위치 할 때 간격을 어떻게 멈 춥니 까?

자바 스크립트에서 모션을 본 적이있는 마지막 두 번은 jQuery와 Raphael.js와 관련이 있습니다. 둘 중 어느 것도 소스 코드를 이해할 수 없습니다. 좋은 튜토리얼이나 코드 예제가 있습니까? jQuery가 사용하는 메소드에 대한 간단한 설명이 있습니까?

Answer 1

여기에 당신은 좋은 자바 스크립트 애니메이션 자습서를 찾을 수 있습니다. Jquery Animate는 setTimeout을 사용하여 지속 시간, 위치 및 여유 값 계산을 기반으로 객체를 이동합니다.

Answer 2

최대한 빨리 기능을 실행하는 requestAnimationFrame이라는 최근 기능이 있습니다. 이는 애니메이션 목적으로 이으로 만들어 졌기 때문에 좋은 연습입니다.

코딩면에서 작동하는 방식은 setTimeout과 동일합니다. 기능이 완료되면 requestAnimationFrame으로 전화하십시오.

이 함수에서 현재 시간을 가져와 그 시점에 개체의 위치를 ​​확인합니다.

보류중인 기능을 cancelRequestAnimationFrame으로 취소하고 반환 값 requestAnimationFrame을 전달할 수 있습니다.

현재이 기능은 크로스 브라우저가 아니며 기능은 공급 업체 접두사입니다 (예 : Chrome 용 webkitRequestAnimationFrame

예 : http://jsfiddle.net/pimvdb/G2ThU/1/.

var div = document.getElementById('div'); 
var animation; 

function move() { 
    var time = Math.round((new Date()).getTime()/10) % 200; 

    div.style.left = time + 'px'; 

    animation = requestAnimationFrame(move); 
} 

document.getElementById("start").onclick = function() { 
    animation = requestAnimationFrame(move); 
} 

document.getElementById("stop").onclick = function() { 
    cancelRequestAnimationFrame(animation); 
} 

Answer 3

간격은 단지 코드보다는 한 번 프레임 당 한 번 설정 때문에, 생각 바람직하다. 코드를 읽을 때마다 읽는 것보다는 코드를 한 번 읽고 여러 번 재사용하면됩니다.

10ms가 조금 부족합니다. 컴퓨터는 기본적으로 약 16ms 간격을 지원할 수 있습니다. 그런 다음 더 빠른 간격으로 더 정밀한 타이머를 사용할 수는 있지만 전력 소비가 매우 큽니다. IE9는 컴퓨터의 전원 설정에 따라 두 가지를 모두 지원하지만 이상적으로는 50ms (20FPS)보다 빠른 것은 필요하지 않습니다.

저는 애니메이션이 시작된 이후로 경과 한 시간을 기준으로 총 거리의 일부를 이동하는 것을 좋아합니다. 이 방법은 컴퓨터와 브라우저의 속도에 관계없이 애니메이션이 항상 동일한 시간 량을 사용합니다. 보장. 같은

뭔가 :

interval = setInterval(function() { 
    // do stuff 
    if(/*animation ended*/) clearInterval(interval); 
},time); 

jQuery를 약간 쉽게,하지만 개인적으로 나는 아무것도 일반, 오래된 JS에서 직접 작성 친다 찾을 수 있습니다. 자신에게 맞는 프레임 워크에 의존하기보다는 정확하게 진행되는 작업을 훨씬 쉽게 이해할 수 있습니다. http://www.schillmania.com/content/projects/javascript-animation-1

을하지만 당신이 말한 것은 맞다 :