我需要一些代碼來動畫我的精靈

Question

我嘗試了很多不同的方法，但似乎沒有任何效果，因此我希望這里的人有一些空閑時間並希望提供幫助。 我正在嘗試為精靈帶的動畫創建javascript，該精靈帶具有垂直堆疊的11張圖像，每幀為640 x889。我希望動畫在窗口打開時開始並前后運行3次，然后停止。 該序列有11幀，應進行1 .... 11然后11 ... 1，三遍，總共需要3秒鍾才能完成三個循環。 先謝謝您的幫助。

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.8.2.js"></script>
    <meta name ="viewport" content = "width=640, user-scalable=yes">
    <link rel="stylesheet" href="animate.css"/>
    <title>Website</title>
</head>
<body>
    <div id="bmw-glow">
    <script type="text/javascript">
    var fps          = 11,
    currentFrame = 0,
    totalFrames  = 11,
    elem         = document.getElementById("bmw-glow"),
    currentTime  = new Date().getTime();

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

  currentFrame += (delta * fps);

  var frameNum = Math.floor(currentFrame);

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

  requestAnimationFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * 889) + "px";

  currentTime = time;
})(currentTime);
</script>
</div>
</body>
</html>

CSS：

#bmw-glow {
  width: 640px;
  height: 889px;
  margin: 0px;
  background: url("images/Social/Social_6_S.jpg");
}

Answer 1

你的問題是，requestAnimationFrame沒有定義。 並非所有瀏覽器都實現它。

我在這里找到墊片

    // shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

並更新了你的小提琴

現在它可以執行某些操作，但我認為這與您的想法不符！

Answer 2

擴展Matt的答案： http : //jsfiddle.net/Shmiddty/xtQDn/5/

首先，您需要“遮蓋”動畫，以便一次只能看到一幀。 為此，只需將容器的寬度和高度設置為一幀的大小：

#bmw-glow {
  width: 104px;
  height: 144.45px; /* Fractional pixels are not good. */
  margin: 0px;
  background: url("http://i45.tinypic.com/4qj0b5.jpg") no-repeat;
}

其次，我修改了為我們提供當前幀為絕對正弦波的代碼。 這給我們帶來了一些放松，這並非在所有情況下都可取，但我認為這種情況很好。

var freq     = 1,  //frequency of the animation. Roughly how many times per second it should loop. Higher number is faster, lower number is slower.
currentFrame = 0,
totalFrames  = 11,
deltaFrame   = 1,
frameStep    = 1589 / totalFrames,
elem         = document.getElementById("bmw-glow"),
currentTime  = new Date().getTime();

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

  currentFrame += (delta);

  var frameNum = Math.floor(Math.abs(Math.sin(currentFrame*freq) * totalFrames));

  requestAnimFrame(animloop);

  elem.style.backgroundPosition = "0 -" + (frameNum * frameStep) + "px";

  currentTime = time;
})(currentTime);

顯然，在此示例中，存在一些抖動，因為我們正在處理小數像素。 我認為您上傳到tinypic的圖片已按比例縮小，這就是這種情況發生的原因。

我需要一些代碼來動畫我的精靈

問題描述

2 個解決方案

解決方案1
0 2012-11-02 21:41:18

解決方案2
0 已采納 2012-11-05 15:48:27

我需要一些代碼來動畫我的精靈

問題描述

2 個解決方案

解決方案1 0 2012-11-02 21:41:18

解決方案2 0 已采納 2012-11-05 15:48:27

解決方案1
0 2012-11-02 21:41:18

解決方案2
0 已采納 2012-11-05 15:48:27