[問題] html5 css3 animation 動畫製作問題

看板Web_Design作者sin282 (@興...)時間13年前 (2013/02/19 17:32)推噓2(2推 0噓 13→)

留言15則, 5人參與討論串1/2 (看更多)

大家好,小弟最近開始研究用CSS3的animation做小動畫原因:有個客戶要求要用Html5去做動畫...... (我只會用Flash,同事只會用MAX) 研究了一下發現幾個問題不解請教大家,謝謝各位。 1、所謂的HTML5做動畫的意思? 是否是使用html5的宣告方式，加上JS & CSS3 Animation and Transition方法屬性去一行一行輸入動作的內容，產生動畫？ 2、如果有個20s的首頁導引動畫,各位如何去做角本規劃及執行實作? 以下是自己的方法：上網做了功課,似乎不使用任何工具下就是使用CSS3+製作好的圖檔一個一個element去安排顯示的時間. 先確定好角本後,使用delay方式製造時間差,並設定好每個物件(DIV+IMG)的動作屬性 (1)設定顯示秒數 (2)設定時間軸0%~100%顯示出來的動作片段程式碼(大家也是這樣子一行一行寫嗎?) <body> <div class="delay1"><img src="image.png" width="64" height="64" /></div> </body> <style> .delay1{ -webkit-animation: cssAnimation 3s 1 ease-out; -webkit-animation-delay:1s; -moz-animation: cssAnimation 3s 1 ease-out; -moz-animation-delay:1s; } @-moz-keyframes cssAnimation { 0%, 100% {-moz-transform: opacity: 1;translate(0);} 40% {-moz-transform:translateY(100px); background-color:black;} 60% {-moz-transform:translate(0); opacity:0;} 20% {-moz-transform:translate(0px,-100px);background-color:white;} } </style> 小工具,幫了我很多忙 http://www.css3maker.com/ ....目前覺得和客戶溝通最好的方式方法一、確認需求後～先用Flash做一版給他看,爽了我再去用css3刻... (OS:感覺真Stupid,但這樣才是客戶最不會改來改去的方法) 因為在沒有工具的情況下客戶如果要求要修改,感覺會很頭疼.... 3、CSS3 Animation支援的瀏覽器執行的效能,是否FF在物件重疊時會LAG? 以下是自行測試的一些心得: 只有IE系列不支援(驗證了google各討論文章的內容) 那以實測效能來說(FF < Chrome) 實際測試5個DIV裡面都放PNG圖檔,各自有旋轉、縮放、平行位移、淡入淡出特效 Chrome很順. FF 只要DIV放大重疊時,就會有Lag的現象.（是我的問題嗎?) 以往做Flash的經驗覺得5個元件就有這樣子的情形,再繼續做下去可能會很糟糕. 當然不重疊時又會正常了,可動畫就是會疊來疊去的啊~ 4、有推薦的html5動畫製作工具嗎? 以下是google找來的： 1、Adobe Edge(XP不支援，好像要Vista or Win7才適用) http://html.adobe.com/edge/animate/ 同事使用另存html後會產生5個檔案(1Html + 1AN檔 + 3JS) 他似乎做失敗了～　檔案放到web不會動 2、css3Maker http://www.css3maker.com/ 3、Mugeda(要有網域+Mail才可以註冊使用，尚未取得) https://www.mugeda.com/ 4、有推薦的書藉(範例教學或字典書)或教學網站嗎～ 5、使用HTML5做動畫目前的缺點?想要先和客戶說明，怕他只一頭熱. ie9以下不支援、ff效能普普、費用比Flash製作高些。 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 218.210.231.212 ※ 編輯: sin282 來自: 218.210.231.212 (02/19 17:39) ※ 編輯: sin282 來自: 218.210.231.212 (02/19 17:41)

→

musie

02/19 18:00, , 1^F

02/19 18:00, 1^F

→

musie

02/19 18:01, , 2^F

02/19 18:01, 2^F

→

musie

02/19 18:03, , 3^F

02/19 18:03, 3^F