A minimal native Javascript animation engine with jQuery plugin and with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is flexibility, performance and size (core engine is 15.8k min and 5.6k gzipped).
For documentation, examples and other cool tips, check the . Thanks to jsdelivr, we have a CDN link . We also have cdnjs link . Sweet!
,
- .to()
,
- .fromTo()
,
- .allTo()
- .allFromTo()
,
- .start()
,
- .stop()
,
- .pause()
- .play()
,
- matrix
,
- matrix3d
,
- scale3d
- rotate3d
,
- top
,
- left
,
- width
- height
,
- color
- backgroundColor
or any element with
- window
- overflow: auto|scroll
,
- yoyo
,
- duration
,
- easing
,
- repeat
,
- delay
(for tween collections),
- offset
and other transform/plugins related options
- repeatDelay
tween property, updating the
- path
attribute of
- d
or
- <path>
elements
- <glyph>
via the
- transform
property and the
- svgTransform
presentation attribute
- transform
tween property for most SVG elements
- draw
,
- fill
,
- stroke
- stopColor
,
- strokeWidth
- stopOpacity
,
- margin
, with all their variations like
- padding
, all variations for
- marginTop
or
- width
like
- height
or
- maxHeight
,
- minWidth
,
- outlineWidth
with all side variations, except short-hand notations
- borderWidth
properties radius
- borderRadius
,
- outlineColor
with all side variations except shorthands, etc
- borderColor
property only for
- clip
type of values
- rect
,
- fontSize
,
- lineHeight
and
- lettersSpacing
- wordSpacing
,
- fill
and
- stroke
color properties
- stop-color
or
- stroke-opacity
- strokeOpacity
NOTE:Starting with KUTE.js v 1.6.0 the Physics and Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the .
This aims to make the KUTE.js script work native within other jQuery apps but it's not always really needed as we will see in the second subchapter here. Since the demos don't insist on this particular plugin, we'll write some basicsright here.
The plugin is just a few bits of code to bridge all of the the awesome
methods to your jQuery apps. The plugin can be found in the/master folder.
- kute.js
You can install this through NPM or bower respectively:
- $ npm install kute.js#or $ bower install kute.js
You can use this module through any of the common javascript module systems. For instance:
- // CommonJS style
- //grab the core
- var kute = require("kute.js");
- // Add SVG Plugin
- require("kute.js/kute-svg");
- // Add CSS Plugin
- require("kute.js/kute-css");
- // Add Attributes Plugin
- require("kute.js/kute-attr");
- // Add Text Plugin
- require("kute.js/kute-text");
- // AMD style
- define(["kute.js", // core engine
- "kute.js/kute-jquery.js", // optional for jQuery apps
- "kute.js/kute-svg.js", // optional for SVG morph, draw and other SVG related CSS
- "kute.js/kute-css.js", // optional for additional CSS properties
- "kute.js/kute-attr.js", // optional for animating presentation attributes
- "kute.js/kute-text.js" // optional for string write and number incrementing animations
- ],
- function(KUTE) {
- // ...
- });
At a glance, you can write one line and you're done.
- //vanilla js
- KUTE.fromTo('selector', fromValues, toValues, options).start();
- //with jQuery plugin
- var tween = $('selector').fromTo(fromValues, toValues, options);
- $(tween).KUTE('start');
Quite easily, you can write 'bit more lines and you're making the earth go round.
- //vanilla js is always the coolest
- KUTE.fromTo(el, {
- translate: 0,
- opacity: 1
- },
- // fromValues
- {
- translate: 150,
- opacity: 0
- },
- // toValues
- // tween options object
- {
- duration: 500,
- delay: 0,
- easing: 'exponentialInOut',
- // basic options
- // callbacks
- start: functionOne,
- // run function when tween starts
- complete: functionTwo,
- // run function when tween animation is finished
- update: functionThree // run function while tween running
- stop: functionThree // run function when tween stopped
- pause: functionThree // run function when tween paused
- resume: functionThree // run function when resuming tween
- }).start(); // this is to start animation right away
Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:
- // first we define the object(s)
- var tween = $('selector').fromTo( // apply fromTo() method to selector
- {
- translate: 0,
- opacity: 1
- },
- // fromValues
- {
- translate: 150,
- opacity: 0
- },
- // toValues
- // tween options object
- {
- duration: 500,
- delay: 0,
- easing: 'exponentialInOut',
- // basic options
- //callbacks
- start: functionOne,
- // run function when tween starts
- complete: functionTwo,
- // run function when tween animation is finished
- update: functionThree // run function while tween running
- stop: functionThree // run function when tween stopped
- pause: functionThree // run function when tween paused
- resume: functionThree // run function when resuming tween
- });
- // then we apply the tween control methods, like start
- tween.start();
Starting with KUTE.js 1.5.7, the jQuery Plugin got lighter and uses the proper method automatically based on how many elements are returned from selector. If one element the proper single object method is used
or
- fromTo()
but if more than one elements are returned it will use
- to()
or
- allFromTo()
.
- allTo()
When size matters, you can handle animations inside jQuery applications without the plugin. Here's how:
- var tween = KUTE.fromTo($('selector')[0], fromValues, toValues, options);
- // or simply provide a class|id selector, just like the usual
- var tween = KUTE.fromTo('#myElement', fromValues, toValues, options);
- tween.start();
Pay attention to that
as jQuery always creates an array of selected objects and not a single object, that is why we need to target a single html object for our tween object and not a colection of objects.
- $('selector')[0]
HTMLCollection objects should be handled with
or
- allFromTo()
methods.
- allTo()
- var tween = KUTE.allFromTo($('selector'), fromValues, toValues, options);
- tween.start();
properties and makes sure to always use the same order of the
- transform
properties (
- transform
,
- translate
,
- rotate
,
- skew
)
- scale
for an element or it's parent for 3D transforms
- perspective
with
- transform
and
- perspective
for element or it's parent
- perspective-origin
colors to
- HEX
and tweens the numeric values, then ALWAYS updates color via
- RGB
- RGB
,
- top
or any other background position with proper value to be able to tween
- centered
)
- currentStyle || getComputedStyle
method
- .to()
,
- start
,
- update
,
- complete
,
- pause
, and they can be set as tween options
- stop
is best for movement animation performance,
- translate3D
will always use it
- kute.js
or
- linear
(removes the use of the evil
- easingExponentialOut
, making development safer, easier and closer to standards :)
- eval
,
- transform
,
- perspective
,
- perspective-origin
and
- border-radius
- requestAnimationFrame
Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them . I also packed a small polyfill set with most essential features required by KUTE.js to work, it's calledminifill, try it.
来源: http://www.tuicool.com/articles/za2IneZ