我想在单击按钮时动画到某个帧 - 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的位置：relative。

• 1背景（==除球体外的所有内容），z-index = 1。

• 6个球面图像，z-index = 2，位置为：绝对。

• 女性的头像，z-index = 3（这在视觉上“隐藏”了女人背后的任何球体。）

然后在动画帧中，

• 计算每个球体的适当位置，

• 使用CSS top和left将每个球体移动到计算位置。

祝你的项目好运！