摘要：原理說明用生成一個(gè)二維矩陣，通過規(guī)定的運(yùn)動(dòng)形式，確定出需要運(yùn)動(dòng)的點(diǎn)，觸發(fā)特定事件，在特定時(shí)間后進(jìn)行下一輪的運(yùn)動(dòng)，確定運(yùn)動(dòng)點(diǎn)，觸發(fā)事件，直到所有的點(diǎn)都運(yùn)動(dòng)過。一個(gè)簡單的栗子函數(shù)參數(shù)即為實(shí)例初始化的行列信息函數(shù)參數(shù)即為每個(gè)二維矩陣的點(diǎn)，從開始

DEMO

jsfiddle

用 Matrix 生成一個(gè)二維矩陣，通過規(guī)定的運(yùn)動(dòng)形式，確定出需要運(yùn)動(dòng)的點(diǎn)，觸發(fā)特定事件，在特定時(shí)間后進(jìn)行下一輪的運(yùn)動(dòng)，確定運(yùn)動(dòng)點(diǎn)，觸發(fā)事件，直到所有的點(diǎn)都運(yùn)動(dòng)過。

參數(shù)說明

參一: 需要掛載的節(jié)點(diǎn)

參二: option 一些配置信息

options 說明

row: 需要生成的行數(shù)

col: 需要生成的列數(shù)

images: 圖片列表

nameSpace: 指定類名，不傳則隨機(jī)生成一個(gè)

返回值說明

movePoint/Function: 調(diào)用即開始運(yùn)動(dòng)

changeImages/Function: 改變原始的圖片列表，主要用于圖片的懶加載，比如為了防止圖片未加載好顯示出來，在瀏覽器緩存好圖片后，更換圖片列表

matrixChange: 原始的 Matrix 對象

movePoint 函數(shù)參數(shù)說明：

參一: 運(yùn)動(dòng)形式，可以從 mChange.mode 列表中取

參二（option）: 確定動(dòng)畫效果，可以不傳，使用默認(rèn)效果

例子：

var app = document.getElementById("app")
var urls = ["http://7xse2z.com1.z0.glb.clouddn.com/257084.jpg",
  "http://7xse2z.com1.z0.glb.clouddn.com/257453.jpg",
  "http://7xse2z.com1.z0.glb.clouddn.com/285848.jpg",
  "http://7xse2z.com1.z0.glb.clouddn.com/3455%20%281%29.jpg"]

var move = mChange.makeMatrixChange(app, {
  images: urls,
  row: 7,
  col: 9
})

// 使用默認(rèn)的動(dòng)畫效果
move.movePoint(mChange.mode[0])

// 使用 transition 過渡，提供類名即可，eg: .test{transfrom:scale(0);}
move.movePoint(mChange.mode[0], {
    className: "test"
})

// 使用 animation 動(dòng)畫，比如配合 animation.css 動(dòng)畫庫
// animation 需要提供兩個(gè)類名，進(jìn)場動(dòng)畫和出場動(dòng)畫，同時(shí)需要標(biāo)志這個(gè)是 animation 動(dòng)畫
move.movePoint(mChange.mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX"
})

// 使用特定的圖片進(jìn)行動(dòng)畫
// 不傳 image 則隨機(jī)取傳入的圖片列表中的一張圖片
move.movePoint(mChange.mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX",
    image: urls[0]
})

makeMatrixChange 是使用 mChange 提供的方法寫的一個(gè)函數(shù)，如果有需求自定義矩陣動(dòng)畫效果，可以使用提供的方法自己封裝一個(gè)

如果僅僅是不滿足于當(dāng)前的運(yùn)動(dòng)形式，也可以自定義運(yùn)動(dòng)形式

運(yùn)動(dòng)形式是一個(gè)對象，對象下包含信息

interval/Number: 每次運(yùn)動(dòng)的間隔時(shí)間

init/Function: 用于初始化配置，在運(yùn)動(dòng)前會調(diào)用

check/Function: 用于判斷當(dāng)次運(yùn)動(dòng)需要運(yùn)動(dòng)的點(diǎn)

next/Function: 每次運(yùn)動(dòng)后對于下次運(yùn)動(dòng)的配置

end/Function: 用于判斷運(yùn)動(dòng)是否結(jié)束，每次運(yùn)動(dòng)后都會調(diào)用

其他: 可以配置一些其他的字段，hitPoint 事件會將當(dāng)前的運(yùn)動(dòng)形式放在回調(diào)函數(shù)的參數(shù)中。比如，定義了 duration 字段用于生成過渡的事件 dom.style.transition = mode.duration / 1000 + "s" 。

一個(gè)簡單的栗子

{
  interval: "140",
  duration: "1000",
  init: function (row, col) {
    this.row = row
    this.col = col
    this.num = 0
  },
  check: function (i, j) {
    return i + j === this.num
  },
  next: function () {
    this.num++
  },
  end: function () {
    return this.col + this.row + 1 === this.num
  }
}

init 函數(shù)參數(shù)即為 Matrix 實(shí)例初始化的行列信息

check 函數(shù)參數(shù)即為每個(gè)二維矩陣的點(diǎn)，從 0 開始

github