學不動了，來點有趣的吧

yexiaobai 發布于2019-08-23 17:50 / 2713人閱讀

摘要：學不動了，那就來點有趣的本著折騰的性格，一直想寫一個完全由我個人完成的動畫，終于在前段時間完成了的重寫，并完善了，先看看動畫效果如何可以在這里查看不同動畫組合成的效果，也可以在上查看具體的代碼編寫。

前言

這不 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？看不懂

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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