deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Changes:

Browse source 
* Included fix https://github.com/thednp/kute.js/pull/49
* Implemented https://github.com/thednp/kute.js/issues/47
* Documentation updates
This commit is contained in:
thednp 2017-01-03 00:48:28 +02:00
parent 0433d479d7
commit 9348792e2d
12 changed files with 148 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
demo/assets/js/svg.js
View file

@ -216,4 +216,32 @@ var svgTween52 = KUTE.to(svgm2, {
mixedBtn.addEventListener('click', function(){
!svgTween51.playing && svgTween51.start();
!svgTween52.playing && svgTween52.start();
}, false);
// chained transforms
var svgChained = document.getElementById('svgChained');
var chainedBtn = document.getElementById('chainedBtn');
var svgc = svgChained.getElementsByTagName('path')[0];
var svgTween6 = KUTE.fromTo(svgc,
{ // from
svgTransform: {
translate: 0,
scale: 0.5,
rotate: 45,
// skewX: 0
},
},
{ // to
svgTransform: {
translate: 450,
scale: 1.5,
rotate: 360,
// skewX: -45
}
},
{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
chainedBtn.addEventListener('click', function(){
!svgTween6.playing && svgTween6.start();
}, false);

33
demo/options.html
View file

@ -82,6 +82,8 @@
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as we'll see later on this page.</p>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<ul>
@ -99,9 +101,9 @@
<ul>
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a <kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation. No default value.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values and has no default value.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a <kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>. There is no default value but the SVG Plugin will always use <code>50% 50%</code> for your transform tweens.</li>
</ul>
<h3>SVG Plugin Options</h3>
@ -136,8 +138,31 @@ var callback = function(){
//create object and start animating already
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
</code></pre>
<h3>Other</h3>
<h3>Other Options</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
<h3>Override Default Options' Values</h3>
<p>Most options have a default value as you can see above, they are globally defined in the <code>KUTE.defaultOptions</code> object like so:</p>
<pre><code class="language-javascript">// the list of all tween options that can be overrided
KUTE.defaultOptions = {
duration: 700,
delay: 0,
offset: 0, // allTo() or allFromTo() methods only
repeat: 0,
yoyo: false,
easing: 'linear',
keepHex: false,
morphPrecision: 15, // SVG Plugin only
textChars: 'alpha', // Text Plugin only
};
</code></pre>
<p>As some <a href="https://github.com/thednp/kute.js/issues/47">user suggested</a>, he would need a way to override the default duration value, here's how to:</p>
<pre><code class="language-javascript">// sets the new global duration tween option default value
KUTE.defaultOptions.duration = 1000;
</code></pre>
<p>Also make sure to define the new option global default values <b>before</b> you define your tween objects.</p>
</div>
<div class="content-wrap">

2
demo/src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/src/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.1 | © dnp_theme | Text Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});

2
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

55
demo/svg.html
View file

@ -333,13 +333,13 @@ var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, ske
</div>
</div>
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance the coordinates for <i>25% 75%</i> position for instance or <i>center top</i>.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
<p>In other cases you may want to rotate shapes around the center point of the parent <code>&lt;svg></code> or <code>&lt;g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i> coordinate, so here's how to deal with it:</p>
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
// get the bounding box of the parent element
var svgBB = element.ownerSVGElement.getBBox(); // returns same object but it's for the parent &lt;svg> element
var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent &lt;svg> element
// we need to know the current translate position of the element [x,y]
// in our case is:
@ -365,7 +365,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This is the only example we have adapted the transform-origin for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, so make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<h4>SVG Translation</h4>
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation. When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:</p>
@ -379,7 +379,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation and the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value. For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value. For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
<h4>SVG Skew</h4>
<p>For skews for SVGs we have a very simple notation: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
@ -402,14 +402,14 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<path class="bg-lime" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-olive" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
<h4>SVG Mixed Transforms</h4>
<h4>SVG Mixed Transform Functions</h4>
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it from regular HTML elements. Let's combine 3 functions at the same time and see what happens:</p>
<div class="featurettes">
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
@ -423,23 +423,44 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
</div>
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is different from what we've set in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.</p>
<h4>Chained SVG transforms</h4>
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>, it should look like this:</p>
<pre><code class="language-markup">&lt;svg>
&lt;circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20">&lt;/circle>
&lt;/svg>
</code></pre>
<p>Well in this case I would recommend using the values of the first translation as <code>transform-origin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
{svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X &amp; Y axis
{svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
{transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
).start();
</code></pre>
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value.</p>
<div class="featurettes">
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-blue"
d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"
transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)"></path>
</svg>
<div class="example-buttons">
<a id="chainedBtn" class="btn btn-lime" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.</p>
<h4>Recommendations for SVG Transforms</h4>
<ul>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements. Keep in mind that the SVG transforms will use the center of a shape as transform origin by default.</li>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
<li>Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
<li>By default browsers use <code>overflow: hidden</code> for <code>&lt;svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code> or some browser specific tricks if that is the case.</li>
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code>&lt;svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow the properties that change and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> feature does not support 3D transforms, because they are not supported in all browsers.</li>
<li>This feature does not work with SVG specific chained transforms right away (do not confuse with tween chain), but luckily there is a workaround<br>EG: <code>transform="translate(150,150) rotate(45) translate(-150,-150)"</code>.<br>In this case I would recommend using the values of the first translation as transform-origin for your tween, like so:<br>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
{svgTransform : { translate: 0, rotate: 45, skewX: 0 }}, // startValues we asume the current translation is zero on both X and Y axis
{svgTransform : { translate: 450, rotate: 180, skewX: 20 }}, // endValues we will translate to a 450 value horizontaly and skew the X axis by 20 degrees
{transformOrigin: [150,150]} // tween options use the transform-origin of the target SVG element
).start();
</code></pre>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
</ul>

2
dist/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.6.1 | © dnp_theme | Text Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=n.defaultOptions,a=String("abcdefghijklmnopqrstuvwxyz").split(""),l=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),p=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),h=a.concat(l,f),c=(h.concat(p),Math.random),g=Math.min;return o.textChars="alpha",i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?a:"upper"===s.textChars?l:"numeric"===s.textChars?f:"alphanumeric"===s.textChars?h:"symbols"===s.textChars?p:s.textChars?s.textChars.split(""):a,o=u.length,m=u[c()*o>>0],d="",x="",b=n.substring(0),y=r.substring(0);d=""!==n?b.substring(b.length,g(i*b.length,b.length)>>0):"",x=y.substring(0,g(i*y.length,y.length)>>0),t.innerHTML=i<1?x+m+d:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

27
kute-svg.js
View file

@ -22,6 +22,9 @@
DOM = K.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions
defaultOptions = K.defaultOptions, // default tween options since 1.6.1
// browser detection
isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false,
isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); // we optimize morph depending on device type
@ -49,6 +52,7 @@
return points;
};
// SVG MORPH
var getSegments = function(s,e,r){ // getSegments returns an array of points based on a sample size morphPrecision
var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
@ -60,9 +64,9 @@
}
return [s1,e1];
},
getClosestPoint = function(p,t,s){ // getClosestPoint for polygon paths it returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
getClosestPoint = function(p,t,s){ // utility for polygon paths, returns a close point from the original path (length,pointAtLength,smallest); // intervalLength
var x, y, a = [], l = s.length, dx, nx, pr;
for (i=0; i<l; i++){
for (var i=0; i<l; i++){
x = Math.abs(s[i][0] - t.x);
y = Math.abs(s[i][1] - t.y);
a.push( Math.sqrt( x * x + y * y ) );
@ -75,7 +79,7 @@
: Math.abs(s[dx][0] - t.x) < p && Math.abs(s[dx][1] - t.y) < p ? s[dx]
: [t.x,t.y];
},
pathToAbsolute = function(p) { // simple pathToAbsolute for polygons | this is still BETA / a work in progress
pathToAbsolute = function(p) { // simple utility for polygons | this is still BETA / a work in progress
var np = p.match(pathReg), wp = [], l = np.length, s, c, r, x = 0, y = 0;
for (var i = 0; i<l; i++){
np[i] = np[i]; c = np[i][0]; r = new RegExp(c+'[^\\d|\\-]*','i');
@ -100,10 +104,10 @@
}
return np;
},
getOnePath = function(p){ return p.split(/z/i).shift() + 'z'; }, // getOnePath, first path only
createPath = function (p){ // createPath
var c = document.createElementNS(ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
c.setAttribute('d',d); return c;
getOnePath = function(p){ return p.split(/z/i).shift() + 'z'; }, // we only tween first path only
createPath = function (p){ // create a <path> when glyph
var createdPath = document.createElementNS(ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
createdPath.setAttribute('d',d); return createdPath;
},
forcePath = function(p){ // forcePath for glyph elements
if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
@ -177,6 +181,9 @@
return [s1,e1]
};
// set default morphPrecision since 1.6.1
defaultOptions.morphPrecision = 15;
// process path object and also register the render function
parseProperty.path = function(o,v) {
if (!('path' in DOM)) {
@ -191,11 +198,11 @@
return this.element.getAttribute('d');
};
crossCheck.path = function() {
crossCheck.path = function() { // unlike other cases, the crossCheck apply to both to() and fromTo() methods
var p1 = getOnePath(this.valuesStart.path.o), p2 = getOnePath(this.valuesEnd.path.o), paths;
// path tween options
this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : 15;
this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : defaultOptions.morphPrecision;
this._isPolygon = !/[CSQTA]/i.test(p1) && !/[CSQTA]/i.test(p2); // check if both shapes are polygons
// begin processing paths
@ -392,7 +399,7 @@
}
crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
if (!this.options.rpr) return;
if (!this.options.rpr) return; // fix since 1.6.1 for fromTo() method
var valuesStart = this.valuesStart.svgTransform, valuesEnd = this.valuesEnd.svgTransform,
currentTransform = parseTransformObject.call(this, parseTransformString(this.element.getAttribute('transform')) );

7
kute-text.js
View file

@ -19,7 +19,8 @@
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
K = KUTE, DOM = K.dom, prepareStart = K.prepareStart,
parseProperty = K.parseProperty, number = g.Interpolate.number;
parseProperty = K.parseProperty, number = g.Interpolate.number,
defaultOptions = K.defaultOptions;
// let's go with the plugin
var _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
@ -30,6 +31,8 @@
_all = _alphanumeric.concat(_symbols), // all caracters
random = Math.random, min = Math.min;
defaultOptions.textChars = 'alpha'; // set default textChars tween option since 1.6.1
prepareStart.text = prepareStart.number = function(p,v){
return this.element.innerHTML;
}
@ -46,7 +49,7 @@
: _string, ll = tp.length,
t = tp[(random() * ll)>>0], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart TO DO
ix = a !== '' ? fi.substring(fi.length, min(v * fi.length, fi.length)>>0 ) : ''; // initial text, A value
tx = f.substring(0, min(v * f.length, f.length)>>0 ); // end text, B value
l.innerHTML = v < 1 ? tx + t + ix : b;

38
kute.js
View file

@ -45,8 +45,18 @@
p = null;
}
// tools / utils
var getPrefix = function() { //returns browser prefix
// default tween options, since 1.6.1
var defaultOptions = {
duration: 700,
delay: 0,
offset: 0,
repeat: 0,
yoyo: false,
easing: 'linear',
keepHex: false,
},
// tools / utils
getPrefix = function() { //returns browser prefix
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'],
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
for (var i = 0, pl = pf.length; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
@ -596,7 +606,7 @@
this.options = {}; for (var o in options) { this.options[o] = options[o]; }
this.options.rpr = options.rpr || false; // internal option to process inline/computed style at start instead of init true/false
this.valuesRepeat = {}; // internal valuesStartRepeat
this.valuesRepeat = {}; // internal valuesRepeat
this.valuesEnd = {}; // valuesEnd
this.valuesStart = {}; // valuesStart
@ -613,12 +623,13 @@
}
this.options.chain = []; // chained Tweens
this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing.linear;
this.options.repeat = options.repeat || 0;
this.options.repeatDelay = options.repeatDelay || 0;
this.options.yoyo = options.yoyo || false;
this.options.duration = options.duration || 700; // duration option | default
this.options.delay = options.delay || 0; // delay option | default
this.options.easing = options.easing && typeof processEasing(options.easing) === 'function' ? processEasing(options.easing) : easing[defaultOptions.easing]; // you can only set a core easing function as default
this.options.repeat = options.repeat || defaultOptions.repeat;
this.options.repeatDelay = options.repeatDelay || defaultOptions.repeatDelay;
this.options.yoyo = options.yoyo || defaultOptions.yoyo;
this.options.duration = options.duration || defaultOptions.duration; // duration option | default
this.options.delay = options.delay || defaultOptions.delay; // delay option | default
this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
},
// tween control and chain
@ -695,16 +706,16 @@
TweensTO = function (els, vE, o) { // .to
this.tweens = []; var options = [];
for ( var i = 0, tl = els.length; i < tl; i++ ) {
options[i] = o || {}; o.delay = o.delay || 0;
options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
this.tweens.push( to(els[i], vE, options[i]) );
}
},
TweensFT = function (els, vS, vE, o) { // .fromTo
this.tweens = []; var options = [];
for ( var i = 0, l = els.length; i < l; i++ ) {
options[i] = o || {}; o.delay = o.delay || 0;
options[i].delay = i>0 ? o.delay + (o.offset||0) : o.delay;
options[i] = o || {}; o.delay = o.delay || defaultOptions.delay;
options[i].delay = i>0 ? o.delay + (o.offset||defaultOptions.offset) : o.delay;
this.tweens.push( fromTo(els[i], vS, vE, options[i]) );
}
},
@ -743,6 +754,7 @@
return { // export core methods to public for plugins
property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
defaultOptions : defaultOptions, // default tween options since 1.6.1
to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
ticker : ticker, tick : tick, tweens : tweens, update: update, dom : DOM, // update
parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck