왜 애니메이션 프레임이 작동하지 않습니까?

간단한 애니메이션 프레임을 테스트하려고했지만 지금까지 제대로 작동하지 못했습니다. 화면 오른쪽에있는 AAA 태그를 옮기고 싶습니다.왜 애니메이션 프레임이 작동하지 않습니까?

페이지가로드되어 화면에서 오른쪽으로 천천히 움직일 때 어떻게 움직일 수 있습니까? requestAnimationFrame이 처음입니다.

Sub 질문 : requestAnimationFrame을 사용할 필요는 없지만 JavaScript 코드를 사용하여 화면에서 객체를 움직일 수는 없습니다.

HTML 코드 :

<html> 
<body> 
    <!-- <script language="javascript" SRC="poker.js"></script>--> 
    <div id="test">AAA</div> 
    <script> 
    window.requestAnimationFrame = window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.oRequestAnimationFrame; 


    var start = null; 

    var d = document.getElementById("test"); 

    function step(timestamp) { 
     var progress; 

     if (start === null) { 
     start = timestamp; 
     } 

     progress = timestamp - start; 

     d.style.left = Math.min(progress/10, 200) + "px"; 

     if (progress < 2000) { 
     requestAnimationFrame(step); 
     } 
    } 

    requestAnimationFrame(step); 
</script> 
</body> 
</html>

출처

2014-08-29 Anonymous

것은 당신이 당신의'div'을 이동할 수 없습니다 '절대적'위치 스타일 또는 유사하지 않는 한 가로 건너서 표시됩니다. – akonsu

Paul Irish는 견고한 polyfill을 포함하여 'requestAnimationFrame'을 사용하는 방법에 대한 훌륭한 글을 올리며 시작하는 방법에 대한 예제를 제공합니다. http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ – Jasper

몇 가지 CSS를 추가 할 수 있습니까? 부디? –

당신은 left, right, top 또는 bottom 속성 static 위치 요소를 이동할 수 없습니다.

#test{ 
    position: relative; 
}

left, right, top 및 bottom 속성은 위치 지정된 요소 일 : 당신은 #test 위치 absolute, relative 또는 fixed 작업을 얻을 수를 제공해야합니다. http://jsfiddle.net/carloscalla/t4ynnpbo/

UPDATE 내가 코멘트에서 설명하고있는 바와 같이, 동일한을 달성하기 위해 transition CSS 속성을 사용할 수도

: 기본적으로 요소는 position: static;

근무 샘플을 가지고있다.

귀하의 CSS는 다음과 같습니다

#test2{ 
    position: relative; 
    -webkit-transition: all 2s linear; 
    -moz-transition: all 2s linear; 
    -o-transition: all 2s linear; 
    -ms-transition: all 2s linear; 
    transition: all 2s linear; 
    left: 0; 
}

그리고 JS 코드의 단지 1 라인 :

document.getElementById("test2").setAttribute('style', 'left: 200px');

근무 샘플 : http://jsfiddle.net/carloscalla/t4ynnpbo/1/

출처

2014-08-29 16:59:04

하지만 animationFrame을 사용하지 않고 똑같은 작업을 수행 할 수 있습니까? –

@ user3376708 맞습니다. 애니메이트하고자하는 요소에'transition' CSS 속성을 사용하고 JS에 의해'left','top','right' 또는'bottom' CSS 속성 값을 간단히 변경하여 애니메이션을 적용 할 수 있습니다 너무. 당신이 jQuery가 아닌 vainilla JS를 사용하고 있기 때문에'.animate()'jQuery 메서드를 사용하는 데 조언을하지는 않았지만 이것을 사용할 수도 있습니다. –

@ user3376708'transition' CSS 속성을 사용하여 작업 샘플에 대한 업데이트를 확인하십시오. '.animate()'jQuery 메서드로도이 작업을 수행 할 수 있지만 바닐라 JS를 사용하고 있기 때문에 jQuery를 포함하지 않았다. –

왜 애니메이션 프레임이 작동하지 않습니까?

답변

관련 문제