介紹

KUTE.js是用于現(xiàn)代瀏覽器的JavaScript動(dòng)畫(huà)引擎，基于ES6 / ES7標(biāo)準(zhǔn)的現(xiàn)代JavaScript動(dòng)畫(huà)引擎，為Web開(kāi)發(fā)人員，設(shè)計(jì)人員和動(dòng)畫(huà)師提供了最基本的功能，提供了易于使用的方法來(lái)設(shè)置高性能的跨瀏覽器動(dòng)畫(huà)。重點(diǎn)是代碼質(zhì)量高，靈活性強(qiáng)，性能高且體積小

Github

目前在Github上保持活躍和更新維護(hù)，截止目前stars數(shù)已經(jīng)達(dá)到2k

https://github.com/thednp/kute.js/

相關(guān)特性

• 基于ES6/ES7 JavaScript

整個(gè)代碼庫(kù)都使用基于匯總的靈活構(gòu)建工具按照最新標(biāo)準(zhǔn)進(jìn)行了重新設(shè)計(jì)。大多數(shù)類(lèi)都可以通過(guò)ES6擴(kuò)展或您通常的原型進(jìn)行擴(kuò)展，具體取決于類(lèi)。

• 豐富的組件

以前支持的所有屬性和插件都已拆分為組件，以實(shí)現(xiàn)更高的模塊化。添加新的內(nèi)容，以擴(kuò)大范圍。官方發(fā)行版僅包含最受歡迎的組件。

• 熟悉的語(yǔ)法

可以使用熟悉的語(yǔ)法，可靠的配置，回調(diào)系統(tǒng)和其他與組件相關(guān)的選項(xiàng)來(lái)創(chuàng)建關(guān)聯(lián)對(duì)象

• 工具和選項(xiàng)

在廣泛的配置中，某些組件提供了進(jìn)一步控制結(jié)果的工具。

• 有跡可循

每個(gè)組件演示頁(yè)面都包含大量有關(guān)如何優(yōu)化性能和視覺(jué)呈現(xiàn)的指南和技巧

• MIT License

基于MIT License開(kāi)源協(xié)議

優(yōu)勢(shì)

1、支持核心功能，模塊化架構(gòu)，堅(jiān)實(shí)而完整的組件，現(xiàn)代JavaScript面向未來(lái)的Web開(kāi)發(fā)。

2、KUTE.js以主要支持現(xiàn)代瀏覽器的同時(shí)，它還通過(guò)其舊有的組件，工具和polyfill向舊的瀏覽器敞開(kāi)了大門(mén)。

3、在源代碼中，可以找到具有可靠構(gòu)建工具的快速且現(xiàn)代的JavaScript代碼。都可以使用SVGElement，HTML屬性，CSS轉(zhuǎn)換等完成。

4、該庫(kù)包含Robert Penner的緩動(dòng)功能，而KUTE.js還包含其自己的CubicBezier緩動(dòng)類(lèi)，可為動(dòng)畫(huà)提供快速準(zhǔn)確的緩動(dòng)。

組件

KUTE.js包含18個(gè)組件，不過(guò)部分組件不包括在默認(rèn)的包內(nèi)：

• backgroundPosition-為backgroundPositionCSS屬性啟用動(dòng)畫(huà)
• borderRadius-為所有borderRadius屬性啟用動(dòng)畫(huà)
• boxModel -使動(dòng)畫(huà)的boxModel的屬性，如top，left，width，等
• clipProperty-啟用clip屬性的動(dòng)畫(huà)
• colorProperties -動(dòng)畫(huà)的色彩樣特性color，backgroundColor
• filterEffects-為該filter屬性啟用動(dòng)畫(huà)
• htmlAttributes-為任何數(shù)字以及一些基于顏色的HTML屬性啟用動(dòng)畫(huà)
• opacityProperty-為該opacity屬性啟用動(dòng)畫(huà)
• scrollProperty-為window / Element scrollTopObject屬性啟用動(dòng)畫(huà)
• shadowProperties-為shadowProperties屬性啟用動(dòng)畫(huà)：textShadow＆boxShadow
• svgCubicMorph-為SVGElement目標(biāo)的dPresentation Attribute 啟用動(dòng)畫(huà)<path>；這實(shí)現(xiàn)了一些Raphael.js功能
• svgMorph-為SVGElement目標(biāo)的dPresentation Attribute 啟用動(dòng)畫(huà)<path>；該組件實(shí)現(xiàn)了一些D3.js和flubber功能
• svgDraw-為SVGElement 特有的strokeDasharray和strokeDashoffsetCSS屬性啟用動(dòng)畫(huà)<path>
• svgTransform-為transform演示文稿屬性啟用動(dòng)畫(huà)
• textProperties-為動(dòng)畫(huà)啟用數(shù)字HTMLTextElement相關(guān)的CSS屬性，例如fontSize或letterSpacing
• textWrite-為各種字符串的內(nèi)容啟用動(dòng)畫(huà)
• transformFunctions-為transformCSS3屬性啟用動(dòng)畫(huà)，該屬性是與官方版本捆綁在一起的默認(rèn)組件
• transformLegacy- transform在舊版瀏覽器IE9 +上為CSS3屬性啟用動(dòng)畫(huà)，但不包含在官方版本中，但可以在自定義版本中使用
• transformMatrix-為transformCSS3屬性啟用動(dòng)畫(huà)；該組件實(shí)現(xiàn)了DOMMatrix()API并且非常輕便

總結(jié)

相較于其他的動(dòng)畫(huà)庫(kù)，kute.js也是一個(gè)非常值得使用的動(dòng)畫(huà)庫(kù)，它更適合于現(xiàn)代Web開(kāi)發(fā)方式，模塊化，最新的Javascript語(yǔ)法……