学不动了，来点有趣的吧

yexiaobai 发布于2019-08-23 17:50 / 2663人阅读

摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。

前言

这不 webpack 又升级了。。。

前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。

学不动了，那就来点有趣的~~

matrixChange

本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了 typescript 的重写，并完善了 DEMO ，先看看动画效果如何

可以在这里查看不同动画组合成的效果，也可以在jsfiddle上查看具体的代码编写。

使用

浏览器

npm or yarn

npm install matrixchange --save
yarn add matrixchange

code

import {makeMatrixChange, mode} from "matrixchange"

let app = document.getElementById("app")
let urls = [
  "http://bgcdn.acohome.cn/100965.jpg",
  "http://bgcdn.acohome.cn/1501505.jpg",
  "http://bgcdn.acohome.cn/1501655.jpg"
];

// 该方法返回一个对象
let move = makeMatrixChange(app, {
  images: urls,
  row: 7,
  col: 9
})

// 使用第 0 种运动方式，和默认的动画效果
move.movePoint(mode[0])

// 使用第 0 种运动方式，和 transition 过渡，提供类名即可，eg: .test{transfrom:scale(0);}
move.movePoint(mode[0], {
    className: "test"
})

// 使用第 0 种运动方式，和 animation 动画，比如配合 animation.css 动画库
// animation 需要提供两个类名，进场动画和出场动画，同时需要标记这个是 animation 动画
move.movePoint(mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX"
})

// 使用特定的图片进行动画
// 不传 image 则随机取传入的图片列表中的一张图片
move.movePoint(mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX",
    image: urls[0]
})

matrixchange 库只拥有一个方法和一个数组

makeMatrixChange 用于生成矩阵，调用返回对象的 movePoint 方法即可让生成的矩阵运动

mode 为一些列的运动形式的数组，运动形式为 movePoint 方法的第一参数。

movePoint 的第二个参数具体定义如下

type option = {
    className?:     string
    animate?:       boolean
    classNameIn?:   string
    classNameOut?:  string
    image?:         string
}

谈谈心得

该项目在业余时间完成，由最开始的单纯浏览器可执行代码到 ES6 的模块化方式，最终到现在的 typescript 版本，可以说是顺应了前端的发展潮流，也对使用 typescript 编写项目有了一定的了解。

代码重构虽然耗费了大量的时间，但是项目的结构和代码组成也更加的完美和清晰，总的来说做了如下改进

样式通过 js 生成，而不在多带带引用 scss/css 文件，使用该库的成本进一步降低

实现基于 animation 的动画，结合 animation.css 进一步降低开发成本

将运动形式独立出去，抽象成一个对象，该对象提供一些数据和检查方法

实现了 15 种运动形式

实现简单的事件机制，将代码进一步解耦

使用事件暴露程序执行过程中的一些阶段，方便注入函数

使用 typescript 定义类型，避免开发中的一些不必要的错误

最后

喜欢的话，欢迎大家到我的 github点个 star ，感谢~~

目前实现的运动形式只有 15 种，如果有其他的运动形式也欢迎 Pull request 。

当然如果你想了解 typescript 但又找不到合适的项目练手，可以考虑把该项目 fork 一份用于研究，由于代码量不是很大，看起来应该也不会费劲。

云服务器 GPU云服务器不动了来点阿里云服务器虚拟的吧 yyds干货盘点学不懂Netty？看不懂

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

转载请注明本文地址：https://www.ucloud.cn/yun/104237.html

学不动了，来点有趣的吧

摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。前言这不 webpack 又升级了。。。前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。学不动了，那就来点...

FrozenMap 2019-08-30 11:00 评论0 收藏0
学不动了?可能方法不太对-Grid 网格布局

摘要：前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只前情提要本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学, showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 评论0 收藏0
JDK 12又来了，我学不动了...

摘要：可中断的如果的存在超出暂停目标的可能性，则使其可被中止。未使用分配内存即时返回增强垃圾收集器，以便在空闲时自动将堆内存返回给操作系统。 showImg(https://segmentfault.com/img/remote/1460000018584818); 写在前面看到 JDK 12又发布了，萌新不知不觉感觉瑟瑟发抖，从 Java 1.8的函数式编程思维和范式到 Java 1...

Wildcard 2019-08-16 15:56 评论0 收藏0
朋友，这里有个仓库需要你 PR 一下

摘要：发现仓库被了很多次，因此下定决心要好好的把代码整理一下，方便大家查看代码以及更加愉快的。虽然这个简介有点短，但是该篇的目的并不在于让大家了解这个矩阵动画，而是想让大家一起来丰富这个仓库。前段时间，发布了一篇文章：学不动了，来点有趣的吧。发现 github 仓库被 frok 了很多次，因此下定决心要好好的把代码整理一下，方便大家查看代码以及更加愉快的 Pull Request。简介 ...

roadtogeek 2019-08-30 11:06 评论0 收藏0