介紹

KUTE.js是用于現代瀏覽器的JavaScript動畫引擎，基于ES6 / ES7標準的現代JavaScript動畫引擎，為Web開發人員，設計人員和動畫師提供了最基本的功能，提供了易于使用的方法來設置高性能的跨瀏覽器動畫。重點是代碼質量高，靈活性強，性能高且體積小

Github

目前在Github上保持活躍和更新維護，截止目前stars數已經達到2k

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

相關特性

• 基于ES6/ES7 JavaScript

整個代碼庫都使用基于匯總的靈活構建工具按照最新標準進行了重新設計。大多數類都可以通過ES6擴展或您通常的原型進行擴展，具體取決于類。

• 豐富的組件

以前支持的所有屬性和插件都已拆分為組件，以實現更高的模塊化。添加新的內容，以擴大范圍。官方發行版僅包含最受歡迎的組件。

• 熟悉的語法

可以使用熟悉的語法，可靠的配置，回調系統和其他與組件相關的選項來創建關聯對象

• 工具和選項

在廣泛的配置中，某些組件提供了進一步控制結果的工具。

• 有跡可循

每個組件演示頁面都包含大量有關如何優化性能和視覺呈現的指南和技巧

• MIT License

基于MIT License開源協議

優勢

1、支持核心功能，模塊化架構，堅實而完整的組件，現代JavaScript面向未來的Web開發。

2、KUTE.js以主要支持現代瀏覽器的同時，它還通過其舊有的組件，工具和polyfill向舊的瀏覽器敞開了大門。

3、在源代碼中，可以找到具有可靠構建工具的快速且現代的JavaScript代碼。都可以使用SVGElement，HTML屬性，CSS轉換等完成。

4、該庫包含Robert Penner的緩動功能，而KUTE.js還包含其自己的CubicBezier緩動類，可為動畫提供快速準確的緩動。

組件

KUTE.js包含18個組件，不過部分組件不包括在默認的包內：

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

總結

相較于其他的動畫庫，kute.js也是一個非常值得使用的動畫庫，它更適合于現代Web開發方式，模塊化，最新的Javascript語法……