一個超級炫的矩陣運動庫，瞭解一下？

DEMO

DEMO

jsfiddle

原理說明

用 Matrix 生成一個二維矩陣，經過規定的運動形式，肯定出須要運動的點，觸發特定事件，在特定時間後進行下一輪的運動，肯定運動點，觸發事件，直到全部的點都運動過。

makeMatrixChange 運動函數

參數說明

• 參一: 須要掛載的節點
• 參二: option 一些配置信息

options 說明

• row: 須要生成的行數
• col: 須要生成的列數
• images: 圖片列表
• nameSpace: 指定類名，不傳則隨機生成一個

返回值說明

• movePoint/Function: 調用即開始運動
• changeImages/Function: 改變原始的圖片列表，主要用於圖片的懶加載，好比爲了防止圖片未加載好顯示出來，在瀏覽器緩存好圖片後，更換圖片列表
• matrixChange: 原始的 Matrix 對象

movePoint 函數參數說明：

• 參一: 運動形式，能夠從 mChange.mode 列表中取
• 參二（option）: 肯定動畫效果，能夠不傳，使用默認效果

例子：

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
})

// 使用默認的動畫效果
move.movePoint(mChange.mode[0])

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

// 使用 animation 動畫，好比配合 animation.css 動畫庫
// animation 須要提供兩個類名，進場動畫和出場動畫，同時須要標誌這個是 animation 動畫
move.movePoint(mChange.mode[0], {
    animate: true,
    classNameIn: 'animated flipInX',
    classNameOut: 'animated flipOutX'
})

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

擴展

1. makeMatrixChange 是使用 mChange 提供的方法寫的一個函數，若是有需求自定義矩陣動畫效果，能夠使用提供的方法本身封裝一個
2. 若是僅僅是不知足於當前的運動形式，也能夠自定義運動形式

自定義運動形式

運動形式是一個對象，對象下包含信息

• interval/Number: 每次運動的間隔時間
• init/Function: 用於初始化配置，在運動前會調用
• check/Function: 用於判斷當次運動須要運動的點
• next/Function: 每次運動後對於下次運動的配置
• end/Function: 用於判斷運動是否結束，每次運動後都會調用
• 其餘: 能夠配置一些其餘的字段，hitPoint 事件會將當前的運動形式放在回調函數的參數中。好比，定義了 duration 字段用於生成過渡的事件 dom.style.transition = mode.duration / 1000 + 's' 。

一個簡單的栗子

{
  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 函數參數即爲 Matrix 實例初始化的行列信息
• check 函數參數即爲每一個二維矩陣的點，從 0 開始

github