Flash和Javascript中的閃爍/生澀/口吃動畫

以下是演示： http://nushuttles.com/chords/player.html
頂部正方形在Flash中呈現，下部正方形由Javascript動畫。

正如您可能知道的那樣，在Flash和Javascript動畫中每隔幾秒會出現一些偶然的閃爍，急動或口吃。我會想象會發生這種情況，因爲計算機偶爾會將其資源用於其他進程，從而使Flash播放器和Javascript掛起幾毫秒。我已經在其他許多Flash和Javascript動畫中看到過這一點，但是當你試圖在屏幕上以恆定速度移動某些東西時，它纔會變得很明顯......不幸的是我需要做的事情。

對於Flash盒，我將flash播放器的「wmode」參數設置爲「direct」，這應該提供最佳性能。我還使用了一個名爲GTween的庫，而不是隻增加x座標。這些都不能完全阻止口吃。

對於Javascript框，我使用了一個名爲requestAnimationFrame的東西，如下所述：http://creativejs.com/resources/requestanimationframe/。我也嘗試使用畫布。仍然沒有更好的。

有沒有什麼辦法在Flash或Javascript中獲得完美的流暢動畫？有什麼辦法可以讓Flash播放器給予它更高的優先級？Flash和Javascript中的閃爍/生澀/口吃動畫

來源

2012-10-04 user1718729

我不確定爲什麼你的JavaScript動畫像現在一樣生澀/浮華。我用CSS爲你做了一個類似的動畫，它不是很生澀，並沒有展示Flash。我把代碼in this jsFiddle。

HTML

<div id="outer"> 
    <div id="abox"><div> 
</div>

CSS

#outer { background-color: black; width: 500px; height: 500px; } 
#abox { 
    position: relative; top: 20px; 
    background: red; 
    width: 100px; height: 100px; 
}

的JavaScript/jQuery的：

$(document).ready(function(e) { 
    var ttime, $abox, width, toRight; 

    ttime = 4000; 
    $abox= $("#abox"); 
    width = $("#outer").outerWidth() - $abox.outerWidth(); 
    toRight = true; 
    function swing() { 
     var leftTo = (toRight ? width : 0); 
     toRight = !toRight; 

     $abox.animate({ 
      left: leftTo 
     }, ttime, function() { 
      setTimeout(swing, 50); 
     }); 
    } 

    setTimeout(swing, 50); 
});

來源

2012-10-04 02:28:13

Flash和Javascript中的閃爍/生澀/口吃動畫

回答

相關問題