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

我試了一堆不同的東西，似乎沒有任何工作，所以我希望這裏有人有一些空閒時間，並希望幫助。我正在嘗試爲一個精靈條帶創建一個動畫，它有11個圖像垂直堆疊，每幀的大小爲640 x 889。我希望動畫在窗口打開時開始，並通過幀來回運行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"); 
}

來源

2012-11-02 Eric_S

什麼不行？有什麼症狀？添加一個jsfiddle鏈接到帖子。 – akonsu

它似乎只顯示第一幀，並沒有任何動畫。當正確使用時，寶馬的周圍應該有黃色的光芒。 http://jsfiddle.net/xtQDn/1/ –

你檢查了控制檯嗎？獲取任何錯誤？ – Shmiddty

擴展在馬特的答案：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的圖像被縮小了，這就是發生這種情況的原因。

來源

2012-11-05 15:48:27 Shmiddty

謝謝，這是非常感謝。我實際上最終通過創建兩個圖像來解決我的問題，一個用於背景，另一個用於發光，我使用jQuery的.fadeToggle爲淡化效果設置動畫效果。 –

我應該怎麼做才能跳到第一步而不是倒退？ – siniradam

您的問題是requestAnimationFrame沒有定義。它沒有被所有瀏覽器實現。

我發現了一個墊片here

// 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); 
      }; 
})();

和更新您的fiddle

現在做一些事情，但我不認爲這正是你腦子裏想的是什麼！

來源

2012-11-02 21:41:18

不，框架周圍的寶石亮度上升，我想動畫，所以它看起來像一個流動的輝光繼續下去。感謝您的幫助。 –

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

回答

相關問題