一個超等炫的矩陣活動庫，相識一下？

2023年2月20日 90次阅读 来源: aco

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

    原文作者：aco
    原文地址: https://segmentfault.com/a/1190000015073872
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