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

Changes:

Browse source 
* some reorganizing of the index files
* demo fixes
This commit is contained in:
thednp 2020-06-12 06:13:10 +00:00
parent 12ad62fd09
commit 62d5ae1f83
15 changed files with 545 additions and 783 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/filterEffects.html
View file

@ -121,14 +121,14 @@
<h3>Examples</h3>
<p>Let's have a look at some sample tween objects and a quick example:</p>
<pre><code class="language-javascript">let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
<pre><code class="language-javascript">let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
let fe2 = KUTE.to('selector2', {filter :{ sepia: 50, invert: 80 }})
let fe3 = KUTE.to('selector3', {filter :{ saturate: 150, brightness: 90 }})
let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})
</code></pre>
<div id="filter-examples" class="featurettes">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="mySVGFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>

41
demo/scrollProperty.html
View file

@ -120,7 +120,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
<div id="scrollProperty" class="featurettes">
<div class="example-item" style="height:170px; overflow:hidden; max-width: calc(100% - 60px);">
<h4 class="text-dark" style="margin-top:10px">Sample Heading Ipsulexum</h4>
<h4 class="text-dark" style="margin-top:10px">KUTE.js works here</h4>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy
foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.</p>
@ -142,8 +142,38 @@ KUTE.to('#myElement',{scroll: 0 }).start()
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed
base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
</div>
<div class="example-buttons"><a class="btn btn-olive" href="javascript:void(0)">Start</a></div>
<div class="example-buttons"><a class="btn btn-olive" href="javascript:void(0)">Toggle</a></div>
</div>
<div class="featurettes">
<div class="example-item" style="height:170px; overflow:auto; max-width: calc(100% - 60px); scroll-behavior: smooth;">
<h4 id="sample-title" class="text-dark" style="margin-top:10px">Scroll Behavior Works here</h4>
<p><a onclick="function kickScroll(e){e.preventDefault}" href="#sample-title2">Click to scroll to bottom</a>,
leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy
foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal
that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in
real-time will have multiple touchpoints for offshoring.</p>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with
additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</p>
<h4 id="sample-title2" class="text-dark">Second Sample Heading</h4>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators
offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive
convergence on cross-platform integration.</p>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed
base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
</div>
<div class="example-buttons"><a class="btn btn-olive" onclick="function kickScroll(e){e.preventDefault}" href="#sample-title">Top</a></div>
</div>
<p>The above shows a comparison of the <b>Scroll Property</b> component with the <code>scroll-behavior: smooth</code> CSS; while this browser
feature shows excellent performance it lacks the flexibility and support for legacy browsers.</p>
<h3>Notes</h3>
<ul>
@ -152,9 +182,10 @@ KUTE.to('#myElement',{scroll: 0 }).start()
<a href="./assets/js/scrollProperty.js">scrollProperty.js</a> sample code.</li>
<li>The scroll animation is not as smooth as with transform animations, it has no access at sub-pixel level, but you can play around
with various easing functions and durations to find the best possible outcome.</li>
<li>All pages in this documentation have a <code>&lt;a&gt;Back to top&lt;/a&gt;</code> button at the bottom, just in case you didn't notice.</li>
<li>The component is only bundled with the <code>demo/src/kute-extra.js</code> file. That is thanks to <code>scroll-behavior</code>, but you can
use this component to enable scrolling for legacy browsers.</li>
<li>All pages in this documentation have a <code>&lt;a&gt;Back to top&lt;/a&gt;</code> button at the bottom, just in case you didn't notice, but
only on this page <code>scrollProperty</code> component is used.</li>
<li>The component is only bundled with the <i>demo/src/kute-extra.js</i> file and not in the official build. That is thanks to
<code>scroll-behavior</code>, but you can include this component in your custom builds to enable scrolling for legacy browsers.</li>
</ul>
</div>

160
demo/src/kute-base.js
View file

