Shulou(Shulou.com)06/03 Report--

This article introduces the open source free modern Javascript animation engine library kute.js and its components, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Introduction

KUTE.js is a JavaScript animation engine for modern browsers, a modern JavaScript animation engine based on ES6 / ES7 standards, which provides the most basic functions for Web developers, designers and animators, and provides an easy-to-use way to set up high-performance cross-browser animation. The focus is on high code quality, flexibility, high performance and small size.

Github

At present, it is active and updated on Github. The number of stars has reached 2k so far.

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

Related characteristics

Based on ES6/ES7 JavaScript

The entire code base has been redesigned to the latest standards using flexible build tools based on summaries. Most classes can be extended through ES6 extensions or your usual prototypes, depending on the class.

Rich components

All previously supported properties and plug-ins have been split into components for higher modularity. Add new content to expand the scope. The official release contains only the most popular components.

Familiar grammar

You can use familiar syntax, reliable configuration, callback systems, and other component-related options to create associated objects

Tools and options

In a wide range of configurations, some components provide tools to further control the results.

There are signs to follow.

Each component demo page contains a large number of guidelines and techniques on how to optimize performance and visual presentation

MIT License

Based on MIT License open source protocol

advantage

1. Support core functions, modular architecture, solid and complete components, modern JavaScript for future Web development.

2. While KUTE.js mainly supports modern browsers, it also opens the door to old browsers through its old components, tools and polyfill.

3. Fast and modern JavaScript code with reliable build tools can be found in the source code. All can be done using SVGElement,HTML attributes, CSS transformations, and so on.

4. The library includes the ease function of Robert Penner, while KUTE.js also contains its own CubicBezier ease class, which can provide fast and accurate ease for animation.

module

KUTE.js contains 18 components, but some are not included in the default package:

BackgroundPosition- enables animation for the backgroundPositionCSS attribute

BorderRadius- enables animation for all borderRadius attributes

BoxModel-make animated boxModel attributes, such as top,left,width, etc.

ClipProperty- enables animation of the clip attribute

ColorProperties-Color sample feature of animation color,backgroundColor

FilterEffects- enables animation for this filter property

HtmlAttributes- enables animation for any number and some color-based HTML properties

OpacityProperty- enables animation for this opacity property

ScrollProperty- enables animation for the window / Element scrollTopObject attribute

ShadowProperties- enables animation for the shadowProperties property: textShadow&boxShadow

SvgCubicMorph- enables animation for the dPresentation Attribute of SVGElement targets; this implements some Raphael.js functions

SvgMorph- enables animation for dPresentation Attribute of SVGElement targets; this component implements some D3.js and flubber functions

SvgDraw- enables animation for SVGElement-specific strokeDasharray and strokeDashoffsetCSS properties

SvgTransform- enables animation for transform presentation properties

TextProperties- enables digital HTMLTextElement-related CSS attributes, such as fontSize or letterSpacing, for animation

TextWrite- enables animation for the contents of various strings

TransformFunctions- enables animation for the transformCSS3 property, which is the default component bundled with the official version

TransformLegacy- transform enables animation for the CSS3 property on the older browser IE9 +, but is not included in the official version, but can be used in a custom version

TransformMatrix- enables animation for the transformCSS3 property; this component implements DOMMatrix () API and is very lightweight

Summary

Compared with other animation libraries, kute.js is also a very worthwhile animation library, it is more suitable for modern Web development, modularization, the latest Javascript syntax.

On the open source free modern Javascript animation engine library kute.js introduction and how many of its components are shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.