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

Attributes Plugin can also tween color attributes: fill, stroke, stopColor. Perhaps some things can be removed from SVG Plugin.

Browse source
This commit is contained in:
thednp 2016-09-24 06:02:25 +03:00
parent 94116ebe76
commit cafb243a36
7 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/js/attr.js
View file

@ -16,7 +16,7 @@ circleBtn.addEventListener('click', function(){
});
// coordinatea of gradient
// coordinates of gradient
var gradBtn = document.getElementById('gradBtn');
var closingGradient = KUTE.to('#gradient',{attr: {x1:'49%', x2:'49%', y1:'49%', y2:'51%'}}, {easing: 'easingCubicInOut'});
var rotatingGradient1 = KUTE.to('#gradient',{attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}}, {easing: 'easingCubicInOut'});
@ -28,3 +28,10 @@ rotatingGradient2.chain(openingGradient);
gradBtn.addEventListener('click', function(){
!closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
});
// fill color
var fillBtn = document.getElementById('fillBtn');
var fillAttribute = KUTE.to('#fill',{attr: {fill: 'red'}}, {duration: 1500, repeat: 1, yoyo: true });
fillBtn.addEventListener('click', function(){
!fillAttribute.playing && fillAttribute.start();
});

27
attr.html
View file

@ -101,8 +101,30 @@ var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
</code></pre>
<p>The <code>strokeWidth</code> example is very interesting because this attribute along with many others can work with <code>px</code>, <code>%</code> or with no unit/suffix.</p>
<h3>Color Attributes</h3>
<p>Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect is not visible, so always make sure you know what you're doing.</p>
<pre><code class="language-javascript">// some fill rgb, rgba, hex
var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
// some stopColor or 'stop-color'
var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
</code></pre>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<h3>Unitless Properties</h3>
<path id="fill" fill="#673AB7" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<div class="example-buttons">
<a id="fillBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used.</p>
<h3>Unitless Attributes</h3>
<p>In the first example, let's play with the attributes of a <code>&lt;circle&gt;</code> element: radius and center coordinates.</p>
<pre><code class="language-javascript">// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
@ -121,7 +143,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
</div>
</div>
<h3>Suffixed Properties</h3>
<h3>Suffixed Attributes</h3>
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the <code>%</code> unit is found in the current value and used as unit for the DOM update:</p>
<pre><code class="language-javascript">// gradient positions to middle
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
@ -147,6 +169,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
</div>
</div>
<p>This plugin is quite handy and a great addition to the <a href="svg.html">SVG Plugin</a>.</p>
</div>
<ul id="share" class="nav">

6
easing.html
View file

@ -176,7 +176,7 @@
<h3>Cubic Bezier Functions</h3>
<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.</p>
<p>You can use them either with <code>easing: KUTE.Ease.bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need <a href="http://cubic-bezier.com/" target="_blank">right here</a>.</p>
<p>You can use them either with <code>easing: Bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need <a href="http://cubic-bezier.com/" target="_blank">right here</a>.</p>
<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
<ul>
<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
@ -257,7 +257,7 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
</code></pre>
</li>
</ul>
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing:physicsIn(friction:200)</code>. The list is:</p>
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing: Physics.physicsIn(friction:200)</code>. The list is:</p>
<ul>
<li><strong>curves</strong>: <kbd>physicsIn</kbd>, <kbd>physicsOut</kbd>, <kbd>physicsInOut</kbd> can do all multipliers (from sinusoidal to exponential) via the <code>friction</code> option;</li>
<li><strong>back</strong>: <kbd>physicsBackIn</kbd>, <kbd>physicsBackOut</kbd>, <kbd>physicsBackInOut</kbd> also benefit from the <code>friction</code> option.</li>
@ -329,4 +329,4 @@ easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/easing.js"></script> <!-- examples stuff -->
</body>
</html>
</html>

2
src/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.7 | © dnp_theme | Attributes Plugin | MIT-License
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=r.dom,u=n.prS,a=n.pp,o=r.Interpolate.unit,f=r.Interpolate.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var l=s(a),v=c(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(v)){var d=n.truD(v).u||n.truD(r[a]).u,b=/%/.test(d)?"_percent":"_"+d;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin requires KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=r.dom,o=n.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,c=r.Interpolate.color,s=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],l=n.truC,d=n.truD,v=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=s(t,o);n[o]=p.indexOf(v(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o,u={};for(o in r){var b=v(o),A=s(n,b.replace(/_+[a-z]+/,""));if(p.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[o])||/(%|[a-z]+)$/.test(A))){var m=d(A).u||d(r[o]).u,w=/%/.test(m)?"_percent":"_"+m;o+w in e||(e[o+w]=function(t,e,r,n,i){var o=o||v(e).replace(w,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),u[o+w]=d(r[o])}else p.indexOf(b)>-1?(o in e||(e[o]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,c(n,i,o,r.keepHex))}),u[o]=l(r[o])):(o in e||(e[o]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),u[o]=parseFloat(r[o]))}return u}});

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

File diff suppressed because one or more lines are too long

2
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
svg.html
View file

@ -438,7 +438,7 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: [150, svgOriginX, s
<h4>Recommendations for SVG Transforms</h4>
<ul>
<li>The SVG Plugin coming with KUTE.js version 1.5.3 is trying to make sure animations don't go out of control, but you need to <b>always use same order of transform functions</b>: <code>translate</code>, <code>scale</code>, <code>rotate</code>, <code>skewX</code> and <code>skewY</code>. All this to make sure the animation looks like we would expect from regular HTML elements transformations. Maybe future versions will feature <code>.matrix()</code> transformations to handle all possible transform function combinations, but I'm going to need help with implementation and testing.</li>
<li>The SVG Plugin coming with KUTE.js version 1.5.3 is trying to make sure animations don't go out of control, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>scale</code>, <code>rotate</code>, <code>skewX</code> and <code>skewY</code>. All this to make sure the animation looks like we would expect from regular HTML elements transformations. Maybe future versions will feature <code>.matrix()</code> transformations to handle all possible transform function combinations, but I'm going to need help with implementation and testing.</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>