jquery-animations-tile是一款效果非常炫酷的图片碎片拼图动画特效jQuery插件。它默认提供了图片碎片组合特效，百叶窗特效，波浪特效，拼图动画特效等效果。另外它还提供了很多参数来设置各种不同的拼图动画效果。

安装

使用该图片碎片拼图插件需要引入相关的js和CSS文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.animations.min.js"></script>
<script src="js/jquery.animations-tile.js"></script>

使用方法

HTML结构

可以在任何的图片元素上使用该插件。

<div id="container">
  <img id="image" src="images/batman.png" />
</div>
初始化插件

以第一种碎片组合效果为例，在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该时间轴插件。

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2
});

如果需要带一些效果，可以传入一些参数：

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  effect: [
    'flyToUp', // for even tile
    'flyToDown fadeOut' // for odd tile
  ]
});

图片效果也可以是函数的形式：

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  effect: function(options, row, col) {
    if(row == col)
      return 'flyToUp';
    else
      return 'flyToDown';
  }
});

你还可以使用sequence来制作动画序列：

$('#want-to-animate').animate('tile', {
  rows: 2,
  cols: 2,
  sequence: [
    [
      [0, 0]  // tile
    ], // group, all tiles have same animation in the same group
    [[1, 1]], 
    [[0, 1]], 
    [[1, 0]]
  ]
});

配置参数

  • rows：类型：Number，默认值：1。设置图片碎片的行数。
  • cols：类型：Number，默认值：1。设置图片碎片的列数。
  • effect：类型：String或Array或Function。默认值:flyOut。设置碎片动画的类型，如果是多个值则交换执行。你也可以使用一个函数来计算使用哪个效果。例如下面的样子： 
    function func(options, row, col)
{
  return 'effect';
}
  • sequent：类型：Boolean。默认值：true。设置是否图片碎片动画使用不同的延迟时间。
  • sequence：类型：String或Array。默认值："random"。设置图片碎片动画的序列或自定义的动画顺序。可以的方法有：
    • random：随机碎片。
    • randomCols：随机行数。
    • randomRows：随机列数。
    • lr：从左到右。
    • rl：从右到左。
    • tb：从上到下。
    • bt：从下到上。
    • lrtb：从左到右再从上到下。
    • rlbt：从右到左再从下到上。
    • rltb：从右到左在从上到下。
    • lrbt：从左到右再从下到上。
    • tblr：从上到下再从左到右。
    • btrl：从下到上再从右到左。
    • tblr：从上到下再从左到右。
    • tbrl：从上到下再从右到左。
    • btlr：从下到上再从左到右。
  • groups：类型：Number，默认值：1。设置不同的图片碎片动画组。
  • adjustDuration：类型：Boolean，默认值：true。设置图片碎片动画使用不同的持续时间。