2011-03-28 246 views
10

我有興趣在HTML5/JQuery中進行更多類似Flash的動畫。動畫選項HTML5畫布/ CSS3/jQuery

浮動的想法之一是飛行的鳥類,角色動畫和「tween」類動畫序列。我是背景的閃存開發者,所有這些都是基於Flash基於時間軸的運動補間系統的第二天性,所以我想知道HTML5 Canvas,CSS3和jQuery等新興技術有什麼可能?在動畫這樣的補間中,這些技巧有多熟練?什麼是一個很好的起點讀?

例如,在http://www.thewildernessdowntown.com/飛鳥是驚人的,他們似乎是3D,可變的方向,速度,旋轉,襟翼,速度。在Flash中可以相對容易地實現這一點,創建集片動畫作爲動畫片段,在舞臺上生成這些動畫,並以各種速度甚至在PV3D中將它們在tweenlite中移動,但我不知道如何在畫布上實現。

簡而言之,關於如何實現上述內容的想法,關於Flash以外的此類動畫的優秀閱讀材料以及您可能會遇到的任何常規技巧將非常感謝。

感謝

回答

7

「HTML5」中有三個動畫選項:畫布,SVG和CSS動畫(以及良好的舊Javascript動畫)。你使用哪一個取決於你想要完成什麼以及你希望他們運行哪些瀏覽器。

如果您嘗試定位移動設備,例如,CSS動畫是您的唯一選擇,因爲Canvas一般速度太慢,而Android在蜂巢之前沒有SVG。還有一些SVG功能在iOS上尚未啓用(例如動畫文本路徑)。

這裏是我的intro presentation to CSS animations,也是我們的Sencha Animator工具的簡介,它在alpha中已經出現。

對於桌面畫布非常棒 - 儘管它在Chrome 10和IE9中的效果非常好 - Safari可能會有點慢,特別是隨着動畫元素數量的增加,IE7/8中不存在(而我還沒有測試過FF4)。

+0

這是完美的謝謝。我也一直在尋找格蘭特斯金納的js時間線控制和他在位圖排序方面的一些實驗,但是即使作爲alpha版本,這似乎也更加成熟。 – digitalpencil 2011-03-29 12:51:42

+0

謝謝你,它很棒:) – Subhajit 2013-05-16 12:12:02

0

你可以檢查出processingjs它使用畫布2D和3D可視化。我用processingjs做了一個小的可視化,並且獲得一些好的結果是相當容易的。

使用processingjs的好處在於,您的動畫不僅可以在瀏覽器中運行,還可以在本機處理工具中運行。

0

在thewildernessdowntonwn中,我認爲鳥類使用svg和一些javascript來運行遠離鼠標(因爲每個人都知道鼠標可以吃鳥:))。

我認爲,在這個「轉換時刻」,javascript/css3對於簡單的動畫可能非常有用,因爲某些東西出現或以某種方式移動。 使用動畫也有點複雜,因爲Mozilla和Opera只支持css3過渡並且暫時沒有動畫。

等一下,仍然有可能製作一些硬動畫,但是你將不得不用轉換轉換和有時轉換原點。 你可以有一些很好的信息有: ​​

好點與SVG是,這是建立更像是一個「traditionnal flash動畫」是動畫,它可以通過JavaScript和CSS3得以控制。 由於所有「現代瀏覽器」都像測試sunspider一樣在進行測試,所以Javascript變得越來越強大。 所以你可以用Javascript來做很多事情,我認爲不久之後,一個wysiwyg編輯器會輸出一個乾淨的css3代碼(我認爲adobe是正確的?)。

另一方面有這些技術調用WebGL,它允許你通過使用HTML5畫布和一些嚴重的JavaScript來編寫2D和3D應用程序,使您可以使用GPU的功能做一些驚人的東西。

我希望它能幫助您瞭解這些新興技術。

1

有一個關於使用html5和javascript編寫動畫starfield的小示範。查看this page中的JavaScript代碼。