使用javascript / css3 / canvas對圖像/ 3D /精靈進行動畫處理
[英]Animating image/3D/sprite with javascript/css3/canvas
問題描述
這里有點兩難。 我正在制作一個網站的移動版本，其中包含一些交互性的內容，更具體地講，我具有可旋轉的3D對象，我在Flash中使用papervision，但由於在移動設備中沒有Flash，我覺得自己在冰上。
我當時正在考慮使用帶有Alpha通道的PNG序列導出360度旋轉@ 30 FPS，然后將它們一起拼接成精靈，然后將其用作CSS中的背景，然后使用background-position來“模擬”動畫。
那或者只是非常快速地切換源圖像，或者以某種方式使用“畫布”，問題是我不確定這是否會產生完全低於標准的性能嗎？ 我的意思是甚至可以以30 FPS切換背景位置或圖像源文件嗎？ 會不會很順利，或者這僅僅是尚不可行的事情？ 請記住，這只是一個需要根據用戶輸入旋轉的3D對象，而不是任何其他交互式元素。
那么精靈是走還是帆布的方式，或者我什至沒有聽說過的很酷的東西？ 提前謝謝大家！
1 個解決方案
解決方案1
0 已采納 2010-08-24 20:23:54
如果我制作的是網站的移動版本，則將剝奪大多數圖形以及所有動畫gif，flash等的圖形。使用手機瀏覽Web的人們通常不會擁有多媒體體驗， -他們只需要快速獲取一些信息，並使用帶寬欠佳，顯示和性能甚至更差的次佳設備來獲取它。 不要讓他們更難。
另一方面，我發現使用包含所有動畫幀的背景圖像，並從javascript處理background-position是制作小型動畫圖片的一種好方法，例如，用於手機的簡單javascript游戲： ）
將2D畫布（圖像+文本）應用於3D表面，並進行360度旋轉/動畫處理-可能需要使用HTML5 / CSS3 / Javascript或Flash嗎？
[英]Apply 2D canvas (image + text) to 3D surface and do 360 degree rotation/animation - possible to do this with HTML5/CSS3/Javascript or Flash necessary?
如何在沒有CSS3和WebGL的情況下向HTML5畫布添加3D透視圖
[英]How to add 3d perspective to html5 canvas without css3 and webGL
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.