Я хочу анимировать определенный фрейм при нажатии кнопки - requestAnimationFrame

Question

Привет У меня есть анимация, которая представляет собой последовательность из 41 изображений jpeg. Я создал наложение для кликов на кнопках, и я хотел в основном щелкнуть любую из этих кнопок и всегда включать анимацию в определенный кадр. Если вы посмотрите на сферу, обозначенную «Пациент-путешествие», вот где я хочу, чтобы какая-либо сфера была нажата, чтобы переместиться в эту позицию. 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 полных изображений, вы можете попробовать этот ресурс дружественный прием:

• вмещающий DIV с позиции: относительно.

• 1 фон (== все, кроме сфер) с z-index = 1.

• 6 сфера изображений с z-index = 2 с положением: абсолютное.

• изображение головы женщины с z-index = 3 (это визуально «скрывает» любую сферу, которая находится за женщиной).

Затем в кадр анимации,

• Вычислить соответствующее положение для каждой сферы,

• Используйте CSS top и left, чтобы переместить каждую сферу в рассчитанном положении.

Удачи вам в вашем проекте!