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

aco發表於2019-01-31
矩陣

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

相關文章