学不动了，来点有趣的吧

前言

这不 webpack 又升级了。。。

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

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

matrixChange

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

能够在这里查看不一样动画组合成的效果，也能够在jsfiddle上查看具体的代码编写。

使用

浏览器

<script src="https://cdn.jsdelivr.net/npm/matrixchange/dist/matrixChange.js"></script>
复制代码

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 一份用于研究，因为代码量不是很大，看起来应该也不会费劲。