jQuery炫酷图片碎片拼图动画特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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。设置图片碎片动画使用不同的持续时间。