Animate.js是一个很小的jQuery插件，用于从一系列图像中创建可链接的动画。此插件用于将一系列图像组合在一起，以创建GIF风格的动画图像。

它支持fadeIn/fadeOut/Reval动画、自定义图像位置和可配置的动画延迟。通过这种方式，您可以创建简单/高级/可定制的动画，而无需编写任何CSS或JavaScript动画代码。

如何使用它:

1.在jQuery之后加载animate.js。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/animate.js"></script>

2.创建一个容器来容纳动画。

<div class="example"></div>

3.将一组动画添加到动画集数组，如下所示。

var options = {
 
    // width & height in pixels
    'width': 813,
    'height': 614,
 
    // unique ID
    'id': 'jqueryscript',
 
    // define your animations here
    'animationSets': [
      new Animation([
        {
          // image source
          'imagesrc': 'images/chart-bg.jpg',
          // position
          'position': {
            x: 0,
            y: 0
          },
          'width': 813,
          'height': 614,
        }, {
          'imagesrc': 'images/gray-line-1.png',
          'position': {
            x: 164,
            y: 94
          },
          'width': 221,
          'height': 212,
          // reveal, fadeIn, or fadeOut
          'type': 'reveal',
          // duration in ms
          'duration': 500,
        }, {
          'imagesrc': 'images/orange-line-1.png',
          'position': {
            x: 164,
            y: 90
          },
          'width': 221,
          'height': 125,
          'type': 'reveal',
          'duration': 2000,
          // delay in ms
          'delay': 1000
        }
      ]),
      new Animation([
        {
          'imagesrc': 'images/orange-explanation.png',
          'position': {
            x: 634,
            y: 150
          },
          'width': 179,
          'height': 100,
          'type': 'fadeIn',
          'duration': 500,
          // unique ID
          'id': 'fadeout-2',
          'delay': 100
        }, {
          'imagesrc': 'images/gray-explanation.png',
          'position': {
            x: 170,
            y: 321
          },
          'width': 179,
          'height': 100,
          'type': 'fadeIn',
          'duration': 500,
          'id': 'fadeout-1',
        }
      ]),
      new Animation([
        {
          'imagesrc': 'images/2-lines.png',
          'position': {
            x: 385,
            y: 214
          },
          'width': 244,
          'height': 153,
          'type': 'reveal',
          'duration': 1000,
        }, {
          'type': 'fadeOut',
          'duration': 500,
          'id': 'fadeout-1',
        }, {
          'id': 'fadeout-2',
          'type': 'fadeOut',
          'duration': 500,
          'delay': 250
        }], true // true = trigger the animation on click/tap
      )
    ]
    
}

4.初始化插件并在您刚刚创建的容器中渲染动画。

var myAnimation = new AnimationLoader('.example', options);
myAnimation.init();

预览截图

从图像序列创建动画 jQuery Animate.js