버튼을 클릭하면 특정 프레임에 애니메이션을 적용하고 싶습니다. - requestAnimationFrame

Question

안녕하세요. 저는 41 개의 JPEG 이미지 시퀀스 인 애니메이션을 가지고 있습니다. 버튼 클릭에 대한 오버레이를 만들었고 기본적으로 해당 버튼 중 하나를 클릭하여 애니메이션이 항상 특정 프레임으로 이동하게하고 싶었습니다. "Patient Journey"라고 표시된 영역을 보면, 그 위치로 이동하기 위해 클릭 된 구가 원하는 부분입니다. var animate; var fps = 6, currentFrame = 0, totalFrames = 42, img = document.getElementById ("myImage"), currentTime = rightNow();

function rightNow() { 
    if (window['performance'] && window['performance']['now']) { 
    return window['performance']['now'](); 
    } else { 
    return +(new Date()); 
    } 
} 


function animloop(time){ 
    var delta = (time - currentTime)/1000; 

    currentFrame += (delta * fps); 

    var frameNum = Math.floor(currentFrame); 

if (frameNum >= totalFrames) { 
    currentFrame = frameNum = 0; 
    } 

animate = requestAnimationFrame(animloop); 

img.src = "images/sequence/CommercialExcellence_09_12_15_000" + 
(frameNum < 43 ? "" : "0") + frameNum + ".jpg"; 

currentTime = time; 

}(currentTime); 

Answer 1

는 클릭 한 영역까지 빨간색 경로를 따라 구를 움직이는 애니메이션이 여자의 앞에인가?

예, 다음로드하는 대신 42 개 전체 이미지, 당신이 자원 친화적 인 트릭을 시도 할 수 있습니다 경우 위치에

• 포함 사업부 : 상대를.

• 1 배경 (= 모든 것은 구체를 제외하고 모든 것)은 z- 색인 = 1입니다.

• z- 색인 = 2 인 6 개의 구형 이미지 (위치 : 절대).

• z- 색인 = 3 인 여성의 머리 이미지 (이 표시는 여성 뒤에있는 구를 시각적으로 '숨 깁니다').

이어서 애니메이션 프레임에서

• 계산 된 위치로 각 구를 이동하는 각 분야에 대해 적절한 위치

• 사용 CSS top 및 left 계산.

프로젝트가 성공적으로 완료되었습니다.