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

發布時間:2017-09-09 08:05 來源:互聯網 當前欄目:網頁設計教程

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

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

  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的童鞋可能比較容易編輯,但是不理解曲線跟運動速度之間的關系的話,就根本搞不懂自己在編輯什么…

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、