學不動了，來點有趣的吧

前言

這不 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 一份用於研究，因爲代碼量不是很大，看起來應該也不會費勁。