一个功能强大且灵活的动画库 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 spring = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: '#FF5656',
  duration: 2000,
  easing: mojs.easing.bounce.out, // 弹跳效果
});

// 播放动画
spring.replay();

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>