国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

學(xué)不動(dòng)了，來點(diǎn)有趣的吧

FrozenMap / 2036人閱讀

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

前言

這不 webpack 又升級(jí)了。。。

前端的發(fā)展可謂是異常的迅速，各大框架層出不窮，每當(dāng)有新框架出現(xiàn)，或是老框架升級(jí)，評(píng)論區(qū)總是哀嚎遍野，學(xué)不動(dòng)了，真的學(xué)不動(dòng)了。

學(xué)不動(dòng)了，那就來點(diǎn)有趣的~~

matrixChange

本著折騰的性格，一直想寫一個(gè)完全由我個(gè)人完成的動(dòng)畫，終于在前段時(shí)間完成了 typescript 的重寫，并完善了 DEMO ，先看看動(dòng)畫效果如何

可以在這里查看不同動(dòng)畫組合成的效果，也可以在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"
];

// 該方法返回一個(gè)對(duì)象
let move = makeMatrixChange(app, {
  images: urls,
  row: 7,
  col: 9
})

// 使用第 0 種運(yùn)動(dòng)方式，和默認(rèn)的動(dòng)畫效果
move.movePoint(mode[0])

// 使用第 0 種運(yùn)動(dòng)方式，和 transition 過渡，提供類名即可，eg: .test{transfrom:scale(0);}
move.movePoint(mode[0], {
    className: "test"
})

// 使用第 0 種運(yùn)動(dòng)方式，和 animation 動(dòng)畫，比如配合 animation.css 動(dòng)畫庫
// animation 需要提供兩個(gè)類名，進(jìn)場(chǎng)動(dòng)畫和出場(chǎng)動(dòng)畫，同時(shí)需要標(biāo)記這個(gè)是 animation 動(dòng)畫
move.movePoint(mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX"
})

// 使用特定的圖片進(jìn)行動(dòng)畫
// 不傳 image 則隨機(jī)取傳入的圖片列表中的一張圖片
move.movePoint(mode[0], {
    animate: true,
    classNameIn: "animated flipInX",
    classNameOut: "animated flipOutX",
    image: urls[0]
})

matrixchange 庫只擁有一個(gè)方法和一個(gè)數(shù)組

makeMatrixChange 用于生成矩陣，調(diào)用返回對(duì)象的 movePoint 方法即可讓生成的矩陣運(yùn)動(dòng)

mode 為一些列的運(yùn)動(dòng)形式的數(shù)組，運(yùn)動(dòng)形式為 movePoint 方法的第一參數(shù)。

movePoint 的第二個(gè)參數(shù)具體定義如下

type option = {
    className?:     string
    animate?:       boolean
    classNameIn?:   string
    classNameOut?:  string
    image?:         string
}
談?wù)勑牡?/b>

該項(xiàng)目在業(yè)余時(shí)間完成，由最開始的單純?yōu)g覽器可執(zhí)行代碼到 ES6 的模塊化方式，最終到現(xiàn)在的 typescript 版本，可以說是順應(yīng)了前端的發(fā)展潮流，也對(duì)使用 typescript 編寫項(xiàng)目有了一定的了解。

代碼重構(gòu)雖然耗費(fèi)了大量的時(shí)間，但是項(xiàng)目的結(jié)構(gòu)和代碼組成也更加的完美和清晰，總的來說做了如下改進(jìn)

樣式通過 js 生成，而不在多帶帶引用 scss/css 文件，使用該庫的成本進(jìn)一步降低

實(shí)現(xiàn)基于 animation 的動(dòng)畫，結(jié)合 animation.css 進(jìn)一步降低開發(fā)成本

將運(yùn)動(dòng)形式獨(dú)立出去，抽象成一個(gè)對(duì)象，該對(duì)象提供一些數(shù)據(jù)和檢查方法

實(shí)現(xiàn)了 15 種運(yùn)動(dòng)形式

實(shí)現(xiàn)簡(jiǎn)單的事件機(jī)制，將代碼進(jìn)一步解耦

使用事件暴露程序執(zhí)行過程中的一些階段，方便注入函數(shù)

使用 typescript 定義類型，避免開發(fā)中的一些不必要的錯(cuò)誤

最后

喜歡的話，歡迎大家到我的 github點(diǎn)個(gè) star ，感謝~~

目前實(shí)現(xiàn)的運(yùn)動(dòng)形式只有 15 種，如果有其他的運(yùn)動(dòng)形式也歡迎 Pull request 。

當(dāng)然如果你想了解 typescript 但又找不到合適的項(xiàng)目練手，可以考慮把該項(xiàng)目 fork 一份用于研究，由于代碼量不是很大，看起來應(yīng)該也不會(huì)費(fèi)勁。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114712.html

相關(guān)文章

  • 學(xué)不動(dòng)了，來點(diǎn)有趣的吧

    摘要：學(xué)不動(dòng)了，那就來點(diǎn)有趣的本著折騰的性格，一直想寫一個(gè)完全由我個(gè)人完成的動(dòng)畫，終于在前段時(shí)間完成了的重寫，并完善了，先看看動(dòng)畫效果如何可以在這里查看不同動(dòng)畫組合成的效果，也可以在上查看具體的代碼編寫。 前言 這不 webpack 又升級(jí)了。。。 前端的發(fā)展可謂是異常的迅速，各大框架層出不窮，每當(dāng)有新框架出現(xiàn)，或是老框架升級(jí)，評(píng)論區(qū)總是哀嚎遍野，學(xué)不動(dòng)了，真的學(xué)不動(dòng)了。 學(xué)不動(dòng)了，那就來點(diǎn)...

    yexiaobai 評(píng)論0 收藏0

  • 學(xué)不動(dòng)了?可能方法不太對(duì)-Grid 網(wǎng)格布局

    摘要：前情提要本人是一個(gè)學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開始我就開始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只前情提要 ??本人是一個(gè)學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué), showImg(https://user-gold-c...

    happyfish 評(píng)論0 收藏0

  • JDK 12又來了，我學(xué)不動(dòng)了...

    摘要：可中斷的如果的存在超出暫停目標(biāo)的可能性，則使其可被中止。未使用分配內(nèi)存即時(shí)返回增強(qiáng)垃圾收集器，以便在空閑時(shí)自動(dòng)將堆內(nèi)存返回給操作系統(tǒng)。 showImg(https://segmentfault.com/img/remote/1460000018584818); 寫在前面 看到 JDK 12又發(fā)布了，萌新不知不覺感覺瑟瑟發(fā)抖，從 Java 1.8的函數(shù)式編程思維和范式 到 Java 1...

    Wildcard 評(píng)論0 收藏0

  • 朋友，這里有個(gè)倉庫需要你 PR 一下

    摘要：發(fā)現(xiàn)倉庫被了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的。雖然這個(gè)簡(jiǎn)介有點(diǎn)短，但是該篇的目的并不在于讓大家了解這個(gè)矩陣動(dòng)畫，而是想讓大家一起來豐富這個(gè)倉庫。 前段時(shí)間，發(fā)布了一篇文章：學(xué)不動(dòng)了，來點(diǎn)有趣的吧。發(fā)現(xiàn) github 倉庫被 frok 了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的 Pull Request。 簡(jiǎn)介 ...

    roadtogeek 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<