前端網頁設計動畫套件anime easing介紹與範例

作者：網頁設計師 於 2025-02-10 00:00:00 ‧ 328次閱讀
前端網頁設計動畫套件anime easing介紹與範例

網頁設計時常會遇到動畫展示的工程，一般CSS可以做到基礎動畫，但是如果需要多種動畫模式，或是連續型動畫，大部份網頁設計師還是會使用JAVASCRIPT套件。

前端網頁設計動畫套件anime easing介紹與範例

網頁動畫的順暢度與自然感受很大程度取決於 easing 函數的選擇。本文將深入介紹 Anime.js 中的 easing 函數，並透過實際範例展示各種效果。

Easing 函數基本概念

Easing 函數定義了動畫在執行過程中的加速和減速方式。它將線性的時間輸入轉換為非線性的位置輸出，使動畫更符合自然運動規律。Anime.js 提供了豐富的內建 easing 函數，大致可分為以下幾類：

1. 基礎曲線類型

  • linear: 線性變化，無加速度
  • easeInOutSine: 正弦曲線，適合一般用途
  • easeInOutQuad: 平方曲線，較為平滑的加減速
  • easeInOutCubic: 立方曲線，明顯的加減速效果
  • easeInOutQuart: 四次方曲線，更強烈的加減速
  • easeInOutQuint: 五次方曲線，極強的加減速

2. 特殊效果曲線

  • easeInOutElastic: 彈性效果，帶有回彈
  • easeInOutBack: 超出終點後回彈
  • easeInOutBounce: 碰撞反彈效果

實際網頁設計應用範例

以下展示幾個常見場景的 easing 函數設計應用：

基本位移動畫

javascript
anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});

彈性選單展開

javascript
anime({
  targets: '.menu',
  height: ['0px', '200px'],
  duration: 800,
  easing: 'easeOutElastic(1, .8)'
});

漸顯效果

javascript
anime({
  targets: '.fade-in',
  opacity: [0, 1],
  duration: 1200,
  easing: 'easeInOutSine'
});

進階使用技巧

1. 自定義 Easing 函數

Anime.js 允許使用貝茲曲線定義自訂 easing：

javascript
anime({
  targets: '.custom',
  translateX: 250,
  duration: 1000,
  easing: 'cubicBezier(.5, .05, .1, .3)'
});

2. 串連多個動畫

可以為動畫序列中的每個階段設定不同的 easing：

javascript
anime.timeline()
  .add({
    targets: '.sequence',
    translateX: 250,
    duration: 1000,
    easing: 'easeInQuad'
  })
  .add({
    targets: '.sequence',
    translateY: 50,
    duration: 800,
    easing: 'easeOutElastic(1, .8)'
  });

效能考量與網頁設計最佳實踐

  1. 動畫性能優化
    • 優先使用 transform 和 opacity 屬性
    • 避免過於複雜的 easing 函數在低效能裝置上使用
    • 為較短的動畫選擇簡單的 easing 函數
  2. 選擇適當的 Easing
    • 介面元素移動：使用 easeInOutQuad 或 easeInOutCubic
    • 彈出效果：使用 easeOutElastic 或 easeOutBack
    • 自然下落：使用 easeInQuad 或 easeInCubic

網頁設計範例：各種動作展示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Anime.js Easing Demo</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.2.2/mithril.min.js"></script>
 <style>
 * { box-sizing: border-box; }

 .container {
 max-width: 1200px;
 margin: 20px auto;
 padding: 20px;
 background-color: #333;
 border-radius: 8px;
 }

 .boxes {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 width: 45%;
 margin: .3em;
 border-bottom: 1px dashed #fefefe;
 padding-bottom: .5em;
 }

 .box {
 width: 20px;
 height: 20px;
 background-color: #2f9e44;
 border-radius: 3px;
 display: inline-block;
 margin: .3em;
 opacity: 0;
 }

 .title {
 color: #fefefe;
 font-size: .875rem;
 font-family: monospace;
 margin: 0;
 padding: 5px 0;
 }
 </style>
</head>
<body>
 <div class="container" id="app"></div>

 <script>
 const INTERVAL = 300;
 const TRANSLATE_X = 20;

 function Boxes(vnode) {
 const arr = [1, 2, 3, 4, 5];

 const oncreate = _ => anime({
 targets: vnode.dom.querySelectorAll('.box'),
 translateX: arr.length * TRANSLATE_X,
 opacity: 1,
 loop: true,
 easing: vnode.attrs.easing,
 duration: (el, i) => i * INTERVAL + INTERVAL
 });

 const view = _ => m('.boxes',
 m('h1.title', vnode.attrs.easing),
 arr.map(_ => m('.box'))
 );

 return { view, oncreate };
 }

 function App() {
 const eases = [
 'easeInQuad',
 'easeInCubic',
 'easeInQuart',
 'easeInQuint',
 'easeInSine',
 'easeInExpo',
 'easeInCirc',
 'easeInBack',
 'easeInElastic',
 'easeOutQuad',
 'easeOutCubic',
 'easeOutQuart',
 'easeOutQuint',
 'easeOutSine',
 'easeOutExpo',
 'easeOutCirc',
 'easeOutBack',
 'easeOutElastic',
 'easeInOutQuad',
 'easeInOutCubic',
 'easeInOutQuart',
 'easeInOutQuint',
 'easeInOutSine',
 'easeInOutExpo',
 'easeInOutCirc',
 'easeInOutBack',
 'easeInOutElastic'
 ];

 const view = _ => m('.easing-container',
 eases.map(easing => m(Boxes, { easing }))
 );

 return { view };
 }

 m.mount(document.getElementById('app'), App);
 </script>
</body>
</html>

選擇合適的 easing 函數對於創造自然、流暢的網頁動畫體驗至關重要。透過理解不同 easing 函數的特性，並在適當的網頁設計場景中運用，可以大幅提升使用者介面的互動品質。建議在開發過程中多加嘗試不同的 easing 函數，觀察效果並選擇最適合的方案。

CONTACT INFORMATION
其他新聞