@ -11,6 +11,86 @@
var version = "2.0.3";
var KUTE = {};
var Tweens = [];
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
var defaultOptions = {
duration: 700,
delay: 0,
@ -19,8 +99,6 @@
var linkProperty = {};
var onStart = {};
var onComplete = {};
var supportedProperties = {};
@ -74,8 +152,6 @@
}
Util.processEasing = processEasing;
var Tweens = [];
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
@ -87,82 +163,6 @@
function removeAll () { Tweens.length = 0; }
var KUTE = {};
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {

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

File diff suppressed because one or more lines are too long

254
demo/src/kute-extra.js
View file

@ -11,6 +11,86 @@
var version = "2.0.3";
var KUTE = {};
var Tweens = [];
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
var supportedProperties = {};
var defaultValues = {};
@ -27,8 +107,6 @@
var crossCheck = {};
var onStart = {};
var onComplete = {};
var linkProperty = {};
@ -49,23 +127,55 @@
var Components = {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
function getInlineStyle(el) {
@ -152,116 +262,6 @@
prepareObject: prepareObject
};
var Tweens = [];
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
var KUTE = {};
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
var this$1 = this;
this.cx = 3.0 * p1x;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

36
demo/svgTransform.html
View file

@ -148,29 +148,29 @@
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
var tween2 = KUTE.to(
'shape', // target
{ // to
svgTransform: {
translate: [150,100],
rotate: 45,
skewX: 15, skewY: 20,
scale: 1.5
}
'shape', // target
{ // to
svgTransform: {
translate: [150,100],
rotate: 45,
skewX: 15, skewY: 20,
scale: 1.5
}
}
);
// transformMatrix can animate SVGElement targets on modern browsers
// requires adding styling like `transform-origin:50% 50%` to the target element
var tween1 = KUTE.to(
'shape', // target
{ // to
transform: {
translate3d: [150,100,0],
rotate3d: [0,0,45],
skew: [15,20],
scale3d: [1.5,1.5,1]
}
}
'shape', // target
{ // to
transform: {
translate3d: [150,100,0],
rotate3d: [0,0,45],
skew: [15,20],
scale3d: [1.5,1.5,1]
}
}
);
</code></pre>
@ -356,7 +356,7 @@ KUTE.fromTo(element,
<li>While you can still use regular CSS3 transforms for SVG elements, everything is fine with Google Chrome, Opera and other webkit browsers, but older Firefox versions struggle with the percentage based
<code>transformOrigin</code> values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements, which means that the SVG Transform component will become a fallback
component to handle legacy browsers in the future. Guess who's taking over :)</li>
<li>This component is bundled with the standard <i>kute.js</i> distribution file and the <i>demo/src/kute-extra.js</i> file.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>

391
dist/kute.esm.js vendored
View file

@ -5,9 +5,85 @@
*/
var version = "2.0.3";
var Util = {};
var KUTE = {};
var Components = {};
var Tweens = [];
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
var supportedProperties = {};
@ -25,8 +101,6 @@ var prepareStart = {};
var crossCheck = {};
var onStart = {};
var onComplete = {};
var linkProperty = {};
@ -43,6 +117,61 @@ var Objects = {
linkProperty: linkProperty
};
var Util = {};
var Components = {};
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
function getInlineStyle(el) {
if ( !el.style ) { return; }
var css = el.style.cssText.replace(/\s/g,'').split(';'),
@ -127,135 +256,6 @@ var Process = {
prepareObject: prepareObject
};
var Tweens = [];
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
var KUTE = {};
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
var this$1 = this;
this.cx = 3.0 * p1x;
@ -2023,131 +2023,6 @@ var svgMorphOps = {
};
Components.SVGMorph = svgMorphOps;
function parseStringOrigin (origin, ref) {
var x = ref.x;
var width = ref.width;
return /[a-zA-Z]/.test(origin) && !/px/.test(origin)
? origin.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50)
: /%/.test(origin) ? (x + parseFloat(origin) * width / 100) : parseFloat(origin);
}
function parseTransformString (a) {
var d = a && /\)/.test(a) ? a.substring(0, a.length-1).split(/\)\s|\)/) : 'none', c = {};
if (d instanceof Array) {
for (var j=0, jl = d.length; j<jl; j++){
var p = d[j].trim().split('(');
c[p[0]] = p[1];
}
}
return c;
}
function parseTransformSVG (p,v){
var svgTransformObject = {};
var bb = this.element.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
var origin = this._transformOrigin;
var translation;
origin = typeof (origin) !== 'undefined' ? (origin.constructor === Array ? origin : origin.split(/\s/)) : [cx,cy];
origin[0] = typeof origin[0] === 'number' ? origin[0] : parseStringOrigin(origin[0],bb);
origin[1] = typeof origin[1] === 'number' ? origin[1] : parseStringOrigin(origin[1],bb);
svgTransformObject.origin = origin;
for ( var i in v ) {
if (i === 'rotate'){
svgTransformObject[i] = typeof v[i] === 'number' ? v[i] : v[i] instanceof Array ? v[i][0] : v[i].split(/\s/)[0]*1;
} else if (i === 'translate'){
translation = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(',') : [v[i],0];
svgTransformObject[i] = [translation[0]*1||0, translation[1]*1||0];
} else if (/skew/.test(i)) {
svgTransformObject[i] = v[i]*1||0;
} else if (i === 'scale'){
svgTransformObject[i] = parseFloat(v[i])||1;
}
}
return svgTransformObject;
}
function svgTransformOnStart (tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (l, a, b, v) {
var x = 0;
var y = 0;
var tmp;
var deg = Math.PI/180;
var scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
var rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
var sin = Math.sin(rotate*deg);
var cos = Math.cos(rotate*deg);
var skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
var skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
var complex = rotate||skewX||skewY||scale!==1 || 0;
x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0;
x *= scale;y *= scale;
y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0;
tmp = cos*x - sin*y;
y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0;
y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0;
l.setAttribute('transform', ( x||y ? (("translate(" + ((x*1000>>0)/1000) + (y ? (("," + ((y*1000>>0)/1000))) : '') + ")")) : '' )
+( rotate ? ("rotate(" + ((rotate*1000>>0)/1000) + ")") : '' )
+( skewX ? ("skewX(" + ((skewX*1000>>0)/1000) + ")") : '' )
+( skewY ? ("skewY(" + ((skewY*1000>>0)/1000) + ")") : '' )
+( scale !== 1 ? ("scale(" + ((scale*1000>>0)/1000) + ")") : '' ) );
};
}
}
function prepareSvgTransform(p,v){
return parseTransformSVG.call(this,p,v);
}
function getStartSvgTransform (tweenProp,value) {
var transformObject = {};
var currentTransform = parseTransformString(this.element.getAttribute('transform'));
for (var i in value) {
transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0);
}
return transformObject;
}
function svgTransformCrossCheck(prop) {
if (!this._resetStart) { return; }
if ( this.valuesEnd[prop] ) {
var valuesStart = this.valuesStart[prop];
var valuesEnd = this.valuesEnd[prop];
var currentTransform = parseTransformSVG.call(this, prop, parseTransformString(this.element.getAttribute('transform')) );
for ( var i in currentTransform ) {
valuesStart[i] = currentTransform[i];
}
var parentSVG = this.element.ownerSVGElement;
var startMatrix = parentSVG.createSVGTransformFromMatrix(
parentSVG.createSVGMatrix()
.translate(-valuesStart.origin[0],-valuesStart.origin[1])
.translate('translate' in valuesStart ? valuesStart.translate[0] : 0,'translate' in valuesStart ? valuesStart.translate[1] : 0)
.rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)
.translate(+valuesStart.origin[0],+valuesStart.origin[1])
);
valuesStart.translate = [startMatrix.matrix.e,startMatrix.matrix.f];
for ( var i$1 in valuesStart) {
if ( !(i$1 in valuesEnd) || i$1==='origin') {
valuesEnd[i$1] = valuesStart[i$1];
}
}
}
}
var svgTransformFunctions = {
prepareStart: getStartSvgTransform,
prepareProperty: prepareSvgTransform,
onStart: svgTransformOnStart,
crossCheck: svgTransformCrossCheck
};
var svgTransformOps = {
component: 'svgTransformProperty',
property: 'svgTransform',
defaultOptions: {transformOrigin:'50% 50%'},
defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
Interpolate: {numbers: numbers},
functions: svgTransformFunctions,
Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }
};
Components.SVGTransformProperty = svgTransformOps;
for (var component in Components) {
var compOps = Components[component];
Components[component] = new Animation(compOps);

2
dist/kute.esm.min.js vendored
View file

File diff suppressed because one or more lines are too long

391
dist/kute.js vendored
View file

@ -11,9 +11,85 @@
var version = "2.0.3";
var Util = {};
var KUTE = {};
var Components = {};
var Tweens = [];
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var onStart = {};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
var supportedProperties = {};
@ -31,8 +107,6 @@
var crossCheck = {};
var onStart = {};
var onComplete = {};
var linkProperty = {};
@ -49,6 +123,61 @@
linkProperty: linkProperty
};
var Util = {};
var Components = {};
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
function getInlineStyle(el) {
if ( !el.style ) { return; }
var css = el.style.cssText.replace(/\s/g,'').split(';'),
@ -133,135 +262,6 @@
prepareObject: prepareObject
};
var Tweens = [];
function add (tw) { return Tweens.push(tw); }
function remove (tw) {
var i = Tweens.indexOf(tw);
i !== -1 && Tweens.splice(i, 1);
}
function getAll () { return Tweens; }
function removeAll () { Tweens.length = 0; }
var KUTE = {};
var globalObject = typeof (global) !== 'undefined' ? global
: typeof(self) !== 'undefined' ? self
: typeof(window) !== 'undefined' ? window : {};
function numbers(a, b, v) {
a = +a; b -= a; return a + b * v;
}
function units(a, b, u, v) {
a = +a; b -= a; return ( a + b * v ) + u;
}
function arrays(a,b,v){
var result = [];
for ( var i=0, l=b.length; i<l; i++ ) {
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0 ) / 1000;
}
return result
}
var Interpolate = {
numbers: numbers,
units: units,
arrays: arrays
};
var Time = {};
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
Time.now = function () {
var time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
};
} else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
Time.now = self.performance.now.bind(self.performance);
}
var Tick = 0;
var Ticker = function (time) {
var i = 0;
while ( i < Tweens.length ) {
if ( Tweens[i].update(time) ) {
i++;
} else {
Tweens.splice(i, 1);
}
}
Tick = requestAnimationFrame(Ticker);
};
function stop() {
setTimeout(function () {
if (!Tweens.length && Tick) {
cancelAnimationFrame(Tick);
Tick = null;
for (var obj in onStart) {
if (typeof (onStart[obj]) === 'function') {
KUTE[obj] && (delete KUTE[obj]);
} else {
for (var prop in onStart[obj]) {
KUTE[prop] && (delete KUTE[prop]);
}
}
}
for (var i in Interpolate) {
KUTE[i] && (delete KUTE[i]);
}
}
},64);
}
var Render = {Tick: Tick,Ticker: Ticker,Tweens: Tweens,Time: Time};
for ( var blob in Render ) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
}
}
globalObject["_KUTE"] = KUTE;
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
var componentLink = linkProperty[component];
var componentProps = supportedProperties[component];
for ( var fnObj in componentLink ) {
if ( typeof(componentLink[fnObj]) === 'function'
&& Object.keys(this$1.valuesEnd).some(function (i) { return componentProps && componentProps.includes(i)
|| i=== 'attr' && Object.keys(this$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); }); } ) )
{
!KUTE[fnObj] && (KUTE[fnObj] = componentLink[fnObj]);
} else {
for ( var prop in this$1.valuesEnd ) {
for ( var i in this$1.valuesEnd[prop] ) {
if ( typeof(componentLink[i]) === 'function' ) {
!KUTE[i] && (KUTE[i] = componentLink[i]);
} else {
for (var j in componentLink[fnObj]){
if (componentLink[i] && typeof(componentLink[i][j]) === 'function' ) {
!KUTE[j] && (KUTE[j] = componentLink[i][j]);
}
}
}
}
}
}
}
};
for (var component in linkProperty)loop( component );
}
var Internals = {
add: add,
remove: remove,
getAll: getAll,
removeAll: removeAll,
stop: stop,
linkInterpolation: linkInterpolation
};
var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) {
var this$1 = this;
this.cx = 3.0 * p1x;
@ -2029,131 +2029,6 @@
};
Components.SVGMorph = svgMorphOps;
function parseStringOrigin (origin, ref) {
var x = ref.x;
var width = ref.width;
return /[a-zA-Z]/.test(origin) && !/px/.test(origin)
? origin.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50)
: /%/.test(origin) ? (x + parseFloat(origin) * width / 100) : parseFloat(origin);
}
function parseTransformString (a) {
var d = a && /\)/.test(a) ? a.substring(0, a.length-1).split(/\)\s|\)/) : 'none', c = {};
if (d instanceof Array) {
for (var j=0, jl = d.length; j<jl; j++){
var p = d[j].trim().split('(');
c[p[0]] = p[1];
}
}
return c;
}
function parseTransformSVG (p,v){
var svgTransformObject = {};
var bb = this.element.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
var origin = this._transformOrigin;
var translation;
origin = typeof (origin) !== 'undefined' ? (origin.constructor === Array ? origin : origin.split(/\s/)) : [cx,cy];
origin[0] = typeof origin[0] === 'number' ? origin[0] : parseStringOrigin(origin[0],bb);
origin[1] = typeof origin[1] === 'number' ? origin[1] : parseStringOrigin(origin[1],bb);
svgTransformObject.origin = origin;
for ( var i in v ) {
if (i === 'rotate'){
svgTransformObject[i] = typeof v[i] === 'number' ? v[i] : v[i] instanceof Array ? v[i][0] : v[i].split(/\s/)[0]*1;
} else if (i === 'translate'){
translation = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(',') : [v[i],0];
svgTransformObject[i] = [translation[0]*1||0, translation[1]*1||0];
} else if (/skew/.test(i)) {
svgTransformObject[i] = v[i]*1||0;
} else if (i === 'scale'){
svgTransformObject[i] = parseFloat(v[i])||1;
}
}
return svgTransformObject;
}
function svgTransformOnStart (tweenProp){
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (l, a, b, v) {
var x = 0;
var y = 0;
var tmp;
var deg = Math.PI/180;
var scale = 'scale' in b ? numbers(a.scale,b.scale,v) : 1;
var rotate = 'rotate' in b ? numbers(a.rotate,b.rotate,v) : 0;
var sin = Math.sin(rotate*deg);
var cos = Math.cos(rotate*deg);
var skewX = 'skewX' in b ? numbers(a.skewX,b.skewX,v) : 0;
var skewY = 'skewY' in b ? numbers(a.skewY,b.skewY,v) : 0;
var complex = rotate||skewX||skewY||scale!==1 || 0;
x -= complex ? b.origin[0] : 0;y -= complex ? b.origin[1] : 0;
x *= scale;y *= scale;
y += skewY ? x*Math.tan(skewY*deg) : 0;x += skewX ? y*Math.tan(skewX*deg) : 0;
tmp = cos*x - sin*y;
y = rotate ? sin*x + cos*y : y;x = rotate ? tmp : x;
x += 'translate' in b ? numbers(a.translate[0],b.translate[0],v) : 0;
y += 'translate' in b ? numbers(a.translate[1],b.translate[1],v) : 0;
x += complex ? b.origin[0] : 0;y += complex ? b.origin[1] : 0;
l.setAttribute('transform', ( x||y ? (("translate(" + ((x*1000>>0)/1000) + (y ? (("," + ((y*1000>>0)/1000))) : '') + ")")) : '' )
+( rotate ? ("rotate(" + ((rotate*1000>>0)/1000) + ")") : '' )
+( skewX ? ("skewX(" + ((skewX*1000>>0)/1000) + ")") : '' )
+( skewY ? ("skewY(" + ((skewY*1000>>0)/1000) + ")") : '' )
+( scale !== 1 ? ("scale(" + ((scale*1000>>0)/1000) + ")") : '' ) );
};
}
}
function prepareSvgTransform(p,v){
return parseTransformSVG.call(this,p,v);
}
function getStartSvgTransform (tweenProp,value) {
var transformObject = {};
var currentTransform = parseTransformString(this.element.getAttribute('transform'));
for (var i in value) {
transformObject[i] = i in currentTransform ? currentTransform[i] : (i==='scale'?1:0);
}
return transformObject;
}
function svgTransformCrossCheck(prop) {
if (!this._resetStart) { return; }
if ( this.valuesEnd[prop] ) {
var valuesStart = this.valuesStart[prop];
var valuesEnd = this.valuesEnd[prop];
var currentTransform = parseTransformSVG.call(this, prop, parseTransformString(this.element.getAttribute('transform')) );
for ( var i in currentTransform ) {
valuesStart[i] = currentTransform[i];
}
var parentSVG = this.element.ownerSVGElement;
var startMatrix = parentSVG.createSVGTransformFromMatrix(
parentSVG.createSVGMatrix()
.translate(-valuesStart.origin[0],-valuesStart.origin[1])
.translate('translate' in valuesStart ? valuesStart.translate[0] : 0,'translate' in valuesStart ? valuesStart.translate[1] : 0)
.rotate(valuesStart.rotate||0).skewX(valuesStart.skewX||0).skewY(valuesStart.skewY||0).scale(valuesStart.scale||1)
.translate(+valuesStart.origin[0],+valuesStart.origin[1])
);
valuesStart.translate = [startMatrix.matrix.e,startMatrix.matrix.f];
for ( var i$1 in valuesStart) {
if ( !(i$1 in valuesEnd) || i$1==='origin') {
valuesEnd[i$1] = valuesStart[i$1];
}
}
}
}
var svgTransformFunctions = {
prepareStart: getStartSvgTransform,
prepareProperty: prepareSvgTransform,
onStart: svgTransformOnStart,
crossCheck: svgTransformCrossCheck
};
var svgTransformOps = {
component: 'svgTransformProperty',
property: 'svgTransform',
defaultOptions: {transformOrigin:'50% 50%'},
defaultValue: {translate:0, rotate:0, skewX:0, skewY:0, scale:1},
Interpolate: {numbers: numbers},
functions: svgTransformFunctions,
Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }
};
Components.SVGTransformProperty = svgTransformOps;
for (var component in Components) {
var compOps = Components[component];
Components[component] = new Animation(compOps);

2
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/index-base.js
View file

@ -1,11 +1,11 @@
import {version as Version} from './../package.json'
import Render from './core/Render.js'
import Interpolate from './objects/Interpolate.js'
import Objects from './objects/ObjectsBase.js'
import Util from './objects/Util.js'
import Easing from './easing/easing-base.js'
import Internals from './core/Internals.js'
import Render from './core/Render.js'
import Selector from './util/selector.js'
import Interpolate from './objects/Interpolate.js'
import Animation from './animation/animationBase.js'

24
src/index-extra.js
View file

@ -1,11 +1,11 @@
import {version as Version} from './../package.json'
import Render from './core/Render.js'
import Interpolate from './objects/Interpolate.js'
import Objects from './objects/Objects.js'
import Util from './objects/Util.js'
import Components from './objects/Components.js'
import Interpolate from './objects/Interpolate.js'
import Process from './process/Process.js'
import Internals from './core/Internals.js'
import Render from './core/Render.js'
import Process from './process/Process.js'
import CubicBezier from 'cubic-bezier-easing'
import Easing from './easing/easing-bezier.js'
import Selector from './util/selector.js'
@ -48,24 +48,6 @@ for (let component in Components) {
export default {
Animation,
Components,
// Components: {
// BackgroundPosition,
// BorderRadius,
// BoxModel,
// ColorProperties,
// ClipProperty,
// FilterEffects,
// HTMLAttributes,
// OpacityProperty,
// TextProperties,
// TextWrite,
// TransformMatrix,
// ScrollProperty,
// ShadowProperties,
// SVGCubicMorph,
// SVGDraw,
// SVGTransform
// },
// Tween Interface
TweenExtra,

13
src/index.js
View file

@ -1,13 +1,13 @@
import {version as Version} from './../package.json'
import Util from './objects/Util.js'
import Components from './objects/Components.js'
import Objects from './objects/Objects.js'
import Process from './process/Process.js'
import Internals from './core/Internals.js'
import Render from './core/Render.js'
import Interpolate from './objects/Interpolate.js'
import Objects from './objects/Objects.js'
import Util from './objects/Util.js'
import Components from './objects/Components.js'
import Internals from './core/Internals.js'
import Process from './process/Process.js'
import CubicBezier from 'cubic-bezier-easing'
import Easing from './easing/easing-bezier.js' // and CubicBezier easing functions
import Easing from './easing/easing-bezier.js'
import Selector from './util/selector.js'
// TweenConstructor
@ -31,7 +31,6 @@ import {textWriteOps} from './components/textWrite.js'
import {transformOps} from './components/transformFunctions.js'
import {svgDrawOps} from './components/svgDraw.js'
import {svgMorphOps} from './components/svgMorph.js'
import {svgTransformOps} from './components/svgTransform.js'
// init components
for (let component in Components) {