cover

用戶互動的過程中,一點動態效果能有效地提升整體的使用體驗,但程式製作動畫過程繁瑣,撰寫 CSS 也相當費時。這次要介紹的 Animate.css 為我們預建了 75 種不同的動態效果,讓我們簡單一個動作就為元件加上動畫!

微動畫 ( micro animation ) 在 UX 至上的現在越來越流行,它為我們的作品加上互動的線索、引導讀者的視線,可說已經是一種不可或缺的要素。以 D3.js 的作品為例,通常在視覺化作品中加入動畫有兩種作法:

然而,前者程式的方式雖然不難且頗具彈性,卻需要具備 D3.js 與 JavaScript 的背景知識;而後者 CSS3 的方法除了需要懂 CSS3 之外,自行維護也需要費一番功夫。如果有一組已經設計好的動畫效果可以讓我直接使用,那是不是很棒呢?

Animate.css 由 Daniel Eden 開發,即是一個 CSS3 Animation 預設集大全,內含 75 個不同的動畫效果,我們只要透過設定 Class 的方式使用即可,例如:

  <h2> Hello World! </h2>

上例為一常見的網頁標題,要讓他跳起來,我們只需要兩個動作,首先,引入 Animate.css 樣式檔:

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
  <h2> Hello World! </h2>

接著,為 h2 加上三個 CSS 類別:

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
  <h2 class="animated infinite bounce"> Hello World! </h2>

就這樣,你可以在自己的電腦上試試看,直接將上述兩行存成 index.html 放在電腦桌面後用滑鼠雙擊打開,你會看到類似這樣得效果:

bounce

當我們加入 CSS 類別時,「animated」代表的是動畫,「infinite」代表了無限循環,而「bounce」則代表了「彈跳」— 如果你想要不一樣的動畫類型,只要將第三個類別「bounce」改為其它的類別就可以了,animate.css 所提供的內建類別包含了 75 種,數量相當多,若你想知道完整的列表可以連至 animate.css 的專案庫參考,我們在這裡也提供一個快速預覽的動畫圖給大家做快速對照:

animate.css gallery

使用在 SVG 標籤上

由於做網頁視覺化時我們常會用到 SVG 系列的標籤,你可能會好奇這些動畫效果是否可以使用在 SVG 的標籤上,事實上上圖中的圓全都是 SVG 的 <circle> 標籤,這代表在 SVG 上使用是完全沒有問題的,唯一要注意的是我們是否使用到與動畫相衝突的 transform 屬性;若我們需要使用 transform 屬性來製作視覺化,建議可以在外面包一層 <g> 即可使用。

客製化

除了利用「infinite」類別控制重覆次數,若你不怕寫點 CSS 程式碼的話,可以利用 CSS3 的屬性來調整動畫的次數與速度,主要牽涉到兩個屬性:

  • animation-duration – 控制單次動畫的時間長度
  • animation-iteration-count – 控制動畫重播的次數

具體來寫,大概會像是下面這段程式碼:

  <h2 class="animated bounce" style="animation-duration: 5s;animation-iteration-count:3">
    Hello World!
  </h2>

上面這個寫法會讓 Hello World! 以每次 5 秒的速度重覆彈跳 3 次。我們可以再進一步將他加到樣式檔中重覆使用,也可以搭配 animate.css 提供的 custom build 機制將會用到的動畫獨立產生新的樣式檔。因為這會再更複雜一些,細節可以直接參考 animate.css 的專案庫,我們這裡不多做解釋。

結語

animate.css 是個小品專案,但他的確為我們省掉了不少時間,更重要的是動畫效果可以為我們的專案帶來更多的可用性。UNITiD 的「Why use micro-animations in your design?」一文中說明了使用微動畫的好處,包括了:

  • 更直覺的介面
  • 互動、介面變化的前因後果更清楚
  • 吸引讀者的注意、製造資訊架構
  • 暗示元件的「可操作性」
  • 在觸控裝置上取代「hover」( 滑鼠飄過的 ) 效果
  • 給予讀者正向回饋
  • 營造品牌印象

看起來好處多多,但要注意凡事皆有一體兩面,適當使用強身、過度使用就傷身囉!


Written by infographics.tw

2 Comments

發表迴響

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