JavaScript开源 - KUTE.js(高性能 JavaScript 动画库)

   <h2>KUTE.js</h2>    <p>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).</p>    <h2>Demo / CDN</h2>    <p>For documentation, examples and other cool tips, check the demo . Thanks to jsdelivr, we have a CDN link here . We also have cdnjs link right here . Sweet!</p>    <h2>Core Engine - <a href="/misc/goto?guid=4959728452351709084" rel="nofollow,noindex">visit page</a></h2>    <ul>     <li>tween object methods: .to() , .fromTo() , .allTo() , .allFromTo()</li>     <li>tween control methods: .start() , .stop() , .pause() , .play()</li>     <li>2D and 3D transforms: all except matrix , matrix3d , scale3d , rotate3d</li>     <li>box model properties: top , left , width , height</li>     <li>colors: color , backgroundColor</li>     <li>scroll: vertical scroll animation for window or any element with overflow: auto|scroll</li>     <li>options: yoyo , duration , easing , repeat , delay , offset (for tween collections), repeatDelay and other transform/plugins related options</li>     <li>Robert Penner's easing functions</li>     <li>extensible prototypes and utility methods</li>    </ul>    <h2>SVG Plugin - <a href="/misc/goto?guid=4959728452445225552" rel="nofollow,noindex">visit page</a></h2>    <ul>     <li>morphs SVGs with the path tween property, updating the d attribute of <path> or <glyph> elements</li>     <li>cross-browser SVG transform via the svgTransform property and the transform presentation attribute</li>     <li>draws SVG stroke with the draw tween property for most SVG elements</li>     <li>SVG related color CSS properties such as: fill , stroke , stopColor</li>     <li>other SVG CSS properties: strokeWidth , stopOpacity</li>    </ul>    <h2>CSS Plugin - <a href="/misc/goto?guid=4959728452523397009" rel="nofollow,noindex">visit page</a></h2>    <ul>     <li>all box model properties: margin , padding , with all their variations like marginTop , all variations for width or height like maxHeight or minWidth , outlineWidth , borderWidth with all side variations, except short-hand notations</li>     <li>borderRadius properties radius</li>     <li>color properties: outlineColor , borderColor with all side variations except shorthands, etc</li>     <li>clip property only for rect type of values</li>     <li>text properties: fontSize , lineHeight , lettersSpacing and wordSpacing</li>    </ul>    <h2>Text Plugin - <a href="/misc/goto?guid=4959728452609387737" rel="nofollow,noindex">visit page</a></h2>    <ul>     <li>animated number increments/decreases</li>     <li>writing text with a cool effect</li>    </ul>    <h2>Attributes Plugin - <a href="/misc/goto?guid=4959728452697569925" rel="nofollow,noindex">visit page</a></h2>    <ul>     <li>animates any numeric presentation attribute with suffixed value</li>     <li>animates any other non-suffixed numeric presentation attribute</li>     <li>animates fill , stroke and stop-color color properties</li>     <li>handles attributes namespaces properly with stroke-opacity or strokeOpacity</li>     <li>properly handles the suffixes for you</li>    </ul>    <h2>Easing Functions - <a href="/misc/goto?guid=4959728452774267842" rel="nofollow,noindex">visit page</a></h2>    <p>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 <a href="/misc/goto?guid=4959728452862342025" rel="nofollow,noindex">Experiments repository on Github</a> .</p>    <ul>     <li>optimized dynamics easing functions</li>     <li>optimized cubic-bezier easing functions</li>    </ul>    <h2>jQuery Plugin</h2>    <p>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.</p>    <p>The plugin is just a few bits of code to bridge all of the the awesome kute.js methods to your jQuery apps. The plugin can be found in the/master folder.</p>    <h2>NPM/Bower</h2>    <p>You can install this through NPM or bower respectively:</p>    <pre>  <code class="language-javascript">$ npm install kute.js  # or  $ bower install kute.js</code></pre>    <h2>CommonJS/AMD support</h2>    <p>You can use this module through any of the common javascript module systems. For instance:</p>    <pre>  <code class="language-javascript">// 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){      // ...  });</code></pre>    <h2>Basic Usage</h2>    <p>At a glance, you can write one line and you're done.</p>    <pre>  <code class="language-javascript">//vanilla js  KUTE.fromTo('selector', fromValues, toValues, options).start();    //with jQuery plugin  var tween = $('selector').fromTo(fromValues, toValues, options);  $(tween).KUTE('start');</code></pre>    <h2>Advanced Usage</h2>    <p>Quite easily, you can write 'bit more lines and you're making the earth go round.</p>    <pre>  <code class="language-javascript">//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</code></pre>    <h2>Using the jQuery Plugin</h2>    <p>Here's a KUTE.js jQuery Plugin example that showcases most common usage in future apps:</p>    <pre>  <code class="language-javascript">// 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();</code></pre>    <p>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 fromTo() or to() but if more than one elements are returned it will use allFromTo() or allTo() .</p>    <h2>Alternative usage in jQuery powered applications</h2>    <p>When size matters, you can handle animations inside jQuery applications without the plugin. Here's how:</p>    <pre>  <code class="language-javascript">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();</code></pre>    <p>Pay attention to that $('selector')[0] 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.</p>    <p>HTMLCollection objects should be handled with allFromTo() or allTo() methods.</p>    <pre>  <code class="language-javascript">var tween = KUTE.allFromTo($('selector'), fromValues, toValues, options);  tween.start();</code></pre>    <h2>How it works</h2>    <ul>     <li>it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation</li>     <li>handles all kinds of transform properties and makes sure to always use the same order of the transform properties ( translate , rotate , skew , scale )</li>     <li>allows you to set perspective for an element or it's parent for 3D transforms</li>     <li>computes properties' values properly according to their measurement unit (px,%,deg,etc)</li>     <li>properly handles cross browser 3D transform with perspective and perspective-origin for element or it's parent</li>     <li>converts HEX colors to RGB and tweens the numeric values, then ALWAYS updates color via RGB</li>     <li>properly replaces top , centered or any other background position with proper value to be able to tween</li>     <li>for most supported properties it reads the current element computed style property value as initial value (via currentStyle || getComputedStyle )</li>     <li>because it can read properties values from previous tween animations, KUTE.js can do some awesome chaining with it's .to() method</li>     <li>allows you to add many callbacks: start , update , complete , pause , stop , and they can be set as tween options</li>     <li>since translate3D is best for movement animation performance, kute.js will always use it</li>     <li>accepts "nice & easy string" easing functions, like linear or easingExponentialOut (removes the use of the evil eval , making development safer, easier and closer to standards :)</li>     <li>uses all 31 Robert Penner's easing functions, as well as bezier and physics easing functions</li>     <li>handles browser prefixes for you for transform , perspective , perspective-origin , border-radius and requestAnimationFrame</li>     <li>all this is possible with a core script of less than 20k size!</li>    </ul>    <h2>Browser Support</h2>    <p>Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills . I also packed a small polyfill set with most essential features required by KUTE.js to work, it's calledminifill, try it.</p>    <h2>Contributions</h2>    <ul>     <li>Dav aka@dalisoft contributed a great deal for the performance and functionality of KUTE.js</li>     <li>Ingwie Phoenix: RequireJS/CommonJS compatibility and usability with common package managers</li>     <li>Others whocontribute to the project</li>    </ul>    <p> </p>    <p> </p>