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

ChristmasBoy 發布于2019-08-26 11:54 / 1681人閱讀

摘要：原理說明用生成一個二維矩陣，通過規定的運動形式，確定出需要運動的點，觸發特定事件，在特定時間后進行下一輪的運動，確定運動點，觸發事件，直到所有的點都運動過。一個簡單的栗子函數參數即為實例初始化的行列信息函數參數即為每個二維矩陣的點，從開始

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

擴展

makeMatrixChange 是使用 mChange 提供的方法寫的一個函數，如果有需求自定義矩陣動畫效果，可以使用提供的方法自己封裝一個

如果僅僅是不滿足于當前的運動形式，也可以自定義運動形式

自定義運動形式

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

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

云服務器 GPU云服務器開啟一個超級云服務器超級云服務器是一個概念嗎超級云服務器多少錢一個月個人云服務器做酷炫的事

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107782.html

開源造輪子：一個簡潔，高效，輕量級，酷炫的不要不要的canvas粒子運動插件庫

摘要：一開篇哈哈哈，感謝標題黨的蒞臨雖然標題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。當然，配置不同的參數值，或許可以得到挺多不同的特效呢上面已經演示過標配的粒子無序運動啦，下面演示后面兩種。一：開篇哈哈哈，感謝標題黨的蒞臨~ 雖然標題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。廢話不多說，先來看個標配例子吧： http://co...

Anonymous1 2019-08-20 11:38 評論0 收藏0
HTML5中手勢原理分析與數學知識的實踐

摘要：中手勢原理分析與數學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分。這篇博文主要是解析了移動端常用手勢的原理，及從前端的角度學習過程中所使用的數學知識。 HTML5中手勢原理分析與數學知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經深入了我們生活的每個部分。現代應用越來越重視與用戶的交互及體驗，手勢是最直接且最為有效的交互方式，一個好的手勢交互，能...

rollback 2019-08-20 18:33 評論0 收藏0
朋友，這里有個倉庫需要你 PR 一下

摘要：發現倉庫被了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的。雖然這個簡介有點短，但是該篇的目的并不在于讓大家了解這個矩陣動畫，而是想讓大家一起來豐富這個倉庫。前段時間，發布了一篇文章：學不動了，來點有趣的吧。發現 github 倉庫被 frok 了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的 Pull Request。簡介 ...

roadtogeek 2019-08-30 11:06 評論0 收藏0