bouncing rainbow heart

圖表做來做去都一樣、視覺化再怎麼變化都很無聊嗎?試試看 loading.io 動畫圖示庫,讓你的視覺化活起來!loading.io 提供自助式的快速線上動畫客製服務,搭配近萬個向量圖示檔與近百種的動畫類型,依你的需求選擇圖示,瞬間把作品質感提升 N 倍!

近年來微動畫似乎變成了一門顯學,各種 APP 、網站的使用者介面都藏了些小巧的迷你動畫,有些提醒使用者發生事件,有些則帶著使用者走過流程,比起網路興起時 GIF的濫用情況,人類運用動畫的本領似乎又跨出了一個里程碑。現在各種懶人包、解說影片、資訊圖表中都看得到許多精巧的迷你動畫,妥善的運用讓作品與靜態圖表相比又高出了數個層次!但是,這些動畫該怎麼做呢?

這類動畫製作不外乎兩種途徑:專門的軟體 ( 如 After Effect ) 或寫程式自幹 ( 如透過 D3.js ),只是門檻似乎都高了些…. 若只是想做個簡單的彈出轉場、換位等特效,是否真需要開始報名線上 After Effect 課程或加入半年期的 D3.js 特訓班呢?

bouncing blub

 

其實簡單的動畫並不難做,我們先前與大家分享過的「微動畫簡單做!使用 animate.css 五秒提升作品質感」即透過 animate.css 模組,快速的在網頁中加入動畫效果,只是若是網頁苦手,好像還差了那麼一點點路。

幸好,另一個先前介紹過的服務「只要十秒鐘,使用 Loading.io 製作 Loading 圖示」前陣子亦推出了專屬的動畫模組「loading.css」與「transition.css」,並且透過新功能「loading icons」圖示客製服務讓我們可以直接在線上透過自選效果快速做出動畫圖示!

那麼,要怎麼使用呢?

unknown question and how to?

自助式線上編輯器

最簡單的方式就是透過 loading.io 的線上編輯器。首先連線到 loading icons 圖示搜尋介面 輸入你想找查的關鍵字,選取想使用的圖示,比方說下例搜尋「party」:

loading icon search interface

接著,點選有興趣的圖示後,編輯介面會彈出;除了基本的屬性設定外,左下的選單可供我們調整動畫類型,而右下方的按鈕則用來生成圖檔:

loading.io animated icon editor

這個動畫圖示編輯器除了有近百種的動畫類型可以選擇,另一個有趣的特點就是可以透過「Group Animate」選項設定讓圖示中的各個形狀分開做動畫 ( 例如圖中的圓筒與彈出的線條 ) ,以時間差的方式做出更生動的動畫。比方說,下圖是選擇「tremble ( 抖動 ) 」效果後,兩個不同 Group Animate 設定做出來的動畫:

party icon tremble party icon tremble

此外,loading.io 圖示編輯器亦提供上百組的預設色盤,讓我們可以很快速的套用各種主題的顏色來試做不同風格的圖示。下圖即為他的色盤選擇面板:

loading.io color picker

以下即是我們使用另一個圖示隨意設定了數組不同風格圖示的結果,選取色盤後結果即如下,效果相當不錯。我們挑到的色盤剛好都是動畫系,包括:

  • 埃及王子 ( Prince of Egypt )
  • 進擊的巨人 ( Attack on Titan )
  • 怪獸大學 ( Monster University )
  • 泰山 ( Tarzan )
  • 風中奇緣 ( Color of the Wind )
color man icon

客製完成後欲產生對應圖檔,只要從下載按鈕區挑選需求的圖檔格式點擊即可,目前 loading.io 有提供 GIF 動畫、 SVG 動畫、 APNG 與 PNG Sequence 等動畫格式,不過動畫產生是網站的進階功能需要購買,目前開通一個圖示為 1.99 美金,亦或者可以選擇月費 ( 9.99 美金 ) 或年費 ( 39.99 美金 ) 吃到飽的方案,相較單次購買划算許多。

另外,若你只需要靜態圖示,可選擇靜態 SVG 或單張 PNG , loading.io 圖示庫上大部份的圖示均以 CC-BY License 授權釋出,只要標明圖檔出處,便無需付費即可直接下載。目前估計線上有近萬個圖示可以取用,再加上相當方便的客製介面, loading.io 亦可以做為目前線上圖示網站的另一個很不錯的選擇喔!

loading.io 提供的各種動畫效果不一定適用於各種圖示,在使用的時候可以多嘗試一些不同的動畫類型,看是不是有適合的組合,下面展示一些我們設計出來的動畫圖示:

balloon flowbroadcast spinmagic wand animationbouncing salmon eggblink wifi

 

使用自己的圖示製作動畫

如果你在圖示庫中找不到自己感興趣的圖示,你也可以使用 loading.io 提供的上傳圖示動畫編輯介面來製作類似的動畫,他可以讓你上傳自己的圖示,並且仍然可以使用挑選動畫類型的方式直接製作動畫!自製圖示編輯介面基本上可以免費使用,圖檔限制在生成 GIF 格式以及 64px 以下尺寸的圖檔大小,另外這個上傳編輯器並沒有提供分組動畫的切換功能,可以看看是不是符合你的使用情境。下圖是使用資料視覺化粉絲專頁大頭貼製作的動畫圖示:

 

animated infographics.tw

結語

loading.io 從旋轉載入圖示起家切入動畫圖示製作,提供了相當方便的圖示編輯介面與 CC-BY 授權圖示庫,讓我們可以用更短的時間做出各種動畫效果;除此之外, loading.io 亦開源了他們使用的動畫模組,其中包括了下面幾組相當實用的:

亦有 Beta 中的動態圖樣生成器色盤製作工具,除了製作動畫相當的方便,也很適合搭配你的視覺化作品使用喔!不過在使用動畫的時候,也要注意不用太過量,以免造成讀者的不適。畢竟動畫只是一種工具,如何使用還是在我們自己。

若你對開源或免費素材的部份有興趣,亦可關注 loading.io 的 GitHub 帳號,除了前面提到的各個開源模組外,他們有時也會釋出製作好的動畫包以 CC0 的授權釋出,例如本文最前面的跳動愛心圖即是他們釋出的 CC0 動畫圖示,可別錯過囉!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *