JavaScript로 이미지 시퀀스 애니메이션하기

Question

다른 각도의 대상 이미지가있는 시퀀스가 ​​있습니다. 나는 사용자가 마우스를 끌 때 객체가 가려져서 이것을 구현하기를 원합니다.

하지만 내가 원하는 것은 마우스가 이미지 영역을 떠날 때 이미지 시퀀스를 기본 위치로 다시 애니메이션합니다.

예를 들어, 1.jpg는 -180 °이고 30.jpg는 180 ° 인 30 개의 JPEG가 있습니다. 당연히 15.jpg는 0 °에있는 중심 기본 이미지입니다.

따라서 사용자가 (-) 180 °까지 끝까지 회전하면 3 초 후에 0 °으로 돌아갑니다. 하지만 애니메이션을 가능한 한 매끄럽게하고 싶습니다. 어떻게하면 될까요?

Answer 1

가능한 한 매끄럽게하려면 CSS 스프라이트와 다른 모든 이미지가 들어있는 이미지를 사용해야하므로 애니메이션이 시작될 때 프레임이 모두로드됩니다.

그러면 애니메이션이 얼마나 매끄 냐에 따라 지정된 시간 내에 함수를 호출하고 이미지의 배경 속성을 변경하면됩니다. 또는 스프라이트를 사용하지 않는 경우에는 다른 src를 할당하십시오.

초당 프레임 수를 25 이상으로 선택해야한다고 생각합니다. 프레임 속도가 높을수록 애니메이션이 부드럽지만 더 많은 CPU가 사용됨을 의미합니다. 당신은 이미지가 다시 애니메이션을 적용 할 경우

이 당신은 동일한 방법을 적용해야하지만 프레임 번호와 거꾸로가는 기본적인 접근 방식

function next_frame() { 

    frame += 1; 

    // start animation again from the start if last frame reached (optional) 
    if (frame == max_frames) { 
    frame = 0; 
    } 

    /* change either the class of your image (if you use sprites 
    and specified a class for each background position) or the 
    background position property directly. If not using sprites, 
    assign a different image src based on current frame. 
    */ 

    // call the function again 
    setTimeout(next_frame, 1000/25); // change 25 with your desired FPS value. 

} 

입니다.