資訊專欄INFORMATION COLUMN
摘要：原理說明用生成一個二維矩陣，通過規(guī)定的運動形式，確定出需要運動的點，觸發(fā)特定事件，在特定時間后進(jìn)行下一輪的運動，確定運動點，觸發(fā)事件，直到所有的點都運動過。一個簡單的栗子函數(shù)參數(shù)即為實例初始化的行列信息函數(shù)參數(shù)即為每個二維矩陣的點，從開始
DEMO
DEMO
jsfiddle
原理說明用 Matrix 生成一個二維矩陣，通過規(guī)定的運動形式，確定出需要運動的點，觸發(fā)特定事件，在特定時間后進(jìn)行下一輪的運動，確定運動點，觸發(fā)事件，直到所有的點都運動過。
makeMatrixChange 運動函數(shù)參數(shù)說明
參一: 需要掛載的節(jié)點
參二: option 一些配置信息
options 說明
row: 需要生成的行數(shù)
col: 需要生成的列數(shù)
images: 圖片列表
nameSpace: 指定類名，不傳則隨機(jī)生成一個
返回值說明
movePoint/Function: 調(diào)用即開始運動
changeImages/Function: 改變原始的圖片列表，主要用于圖片的懶加載，比如為了防止圖片未加載好顯示出來，在瀏覽器緩存好圖片后，更換圖片列表
matrixChange: 原始的 Matrix 對象
movePoint 函數(shù)參數(shù)說明：
參一: 運動形式，可以從 mChange.mode 列表中取
參二（option）: 確定動畫效果，可以不傳，使用默認(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)的動畫效果
move.movePoint(mChange.mode[0])
// 使用 transition 過渡，提供類名即可，eg: .test{transfrom:scale(0);}
move.movePoint(mChange.mode[0], {
className: "test"
})
// 使用 animation 動畫，比如配合 animation.css 動畫庫
// animation 需要提供兩個類名，進(jìn)場動畫和出場動畫，同時需要標(biāo)志這個是 animation 動畫
move.movePoint(mChange.mode[0], {
animate: true,
classNameIn: "animated flipInX",
classNameOut: "animated flipOutX"
})
// 使用特定的圖片進(jìn)行動畫
// 不傳 image 則隨機(jī)取傳入的圖片列表中的一張圖片
move.movePoint(mChange.mode[0], {
animate: true,
classNameIn: "animated flipInX",
classNameOut: "animated flipOutX",
image: urls[0]
})
擴(kuò)展
makeMatrixChange 是使用 mChange 提供的方法寫的一個函數(shù)，如果有需求自定義矩陣動畫效果，可以使用提供的方法自己封裝一個
如果僅僅是不滿足于當(dāng)前的運動形式，也可以自定義運動形式
自定義運動形式運動形式是一個對象，對象下包含信息
interval/Number: 每次運動的間隔時間
init/Function: 用于初始化配置，在運動前會調(diào)用
check/Function: 用于判斷當(dāng)次運動需要運動的點
next/Function: 每次運動后對于下次運動的配置
end/Function: 用于判斷運動是否結(jié)束，每次運動后都會調(diào)用
其他: 可以配置一些其他的字段，hitPoint 事件會將當(dāng)前的運動形式放在回調(diào)函數(shù)的參數(shù)中。比如，定義了 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 函數(shù)參數(shù)即為 Matrix 實例初始化的行列信息
check 函數(shù)參數(shù)即為每個二維矩陣的點，從 0 開始
github
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/107782.html
摘要：一開篇哈哈哈，感謝標(biāo)題黨的蒞臨雖然標(biāo)題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。當(dāng)然，配置不同的參數(shù)值，或許可以得到挺多不同的特效呢上面已經(jīng)演示過標(biāo)配的粒子無序運動啦，下面演示后面兩種。 一：開篇 哈哈哈，感謝標(biāo)題黨的蒞臨~ 雖然標(biāo)題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。廢話不多說，先來看個標(biāo)配例子吧： http://co...
摘要：中手勢原理分析與數(shù)學(xué)知識的實踐引言在這觸控屏的時代，人性化的手勢操作已經(jīng)深入了我們生活的每個部分。這篇博文主要是解析了移動端常用手勢的原理，及從前端的角度學(xué)習(xí)過程中所使用的數(shù)學(xué)知識。 HTML5中手勢原理分析與數(shù)學(xué)知識的實踐 引言 在這觸控屏的時代，人性化的手勢操作已經(jīng)深入了我們生活的每個部分。現(xiàn)代應(yīng)用越來越重視與用戶的交互及體驗，手勢是最直接且最為有效的交互方式，一個好的手勢交互，能...
摘要：發(fā)現(xiàn)倉庫被了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的。雖然這個簡介有點短，但是該篇的目的并不在于讓大家了解這個矩陣動畫，而是想讓大家一起來豐富這個倉庫。 前段時間，發(fā)布了一篇文章：學(xué)不動了，來點有趣的吧。發(fā)現(xiàn) github 倉庫被 frok 了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的 Pull Request。 簡介 ...
閱讀 2232·2021-09-04 16:40
閱讀 1540·2021-08-13 15:07
閱讀 3670·2019-08-30 15:53
閱讀 3269·2019-08-30 13:11
閱讀 1148·2019-08-29 17:22
閱讀 1865·2019-08-29 12:47
閱讀 1540·2019-08-29 11:27
閱讀 2337·2019-08-26 18:42
