使用Javascript重新創建簡單的Flash動畫

Question

我在jQuery，mootools或原型中創建了一個真正銳利的介紹效果：http://www.johndigweed.com/（只是旋轉效果）所以從某種意義上說，我想旋轉在頁面的主要內容div中。

任何建議開始或有基地插件，有助於在Flash之外實現這個介紹效果？或者，這種效果甚至可以用JavaScript來做？

我是JavaScript的許諾謝謝你！

Answer 1

它不會在每個站點和任何瀏覽器還沒有工作，但它是一個開始：

var i = -90, 
    ii = -900, 
    timer, 
    body = jQuery("body"); 

function rotation() { 
    body.css({ 
     '-moz-transform': 'rotate('+(i++)+'deg)', 
     top: (ii+=10) + "px" 
    }); 
    if(i>0){ 
     clearInterval(timer); 
    } 
} 

body.css({ 
    '-moz-transform': 'rotate('+i+'deg)', 
    top: ii+"px", 
    position: "absolute" 
}); 

timer = setInterval(function(){rotation();}, 100); 

Answer 2

作爲一般規則，假設有些事情是可能的，直到你給自己一個腦震盪。

無論如何，有可能做基於JavaScript的動畫，簡單的東西已經在jQuery等實現（幻燈片和淡入淡出等）。

我的初步研究已經導致相信這種動畫目前只能用於webkit瀏覽器（和IE，使用非常不同的方法和線性代數）。有一個叫-webkit-變換具有值爲「旋轉（）」

您可以設置旋轉WebKit的風格（這裏使用jQuery，因爲它是我知道的）是這樣的：

jQuery("#div").css('-webkit-transform', 'rotate(20deg)') 

的deg位是重要的，否則它不起作用（你也可以使用弧度rad而不是deg）

請記住，這隻適用於webkit瀏覽器，這意味着safari和chrome。 Mozilla可能會使用類似的方法。

Answer 3

爲此，您可以使用以下jQuery插件。

http://code.google.com/p/jquery-rotate/

後您包括jQuery和這個插件，你可以簡單地這樣做：

function rotation() { 
    //being #theimage the element id that you want to rotate 
    $('#theimage').rotateRight(45); 
} 

$("document").ready(function(){ 
    setInterval("rotation()",1000); 
}); 

這段代碼很容易理解。文檔準備就緒後（DOM準備就緒），您只需每1秒調用一次函數rotation()。每次執行旋轉時，都會將圖像旋轉45度。

這更容易做到這個HTML5畫布。如果你想我可以發佈代碼來做到這一點。