一個功能強大且靈活的動畫庫 Mo.js，輕鬆建立複雜的動畫

1. 安裝 Mo.js

首先，你需要在專案中安裝 Mo.js。可以透過 npm 或者直接在 HTML 檔案中引入：

使用 npm 安裝：

npm install mo-js

在 HTML 中引入：

<script src="https://cdn.jsdelivr.net/npm/mo-js@latest/dist/mo.min.js"></script>

2. 基礎用法

在 Mo.js 中，動畫的建立主要依賴於 mojs 物件和各種動畫構造器。下面是一些基礎用法的示例。

2.1 建立一個簡單的位移動畫

const burst = new mojs.Burst({
  radius: { 0: 100 }, // 動畫半徑
  count: 5,           // 生成的元素數量
  angle: 45,         // 角度
  children: {
    fill: ['#FF5656', '#56FF56', '#5656FF'], // 子元素的顏色
    radius: 10,         // 子元素的半徑
    duration: 1500,     // 動畫持續時間
    delay: 'stagger(0, 300)', // 延遲效果
  },
});

// 播放動畫
burst.replay();

2.2 使用 Timeline 組合動畫

Mo.js 還支援時間線動畫，可以將多個動畫組合在一起。

const timeline = new mojs.Timeline();

// 建立多個動畫
const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: '#FF5656',
  duration: 2000,
  easing: 'cubic.out',
});

const square = new mojs.Shape({
  shape: 'rect',
  radius: 50,
  fill: '#5656FF',
  duration: 2000,
  easing: 'cubic.out',
});

// 將動畫新增到時間線
timeline.add(circle, square);

// 播放時間線動畫
timeline.play();

3. 動畫特性

Mo.js 提供了一些強大的動畫特性，下面介紹幾個常用的特性：

3.1 物理動畫

Mo.js 可以使用物理模型來控制動畫效果，例如彈簧效果。

const timeline = new mojs.Timeline();

// 建立多個動畫
const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: '#FF5656',
  duration: 2000,
  easing: 'cubic.out',
});

const square = new mojs.Shape({
  shape: 'rect',
  radius: 50,
  fill: '#5656FF',
  duration: 2000,
  easing: 'cubic.out',
});

// 將動畫新增到時間線
timeline.add(circle, square);

// 播放時間線動畫
timeline.play();

3.2 動畫補間

Mo.js 支援多種補間方法，允許開發者自定義動畫的速度和效果。

const customAnimation = new mojs.Shape({
  shape: 'rect',
  fill: '#56FF56',
  duration: 2000,
  easing: mojs.easing.sin.inOut, // 自定義補間
});

// 播放動畫
customAnimation.replay();

4. 使用 Mo.js 進行復雜動畫

透過組合不同的動畫和使用 Mo.js 提供的特性，可以建立出複雜的動畫效果。以下是一個建立彈出效果的示例：

const popup = new mojs.Shape({
  shape: 'circle',
  radius: 0,
  fill: '#FF5656',
  duration: 800,
  easing: mojs.easing.elastic.out,
  isShowEnd: true, // 動畫結束後保持顯示
});

// 播放彈出動畫
popup.replay();

5. 實際應用示例

在實際應用中，Mo.js 可用於建立豐富的用戶界面動畫效果，例如按鈕點選、頁面切換、載入動畫等。以下是一個簡單的按鈕點選動畫示例：

<button id="myButton">點選我</button>
<script>
  const button = document.getElementById('myButton');
  
  button.addEventListener('click', () => {
    const burst = new mojs.Burst({
      radius: { 0: 100 },
      count: 20,
      children: {
        fill: ['#FF5656', '#56FF56', '#5656FF'],
        radius: 5,
        duration: 1000,
        delay: 'stagger(0, 50)',
      },
    });

    burst.replay();
  });
</script>