今天@不到布 同學(xué)分享一款特別方便的神器，操作過程易學(xué)好懂，基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，有具體的教程呦，趕緊給自己補(bǔ)上這課吧。

　　@不到布 ：自從CSS3引入了動(dòng)畫(transition和@keyframes，還有與之搭配的transform)之后，各路人馬對(duì)它的熱情都極為高漲，和JS動(dòng)畫相比，它寫起來更簡(jiǎn)單(在沒有jQuery庫(kù)的情況下)，同時(shí)在大多數(shù)情況下性能上也有很強(qiáng)的優(yōu)勢(shì)。transition和transform相對(duì)比較簡(jiǎn)單，除了矩陣變換(一般人也用不到)之外，別的都易學(xué)好懂，而使用了@keyframes的動(dòng)畫，簡(jiǎn)直就是設(shè)計(jì)師和工程師的大殺器，關(guān)于這東西有多殺，可以參考之前騰訊的大神們搞的一個(gè)CSS3動(dòng)畫幀數(shù)科學(xué)計(jì)算法(http://tid.tenpay.com)這樣的玩意兒，內(nèi)含計(jì)算器(http://tid.tenpay.com)一枚，內(nèi)文之糾結(jié)復(fù)雜，我相信一般兼職半個(gè)前端的大設(shè)計(jì)或者初入行的小前端都是難以看懂的…

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

　　Stylie操作簡(jiǎn)介

　　頁(yè)面打開以后很簡(jiǎn)單，藍(lán)色的網(wǎng)格背景上面，兩個(gè)綠色的十字中間連著一根黃色的線，上面有一個(gè)白色小球不斷地從左邊滑動(dòng)到右邊(還稱不上滾動(dòng))，下面有一個(gè)進(jìn)度條，右邊有一個(gè)操作面板。

　　圖片來自Tuts+

　　Keyframes標(biāo)簽面板

　　第一個(gè)0ms處表示起點(diǎn)相關(guān)信息，第二個(gè)2000ms處表示2000ms處斷點(diǎn)的相關(guān)信息;

　　2000ms可以單擊修改它的時(shí)間，單擊右上角的加號(hào)可以添加新的斷點(diǎn)

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

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

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

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

　　緩動(dòng)曲線

　　這個(gè)工具比較流弊刷刷的一點(diǎn)就在于它的緩動(dòng)曲線功能，所有的數(shù)值，都!可!以!定義緩動(dòng)。下面我稍微說一下它的緩動(dòng)：

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

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

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

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

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

　　Sine – sin(x^(pi/2))(長(zhǎng)相有點(diǎn)像二次方曲線，實(shí)際上這個(gè)函數(shù)很奇葩，有興趣的童鞋可以移步這里(http://t.cn/RhdkXQC)看一下[0,3]的圖像…)

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

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

　　Bounce – 公式太長(zhǎng)不寫了，就是個(gè)反彈曲線(彈簧效果、小球落地)

　　v10. Back -反彈曲線

　　elastic – 橡皮筋曲線(有一個(gè)非常短暫且巨大的晃動(dòng)，然后緩緩結(jié)束)

　　swing – 跟Back系列一樣

　　后面的就沒什么了，最后一個(gè)為CustomEasing，這個(gè)曲線可以自己在Motion選項(xiàng)卡中編輯，經(jīng)常用AI的童鞋可能比較容易編輯，但是不理解曲線跟運(yùn)動(dòng)速度之間的關(guān)系的話，就根本搞不懂自己在編輯什么…

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

　　導(dǎo)出代碼

　　效果滿意之后，就可以點(diǎn)擊CSS和HTML標(biāo)簽分別復(fù)制代碼了。

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

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

　　最后在右邊的扳手標(biāo)簽里，你可以選擇保存或讀取你的動(dòng)畫。

　　差不多就是這樣了，這個(gè)神器基本上可以解決現(xiàn)有所有的CSS動(dòng)畫需求，具體怎么做就看各人的實(shí)力運(yùn)氣了。