可視化CSS3動畫生成神器 - Stylie

 　　自從CSS3引入了動畫(transition和@keyframes，還有與之搭配的transform)之後，各路人馬對它的熱情都極為高漲，和JS動畫相比，它寫起來更簡單(在沒有jQuery庫的情況下)，同時在大多數情況下性能上也有很強的優勢。transition和transform相對比較簡單，除了矩陣變換(一般人也用不到)之外，別的都易學好懂，而使用了@keyframes的動畫，簡直就是設計師和工程師的大殺器，關於這東西有多殺，可以參考之前騰訊的大神們搞的一個CSS3動畫幀數科學計算法這樣的玩意兒，內含計算器一枚，內文之糾結復雜，我相信一般兼職半個前端的大設計或者初入行的小前端都是難以看懂的…

　　而且其實主要問題是，那玩意兒是為步進動畫准備的，做一張精靈圖，然後每隔一定時間跳一張…其實這樣算不上一個真正的css動畫，何況animation屬性中的steps()功能可以比較好地解決這個問題。而一直以來，都沒有一個好的css動畫生成工具(別跟我提Muse，它需要閱讀《工具的自我修養》…)所以今天我想推薦的就是這個Stylie，一個可視化自動生成CSS3動畫的工具。

　　Stylie操作簡介

　　頁面打開以後很簡單，藍色的網格背景上面，兩個綠色的十字中間連著一根黃色的線，上面有一個白色小球不斷地從左邊滑動到右邊(還稱不上滾動)，下面有一個進度條，右邊有一個操作面板。

　　圖片來自Tuts+Keyframes標簽面板

　　第一個0ms處表示起點相關信息，第二個2000ms處表示2000ms處斷點的相關信息;

　　2000ms可以單擊修改它的時間，單擊右上角的加號可以添加新的斷點

　　X和Y分別表示橫坐標及縱坐標(其實你也可以用鼠標去拖綠色的十字…);

　　S表示縮放倍率(默認是1);

　　rX、rY、rZ分別表示物體沿X、Y、Z軸的旋轉角度(具體哪個軸是哪個可以在上面填寫數字自己嘗試，出於便於觀察的理由建議填寫180。當然你也可以按住Shift鍵，拖，但是我覺得這樣很不好控制…);

　　linear表示線性的…這一欄是自定義緩動曲線(Easing curves)

　　緩動曲線

　　這個工具比較流弊刷刷的一點就在於它的緩動曲線功能，所有的數值，都!可!以!定義緩動。下面我稍微說一下它的緩動：

　　In和Out分別代表進入時和結束時，緩動顧名思義就是有一個類似“緩沖”的動作，如同汽車加速是慢慢加起來的，人跑步也是慢慢停下的(急剎車也是很難從高速直接降速到靜止的，總有個減速的過程)。

　　Quad - x^2(二次方曲線)

　　Cubic - x^3(三次方曲線)

　　Quart - x^4(四次方曲線)

　　Quint - x^5(五次方曲線)

　　Sine - sin(x^(pi/2))(長相有點像二次方曲線，實際上這個函數很奇葩，有興趣的童鞋可以移步這裡看一下[0,3]的圖像…)

　　Expo - 2^(10(x-1))(我放棄起名字了，總之是一個開始非常非常慢，中後期非常非常快的東西)

　　Circ - 顧名思義就是弧(1/4圓，如果選擇了InOut就是兩個外切的1/4圓)

　　Bounce - 公式太長不寫了，就是個反彈曲線(彈簧效果、小球落地)

　　v10. Back -反彈曲線

　　elastic - 橡皮筋曲線(有一個非常短暫且巨大的晃動，然後緩緩結束)

　　swing - 跟Back系列一樣

　　後面的就沒什麼了，最後一個為CustomEasing，這個曲線可以自己在Motion選項卡中編輯，經常用AI的童鞋可能比較容易編輯，但是不理解曲線跟運動速度之間的關系的話，就根本搞不懂自己在編輯什麼…

　　上面說了那麼多曲線…它其實代表的就是一個速率的變化(可以把起點和終點放在非水平或垂直的同一條直線位置上，然後改變X和Y的Easing Curves，本質上它和我們初高中物理課上畫的那些撞車線拋物線沒什麼不同…)。對於那些想預覽簡單微小動效的人來說，可以把起點和終點放在比較近的位置上，然後改變Easing curves察看效果。

　　導出代碼

　　效果滿意之後，就可以點擊CSS和HTML標簽分別復制代碼了。

　　CSS標簽中可以為這個動畫自定義名字，並選擇浏覽器兼容性(默認為W3C，如果你家要考慮兼容其實還不如不要做(對我說的就是那誰，你們懂)…兼容手機的話可以考慮勾上Webkit)。Orient generated CSS to的意思是說所有的位移數據采用相對(第一幀的)位移，還是絕對定位(相對於左上角)。最下面的滑塊，最左邊是最少代碼，右邊是最高質量，最小代碼可能會在某些情況下引發意想不到的問題，但是通常情況下沒啥事…

　　HTML標簽就沒啥東西了，你可以修改其中的html代碼來查看你自定義的內容效果(默認只有一個圖片，就是那個白色的圓…)

　　最後在右邊的扳手標簽裡，你可以選擇保存或讀取你的動畫。