一个超级炫的矩阵运动库，了解一下？

ChristmasBoy 发布于2019-08-26 11:54 / 1638人阅读

摘要：原理说明用生成一个二维矩阵，通过规定的运动形式，确定出需要运动的点，触发特定事件，在特定时间后进行下一轮的运动，确定运动点，触发事件，直到所有的点都运动过。一个简单的栗子函数参数即为实例初始化的行列信息函数参数即为每个二维矩阵的点，从开始

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云服务器云服务器开启一个超级云服务器超级云服务器是一个概念吗超级云服务器多少钱一个月个人云服务器做酷炫的事

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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