Re: [問題] html5 css3 animation 動畫製作問題
可以下載Adobe Edge
不要再用寫得做動畫了......T_T
要一些拖曳等特效 都可以在裡面寫JQuery/Javascript
如果有需要 拿來寫遊戲也可以
有什麼問題可以站內信我
既然是小動畫的話 用Edge可以快很多......
這裡有一些他能做怎樣的範例
http://html.adobe.com/edge/animate/showcase.html
:D
※ 引述《sin282 (@興...)》之銘言：
: 大家好,小弟最近開始研究用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: 69.41.96.199
→
02/27 04:58, , 1F
02/27 04:58, 1F
推
02/27 10:51, , 2F
02/27 10:51, 2F
→
02/27 10:54, , 3F
02/27 10:54, 3F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 2 之 2 篇)：