Changes:
* added Typescript support * added Typescript generate `index.d.ts` script * fixed minor `textWrite` component type error * reworked the index source files
This commit is contained in:
thednp
parent
f56e19369a
commit
b70d46d387
|
|
@ -6,6 +6,7 @@
|
|||
// "plugin:vue/vue3-recommended"
|
||||
],
|
||||
// "parser": "vue-eslint-parser",
|
||||
// "parser": "eslint-plugin-vue",
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -305,6 +305,154 @@
|
|||
return { name: ComponentName };
|
||||
};
|
||||
|
||||
function perspective(a, b, u, v) {
|
||||
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
|
||||
}
|
||||
|
||||
function translate3d(a, b, u, v) {
|
||||
var translateArray = [];
|
||||
for (var ax = 0; ax < 3; ax += 1) {
|
||||
translateArray[ax] = (a[ax] || b[ax]
|
||||
? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u;
|
||||
}
|
||||
return ("translate3d(" + (translateArray.join(',')) + ")");
|
||||
}
|
||||
|
||||
function rotate3d(a, b, u, v) {
|
||||
var rotateStr = '';
|
||||
rotateStr += a[0] || b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
|
||||
rotateStr += a[1] || b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
|
||||
rotateStr += a[2] || b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
|
||||
return rotateStr;
|
||||
}
|
||||
|
||||
function translate(a, b, u, v) {
|
||||
var translateArray = [];
|
||||
translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
|
||||
translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
|
||||
return ("translate(" + (translateArray.join(',')) + ")");
|
||||
}
|
||||
|
||||
function rotate(a, b, u, v) {
|
||||
return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
|
||||
}
|
||||
|
||||
function scale(a, b, v) {
|
||||
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + ")");
|
||||
}
|
||||
|
||||
function skew(a, b, u, v) {
|
||||
var skewArray = [];
|
||||
skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
|
||||
skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
|
||||
return ("skew(" + (skewArray.join(',')) + ")");
|
||||
}
|
||||
|
||||
/* transformFunctions = {
|
||||
property: 'transform',
|
||||
subProperties,
|
||||
defaultValues,
|
||||
Interpolate: {translate,rotate,skew,scale},
|
||||
functions } */
|
||||
|
||||
// same to svg transform, attr
|
||||
|
||||
// Component Functions
|
||||
function onStartTransform(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
|
||||
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
|
||||
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
|
||||
+ (a.skew ? skew(a.skew, b.skew, 'deg', v) : '') // array [x,y]
|
||||
+ (a.scale || b.scale ? scale(a.scale, b.scale, v) : ''); // one side might be 0
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Base Component
|
||||
var BaseTransform = {
|
||||
component: 'baseTransform',
|
||||
property: 'transform',
|
||||
functions: { onStart: onStartTransform },
|
||||
Interpolate: {
|
||||
perspective: perspective,
|
||||
translate3d: translate3d,
|
||||
rotate3d: rotate3d,
|
||||
translate: translate,
|
||||
rotate: rotate,
|
||||
scale: scale,
|
||||
skew: skew,
|
||||
},
|
||||
};
|
||||
|
||||
function numbers(a, b, v) { // number1, number2, progress
|
||||
var A = +a;
|
||||
var B = b - a;
|
||||
// a = +a; b -= a;
|
||||
return A + B * v;
|
||||
}
|
||||
|
||||
// Component Functions
|
||||
function boxModelOnStart(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (v > 0.99 || v < 0.01
|
||||
? ((numbers(a, b, v) * 10) >> 0) / 10
|
||||
: (numbers(a, b, v)) >> 0) + "px";
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Component Base Props
|
||||
var baseBoxProps = ['top', 'left', 'width', 'height'];
|
||||
var baseBoxOnStart = {};
|
||||
baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; });
|
||||
|
||||
// Component Base
|
||||
var baseBoxModel = {
|
||||
component: 'baseBoxModel',
|
||||
category: 'boxModel',
|
||||
properties: baseBoxProps,
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: { onStart: baseBoxOnStart },
|
||||
};
|
||||
|
||||
/* opacityProperty = {
|
||||
property: 'opacity',
|
||||
defaultValue: 1,
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Component Functions
|
||||
function onStartOpacity(tweenProp/* , value */) {
|
||||
// opacity could be 0 sometimes, we need to check regardless
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Base Component
|
||||
var baseOpacity = {
|
||||
component: 'baseOpacity',
|
||||
property: 'opacity',
|
||||
// defaultValue: 1,
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: { onStart: onStartOpacity },
|
||||
};
|
||||
|
||||
// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js'
|
||||
// support for kute-base.js ends here
|
||||
|
||||
var Components = {
|
||||
Transform: new AnimationBase(BaseTransform),
|
||||
BoxModel: new AnimationBase(baseBoxModel),
|
||||
Opacity: new AnimationBase(baseOpacity),
|
||||
};
|
||||
|
||||
function queueStart() {
|
||||
var this$1$1 = this;
|
||||
|
||||
|
|
@ -494,165 +642,11 @@
|
|||
return new TweenConstructor(selector(element), startObject, endObject, options);
|
||||
}
|
||||
|
||||
function numbers(a, b, v) { // number1, number2, progress
|
||||
var A = +a;
|
||||
var B = b - a;
|
||||
// a = +a; b -= a;
|
||||
return A + B * v;
|
||||
}
|
||||
|
||||
function arrays(a, b, v) {
|
||||
var result = [];
|
||||
for (var i = 0, l = b.length; i < l; i += 1) {
|
||||
result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0) / 1000;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/* transformMatrix = {
|
||||
property : 'transform',
|
||||
defaultValue: {},
|
||||
interpolators: {},
|
||||
functions = { prepareStart, prepareProperty, onStart, crossCheck }
|
||||
} */
|
||||
|
||||
// Component name
|
||||
var matrixComponent = 'transformMatrixBase';
|
||||
|
||||
// Component special
|
||||
// this component is restricted to modern browsers only
|
||||
var CSS3Matrix = typeof (DOMMatrix) !== 'undefined' ? DOMMatrix : null;
|
||||
|
||||
// Component Functions
|
||||
var onStartTransform = {
|
||||
transform: function transform(tweenProp) {
|
||||
if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
var matrix = new CSS3Matrix();
|
||||
var tObject = {};
|
||||
|
||||
Object.keys(b).forEach(function (p) {
|
||||
tObject[p] = p === 'perspective' ? numbers(a[p], b[p], v) : arrays(a[p], b[p], v);
|
||||
});
|
||||
|
||||
// set perspective
|
||||
if (tObject.perspective) { matrix.m34 = -1 / tObject.perspective; }
|
||||
|
||||
// set translate
|
||||
matrix = tObject.translate3d
|
||||
? matrix.translate(tObject.translate3d[0], tObject.translate3d[1], tObject.translate3d[2])
|
||||
: matrix;
|
||||
|
||||
// set rotation
|
||||
matrix = tObject.rotate3d
|
||||
? matrix.rotate(tObject.rotate3d[0], tObject.rotate3d[1], tObject.rotate3d[2])
|
||||
: matrix;
|
||||
|
||||
// set skew
|
||||
if (tObject.skew) {
|
||||
matrix = tObject.skew[0] ? matrix.skewX(tObject.skew[0]) : matrix;
|
||||
matrix = tObject.skew[1] ? matrix.skewY(tObject.skew[1]) : matrix;
|
||||
}
|
||||
|
||||
// set scale
|
||||
matrix = tObject.scale3d
|
||||
? matrix.scale(tObject.scale3d[0], tObject.scale3d[1], tObject.scale3d[2])
|
||||
: matrix;
|
||||
|
||||
// set element style
|
||||
elem.style[tweenProp] = matrix.toString();
|
||||
};
|
||||
}
|
||||
},
|
||||
CSS3Matrix: function CSS3Matrix$1(prop) {
|
||||
if (CSS3Matrix && this.valuesEnd.transform) {
|
||||
if (!KUTE[prop]) { KUTE[prop] = CSS3Matrix; }
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Component Base Object
|
||||
var baseMatrixTransform = {
|
||||
component: matrixComponent,
|
||||
property: 'transform',
|
||||
functions: { onStart: onStartTransform },
|
||||
Interpolate: {
|
||||
perspective: numbers,
|
||||
translate3d: arrays,
|
||||
rotate3d: arrays,
|
||||
skew: arrays,
|
||||
scale3d: arrays,
|
||||
},
|
||||
};
|
||||
|
||||
// Component Functions
|
||||
function boxModelOnStart(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (v > 0.99 || v < 0.01
|
||||
? ((numbers(a, b, v) * 10) >> 0) / 10
|
||||
: (numbers(a, b, v)) >> 0) + "px";
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Component Base Props
|
||||
var baseBoxProps = ['top', 'left', 'width', 'height'];
|
||||
var baseBoxOnStart = {};
|
||||
baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; });
|
||||
|
||||
// Component Base
|
||||
var baseBoxModel = {
|
||||
component: 'baseBoxModel',
|
||||
category: 'boxModel',
|
||||
properties: baseBoxProps,
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: { onStart: baseBoxOnStart },
|
||||
};
|
||||
|
||||
/* opacityProperty = {
|
||||
property: 'opacity',
|
||||
defaultValue: 1,
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Component Functions
|
||||
function onStartOpacity(tweenProp/* , value */) {
|
||||
// opacity could be 0 sometimes, we need to check regardless
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Base Component
|
||||
var baseOpacity = {
|
||||
component: 'baseOpacity',
|
||||
property: 'opacity',
|
||||
// defaultValue: 1,
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: { onStart: onStartOpacity },
|
||||
};
|
||||
|
||||
var version = "2.1.3";
|
||||
|
||||
// import {baseCrossBrowserMove} from './components/crossBrowserMove.js'
|
||||
|
||||
// const Transform = new Animation(baseTransform)
|
||||
var Transform = new AnimationBase(baseMatrixTransform);
|
||||
var BoxModel = new AnimationBase(baseBoxModel);
|
||||
var Opacity = new AnimationBase(baseOpacity);
|
||||
|
||||
var indexBase = {
|
||||
Animation: AnimationBase,
|
||||
Components: {
|
||||
Transform: Transform,
|
||||
BoxModel: BoxModel,
|
||||
Opacity: Opacity,
|
||||
// Move
|
||||
},
|
||||
Components: Components,
|
||||
|
||||
Tween: TweenBase,
|
||||
fromTo: fromTo,
|
||||
|
|
|
|||
2
demo/src/kute-base.min.js
vendored
2
demo/src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -4243,19 +4243,12 @@
|
|||
onStart: onStartWrite,
|
||||
};
|
||||
|
||||
/* textWrite = {
|
||||
category: 'textWrite',
|
||||
defaultValues: {},
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Full Component
|
||||
var textWrite = {
|
||||
component: 'textWriteProperties',
|
||||
category: 'textWrite',
|
||||
properties: ['text', 'number'],
|
||||
defaultValues: { text: ' ', numbers: '0' },
|
||||
defaultValues: { text: ' ', number: '0' },
|
||||
defaultOptions: { textChars: 'alpha' },
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: textWriteFunctions,
|
||||
|
|
@ -4473,8 +4466,6 @@
|
|||
},
|
||||
};
|
||||
|
||||
var version = "2.1.3";
|
||||
|
||||
var Components = {
|
||||
BackgroundPosition: BackgroundPosition,
|
||||
BorderRadius: BorderRadius,
|
||||
|
|
@ -4494,11 +4485,14 @@
|
|||
MatrixTransform: matrixTransform,
|
||||
};
|
||||
|
||||
// init components
|
||||
Object.keys(Components).forEach(function (component) {
|
||||
var compOps = Components[component];
|
||||
Components[component] = new AnimationDevelopment(compOps);
|
||||
});
|
||||
|
||||
var version = "2.1.3";
|
||||
|
||||
var indexExtra = {
|
||||
Animation: AnimationDevelopment,
|
||||
Components: Components,
|
||||
|
|
|
|||
2
demo/src/kute-extra.min.js
vendored
2
demo/src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/src/kute.min.js
vendored
2
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
101
dist/kute.esm.js
vendored
101
dist/kute.esm.js
vendored
|
|
@ -76,7 +76,7 @@ class CubicBezier {
|
|||
}
|
||||
}
|
||||
|
||||
var KUTE = {};
|
||||
var KUTE$1 = {};
|
||||
|
||||
var Tweens = [];
|
||||
|
||||
|
|
@ -125,16 +125,16 @@ function stop() {
|
|||
Tick = null;
|
||||
Object.keys(onStart).forEach((obj) => {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
if (KUTE[obj]) delete KUTE[obj];
|
||||
if (KUTE$1[obj]) delete KUTE$1[obj];
|
||||
} else {
|
||||
Object.keys(onStart[obj]).forEach((prop) => {
|
||||
if (KUTE[prop]) delete KUTE[prop];
|
||||
if (KUTE$1[prop]) delete KUTE$1[prop];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(Interpolate).forEach((i) => {
|
||||
if (KUTE[i]) delete KUTE[i];
|
||||
if (KUTE$1[i]) delete KUTE$1[i];
|
||||
});
|
||||
}
|
||||
}, 64);
|
||||
|
|
@ -146,12 +146,12 @@ const Render = {
|
|||
Tick, Ticker, Tweens, Time,
|
||||
};
|
||||
Object.keys(Render).forEach((blob) => {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
if (!KUTE$1[blob]) {
|
||||
KUTE$1[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
});
|
||||
|
||||
globalObject$1._KUTE = KUTE;
|
||||
globalObject$1._KUTE = KUTE$1;
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
|
|
@ -216,18 +216,18 @@ function linkInterpolation() { // DON'T change
|
|||
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
|
||||
&& Object.keys(this.valuesEnd).some((i) => (componentProps && componentProps.includes(i))
|
||||
|| (i === 'attr' && Object.keys(this.valuesEnd[i]).some((j) => componentProps && componentProps.includes(j))))) {
|
||||
if (!KUTE[fnObj]) KUTE[fnObj] = componentLink[fnObj];
|
||||
if (!KUTE$1[fnObj]) KUTE$1[fnObj] = componentLink[fnObj];
|
||||
} else {
|
||||
Object.keys(this.valuesEnd).forEach((prop) => {
|
||||
const propObject = this.valuesEnd[prop];
|
||||
if (propObject instanceof Object) {
|
||||
Object.keys(propObject).forEach((i) => {
|
||||
if (typeof (componentLink[i]) === 'function') { // transformCSS3
|
||||
if (!KUTE[i]) KUTE[i] = componentLink[i];
|
||||
if (!KUTE$1[i]) KUTE$1[i] = componentLink[i];
|
||||
} else {
|
||||
Object.keys(componentLink[fnObj]).forEach((j) => {
|
||||
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
|
||||
if (!KUTE[j]) KUTE[j] = componentLink[i][j];
|
||||
if (!KUTE$1[j]) KUTE$1[j] = componentLink[i][j];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -508,7 +508,7 @@ class TweenBase {
|
|||
const easingFnName = this._easing.name;
|
||||
if (!onStart[easingFnName]) {
|
||||
onStart[easingFnName] = function easingFn(prop) {
|
||||
if (!KUTE[prop] && prop === this._easing.name) KUTE[prop] = this._easing;
|
||||
if (!KUTE$1[prop] && prop === this._easing.name) KUTE$1[prop] = this._easing;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -523,7 +523,7 @@ class TweenBase {
|
|||
add(this);
|
||||
this.playing = true;
|
||||
|
||||
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
|
||||
this._startTime = typeof time !== 'undefined' ? time : KUTE$1.Time();
|
||||
this._startTime += this._delay;
|
||||
|
||||
if (!this._startFired) {
|
||||
|
|
@ -576,7 +576,7 @@ class TweenBase {
|
|||
}
|
||||
|
||||
update(time) {
|
||||
const T = time !== undefined ? time : KUTE.Time();
|
||||
const T = time !== undefined ? time : KUTE$1.Time();
|
||||
|
||||
let elapsed;
|
||||
|
||||
|
|
@ -590,7 +590,7 @@ class TweenBase {
|
|||
|
||||
// render the update
|
||||
Object.keys(this.valuesEnd).forEach((tweenProp) => {
|
||||
KUTE[tweenProp](this.element,
|
||||
KUTE$1[tweenProp](this.element,
|
||||
this.valuesStart[tweenProp],
|
||||
this.valuesEnd[tweenProp],
|
||||
progress);
|
||||
|
|
@ -757,7 +757,7 @@ class Tween extends TweenBase {
|
|||
// re-queue execution context
|
||||
queueStart.call(this);
|
||||
// update time and let it roll
|
||||
this._startTime += KUTE.Time() - this._pauseTime;
|
||||
this._startTime += KUTE$1.Time() - this._pauseTime;
|
||||
add(this);
|
||||
// restart ticker if stopped
|
||||
if (!Tick) Ticker();
|
||||
|
|
@ -769,7 +769,7 @@ class Tween extends TweenBase {
|
|||
if (!this.paused && this.playing) {
|
||||
remove(this);
|
||||
this.paused = true;
|
||||
this._pauseTime = KUTE.Time();
|
||||
this._pauseTime = KUTE$1.Time();
|
||||
if (this._onPause !== undefined) {
|
||||
this._onPause.call(this);
|
||||
}
|
||||
|
|
@ -789,7 +789,7 @@ class Tween extends TweenBase {
|
|||
}
|
||||
|
||||
update(time) {
|
||||
const T = time !== undefined ? time : KUTE.Time();
|
||||
const T = time !== undefined ? time : KUTE$1.Time();
|
||||
|
||||
let elapsed;
|
||||
|
||||
|
|
@ -803,7 +803,7 @@ class Tween extends TweenBase {
|
|||
|
||||
// render the update
|
||||
Object.keys(this.valuesEnd).forEach((tweenProp) => {
|
||||
KUTE[tweenProp](this.element,
|
||||
KUTE$1[tweenProp](this.element,
|
||||
this.valuesStart[tweenProp],
|
||||
this.valuesEnd[tweenProp],
|
||||
progress);
|
||||
|
|
@ -889,7 +889,7 @@ class TweenCollection {
|
|||
}
|
||||
|
||||
start(time) {
|
||||
const T = time === undefined ? KUTE.Time() : time;
|
||||
const T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map((tween) => tween.start(T));
|
||||
return this;
|
||||
}
|
||||
|
|
@ -900,13 +900,13 @@ class TweenCollection {
|
|||
}
|
||||
|
||||
pause(time) {
|
||||
const T = time === undefined ? KUTE.Time() : time;
|
||||
const T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map((tween) => tween.pause(T));
|
||||
return this;
|
||||
}
|
||||
|
||||
resume(time) {
|
||||
const T = time === undefined ? KUTE.Time() : time;
|
||||
const T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map((tween) => tween.resume(T));
|
||||
return this;
|
||||
}
|
||||
|
|
@ -1116,8 +1116,8 @@ function numbers(a, b, v) { // number1, number2, progress
|
|||
|
||||
// Component Functions
|
||||
function boxModelOnStart(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
elem.style[tweenProp] = `${v > 0.99 || v < 0.01
|
||||
? ((numbers(a, b, v) * 10) >> 0) / 10
|
||||
: (numbers(a, b, v)) >> 0}px`;
|
||||
|
|
@ -1251,8 +1251,8 @@ const supportedColors$1 = ['color', 'backgroundColor', 'borderColor',
|
|||
|
||||
// Component Functions
|
||||
function onStartColors(tweenProp) {
|
||||
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (this.valuesEnd[tweenProp] && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
elem.style[tweenProp] = colors(a, b, v);
|
||||
};
|
||||
}
|
||||
|
|
@ -1308,17 +1308,17 @@ const attributes = {};
|
|||
|
||||
const onStartAttr = {
|
||||
attr(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, vS, vE, v) => {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, vS, vE, v) => {
|
||||
Object.keys(vE).forEach((oneAttr) => {
|
||||
KUTE.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
|
||||
KUTE$1.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
|
||||
});
|
||||
};
|
||||
}
|
||||
},
|
||||
attributes(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
|
||||
KUTE[tweenProp] = attributes;
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd.attr) {
|
||||
KUTE$1[tweenProp] = attributes;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1436,8 +1436,8 @@ const htmlAttributes = {
|
|||
// Component Functions
|
||||
function onStartOpacity(tweenProp/* , value */) {
|
||||
// opacity could be 0 sometimes, we need to check regardless
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
|
||||
};
|
||||
}
|
||||
|
|
@ -1495,7 +1495,7 @@ const charSet = {
|
|||
// Component Functions
|
||||
const onStartWrite = {
|
||||
text(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
const chars = this._textChars;
|
||||
let charsets = charSet[defaultOptions.textChars];
|
||||
|
||||
|
|
@ -1505,7 +1505,7 @@ const onStartWrite = {
|
|||
charsets = chars;
|
||||
}
|
||||
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
let initialText = '';
|
||||
let endText = '';
|
||||
const finalText = b === '' ? ' ' : b;
|
||||
|
|
@ -1533,8 +1533,8 @@ const onStartWrite = {
|
|||
}
|
||||
},
|
||||
number(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { // numbers can be 0
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
elem.innerHTML = numbers(a, b, v) >> 0;
|
||||
};
|
||||
}
|
||||
|
|
@ -1693,19 +1693,12 @@ const textWriteFunctions = {
|
|||
onStart: onStartWrite,
|
||||
};
|
||||
|
||||
/* textWrite = {
|
||||
category: 'textWrite',
|
||||
defaultValues: {},
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Full Component
|
||||
const textWrite = {
|
||||
component: 'textWriteProperties',
|
||||
category: 'textWrite',
|
||||
properties: ['text', 'number'],
|
||||
defaultValues: { text: ' ', numbers: '0' },
|
||||
defaultValues: { text: ' ', number: '0' },
|
||||
defaultOptions: { textChars: 'alpha' },
|
||||
Interpolate: { numbers },
|
||||
functions: textWriteFunctions,
|
||||
|
|
@ -1767,8 +1760,8 @@ function skew(a, b, u, v) {
|
|||
|
||||
// Component Functions
|
||||
function onStartTransform(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
|
||||
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
|
||||
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
|
||||
|
|
@ -1919,8 +1912,8 @@ const transformFunctionsComponent = {
|
|||
|
||||
// Component Functions
|
||||
function onStartDraw(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
const pathLength = (a.l * 100 >> 0) / 100;
|
||||
const start = (numbers(a.s, b.s, v) * 100 >> 0) / 100;
|
||||
const end = (numbers(a.e, b.e, v) * 100 >> 0) / 100;
|
||||
|
|
@ -3008,8 +3001,8 @@ function coords(a, b, l, v) {
|
|||
|
||||
// Component functions
|
||||
function onStartSVGMorph(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = (elem, a, b, v) => {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = (elem, a, b, v) => {
|
||||
const path1 = a.pathArray; const path2 = b.pathArray; const
|
||||
len = path2.length;
|
||||
elem.setAttribute('d', (v === 1 ? b.original : `M${coords(path1, path2, len, v).join('L')}Z`));
|
||||
|
|
@ -3325,8 +3318,6 @@ const svgMorph = {
|
|||
},
|
||||
};
|
||||
|
||||
var version = "2.1.3";
|
||||
|
||||
const Components = {
|
||||
EssentialBoxModel: essentialBoxModel,
|
||||
ColorsProperties: colorProperties,
|
||||
|
|
@ -3344,7 +3335,9 @@ Object.keys(Components).forEach((component) => {
|
|||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
var index = {
|
||||
var version = "2.1.3";
|
||||
|
||||
const KUTE = {
|
||||
Animation,
|
||||
Components,
|
||||
|
||||
|
|
@ -3370,4 +3363,4 @@ var index = {
|
|||
Version: version,
|
||||
};
|
||||
|
||||
export { index as default };
|
||||
export { KUTE as default };
|
||||
|
|
|
|||
2
dist/kute.esm.min.js
vendored
2
dist/kute.esm.min.js
vendored
File diff suppressed because one or more lines are too long
101
dist/kute.js
vendored
101
dist/kute.js
vendored
|
|
@ -82,7 +82,7 @@
|
|||
return t2;
|
||||
};
|
||||
|
||||
var KUTE = {};
|
||||
var KUTE$1 = {};
|
||||
|
||||
var Tweens = [];
|
||||
|
||||
|
|
@ -131,16 +131,16 @@
|
|||
Tick = null;
|
||||
Object.keys(onStart).forEach(function (obj) {
|
||||
if (typeof (onStart[obj]) === 'function') {
|
||||
if (KUTE[obj]) { delete KUTE[obj]; }
|
||||
if (KUTE$1[obj]) { delete KUTE$1[obj]; }
|
||||
} else {
|
||||
Object.keys(onStart[obj]).forEach(function (prop) {
|
||||
if (KUTE[prop]) { delete KUTE[prop]; }
|
||||
if (KUTE$1[prop]) { delete KUTE$1[prop]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(Interpolate).forEach(function (i) {
|
||||
if (KUTE[i]) { delete KUTE[i]; }
|
||||
if (KUTE$1[i]) { delete KUTE$1[i]; }
|
||||
});
|
||||
}
|
||||
}, 64);
|
||||
|
|
@ -152,12 +152,12 @@
|
|||
Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time,
|
||||
};
|
||||
Object.keys(Render).forEach(function (blob) {
|
||||
if (!KUTE[blob]) {
|
||||
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
if (!KUTE$1[blob]) {
|
||||
KUTE$1[blob] = blob === 'Time' ? Time.now : Render[blob];
|
||||
}
|
||||
});
|
||||
|
||||
globalObject$1._KUTE = KUTE;
|
||||
globalObject$1._KUTE = KUTE$1;
|
||||
|
||||
var supportedProperties = {};
|
||||
|
||||
|
|
@ -224,18 +224,18 @@
|
|||
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
|
||||
&& Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i))
|
||||
|| (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) {
|
||||
if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; }
|
||||
if (!KUTE$1[fnObj]) { KUTE$1[fnObj] = componentLink[fnObj]; }
|
||||
} else {
|
||||
Object.keys(this$1$1.valuesEnd).forEach(function (prop) {
|
||||
var propObject = this$1$1.valuesEnd[prop];
|
||||
if (propObject instanceof Object) {
|
||||
Object.keys(propObject).forEach(function (i) {
|
||||
if (typeof (componentLink[i]) === 'function') { // transformCSS3
|
||||
if (!KUTE[i]) { KUTE[i] = componentLink[i]; }
|
||||
if (!KUTE$1[i]) { KUTE$1[i] = componentLink[i]; }
|
||||
} else {
|
||||
Object.keys(componentLink[fnObj]).forEach(function (j) {
|
||||
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
|
||||
if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; }
|
||||
if (!KUTE$1[j]) { KUTE$1[j] = componentLink[i][j]; }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -523,7 +523,7 @@
|
|||
var easingFnName = this._easing.name;
|
||||
if (!onStart[easingFnName]) {
|
||||
onStart[easingFnName] = function easingFn(prop) {
|
||||
if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; }
|
||||
if (!KUTE$1[prop] && prop === this._easing.name) { KUTE$1[prop] = this._easing; }
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -538,7 +538,7 @@
|
|||
add(this);
|
||||
this.playing = true;
|
||||
|
||||
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
|
||||
this._startTime = typeof time !== 'undefined' ? time : KUTE$1.Time();
|
||||
this._startTime += this._delay;
|
||||
|
||||
if (!this._startFired) {
|
||||
|
|
@ -595,7 +595,7 @@
|
|||
TweenBase.prototype.update = function update (time) {
|
||||
var this$1$1 = this;
|
||||
|
||||
var T = time !== undefined ? time : KUTE.Time();
|
||||
var T = time !== undefined ? time : KUTE$1.Time();
|
||||
|
||||
var elapsed;
|
||||
|
||||
|
|
@ -609,7 +609,7 @@
|
|||
|
||||
// render the update
|
||||
Object.keys(this.valuesEnd).forEach(function (tweenProp) {
|
||||
KUTE[tweenProp](this$1$1.element,
|
||||
KUTE$1[tweenProp](this$1$1.element,
|
||||
this$1$1.valuesStart[tweenProp],
|
||||
this$1$1.valuesEnd[tweenProp],
|
||||
progress);
|
||||
|
|
@ -785,7 +785,7 @@
|
|||
// re-queue execution context
|
||||
queueStart.call(this);
|
||||
// update time and let it roll
|
||||
this._startTime += KUTE.Time() - this._pauseTime;
|
||||
this._startTime += KUTE$1.Time() - this._pauseTime;
|
||||
add(this);
|
||||
// restart ticker if stopped
|
||||
if (!Tick) { Ticker(); }
|
||||
|
|
@ -797,7 +797,7 @@
|
|||
if (!this.paused && this.playing) {
|
||||
remove(this);
|
||||
this.paused = true;
|
||||
this._pauseTime = KUTE.Time();
|
||||
this._pauseTime = KUTE$1.Time();
|
||||
if (this._onPause !== undefined) {
|
||||
this._onPause.call(this);
|
||||
}
|
||||
|
|
@ -821,7 +821,7 @@
|
|||
Tween.prototype.update = function update (time) {
|
||||
var this$1$1 = this;
|
||||
|
||||
var T = time !== undefined ? time : KUTE.Time();
|
||||
var T = time !== undefined ? time : KUTE$1.Time();
|
||||
|
||||
var elapsed;
|
||||
|
||||
|
|
@ -835,7 +835,7 @@
|
|||
|
||||
// render the update
|
||||
Object.keys(this.valuesEnd).forEach(function (tweenProp) {
|
||||
KUTE[tweenProp](this$1$1.element,
|
||||
KUTE$1[tweenProp](this$1$1.element,
|
||||
this$1$1.valuesStart[tweenProp],
|
||||
this$1$1.valuesEnd[tweenProp],
|
||||
progress);
|
||||
|
|
@ -924,7 +924,7 @@
|
|||
};
|
||||
|
||||
TweenCollection.prototype.start = function start (time) {
|
||||
var T = time === undefined ? KUTE.Time() : time;
|
||||
var T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map(function (tween) { return tween.start(T); });
|
||||
return this;
|
||||
};
|
||||
|
|
@ -935,13 +935,13 @@
|
|||
};
|
||||
|
||||
TweenCollection.prototype.pause = function pause (time) {
|
||||
var T = time === undefined ? KUTE.Time() : time;
|
||||
var T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map(function (tween) { return tween.pause(T); });
|
||||
return this;
|
||||
};
|
||||
|
||||
TweenCollection.prototype.resume = function resume (time) {
|
||||
var T = time === undefined ? KUTE.Time() : time;
|
||||
var T = time === undefined ? KUTE$1.Time() : time;
|
||||
this.tweens.map(function (tween) { return tween.resume(T); });
|
||||
return this;
|
||||
};
|
||||
|
|
@ -1148,8 +1148,8 @@
|
|||
|
||||
// Component Functions
|
||||
function boxModelOnStart(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (v > 0.99 || v < 0.01
|
||||
? ((numbers(a, b, v) * 10) >> 0) / 10
|
||||
: (numbers(a, b, v)) >> 0) + "px";
|
||||
|
|
@ -1283,8 +1283,8 @@
|
|||
|
||||
// Component Functions
|
||||
function onStartColors(tweenProp) {
|
||||
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (this.valuesEnd[tweenProp] && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = colors(a, b, v);
|
||||
};
|
||||
}
|
||||
|
|
@ -1340,17 +1340,17 @@
|
|||
|
||||
var onStartAttr = {
|
||||
attr: function attr(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, vS, vE, v) {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, vS, vE, v) {
|
||||
Object.keys(vE).forEach(function (oneAttr) {
|
||||
KUTE.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
|
||||
KUTE$1.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v);
|
||||
});
|
||||
};
|
||||
}
|
||||
},
|
||||
attributes: function attributes$1(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd.attr) {
|
||||
KUTE[tweenProp] = attributes;
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd.attr) {
|
||||
KUTE$1[tweenProp] = attributes;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1472,8 +1472,8 @@
|
|||
// Component Functions
|
||||
function onStartOpacity(tweenProp/* , value */) {
|
||||
// opacity could be 0 sometimes, we need to check regardless
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
|
||||
};
|
||||
}
|
||||
|
|
@ -1531,7 +1531,7 @@
|
|||
// Component Functions
|
||||
var onStartWrite = {
|
||||
text: function text(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
var chars = this._textChars;
|
||||
var charsets = charSet[defaultOptions.textChars];
|
||||
|
||||
|
|
@ -1541,7 +1541,7 @@
|
|||
charsets = chars;
|
||||
}
|
||||
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
var initialText = '';
|
||||
var endText = '';
|
||||
var finalText = b === '' ? ' ' : b;
|
||||
|
|
@ -1569,8 +1569,8 @@
|
|||
}
|
||||
},
|
||||
number: function number(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { // numbers can be 0
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
elem.innerHTML = numbers(a, b, v) >> 0;
|
||||
};
|
||||
}
|
||||
|
|
@ -1731,19 +1731,12 @@
|
|||
onStart: onStartWrite,
|
||||
};
|
||||
|
||||
/* textWrite = {
|
||||
category: 'textWrite',
|
||||
defaultValues: {},
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Full Component
|
||||
var textWrite = {
|
||||
component: 'textWriteProperties',
|
||||
category: 'textWrite',
|
||||
properties: ['text', 'number'],
|
||||
defaultValues: { text: ' ', numbers: '0' },
|
||||
defaultValues: { text: ' ', number: '0' },
|
||||
defaultOptions: { textChars: 'alpha' },
|
||||
Interpolate: { numbers: numbers },
|
||||
functions: textWriteFunctions,
|
||||
|
|
@ -1805,8 +1798,8 @@
|
|||
|
||||
// Component Functions
|
||||
function onStartTransform(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
|
||||
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
|
||||
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
|
||||
|
|
@ -1956,8 +1949,8 @@
|
|||
|
||||
// Component Functions
|
||||
function onStartDraw(tweenProp) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
var pathLength = (a.l * 100 >> 0) / 100;
|
||||
var start = (numbers(a.s, b.s, v) * 100 >> 0) / 100;
|
||||
var end = (numbers(a.e, b.e, v) * 100 >> 0) / 100;
|
||||
|
|
@ -3059,8 +3052,8 @@
|
|||
|
||||
// Component functions
|
||||
function onStartSVGMorph(tweenProp) {
|
||||
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE[tweenProp] = function (elem, a, b, v) {
|
||||
if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) {
|
||||
KUTE$1[tweenProp] = function (elem, a, b, v) {
|
||||
var path1 = a.pathArray; var path2 = b.pathArray; var
|
||||
len = path2.length;
|
||||
elem.setAttribute('d', (v === 1 ? b.original : ("M" + (coords(path1, path2, len, v).join('L')) + "Z")));
|
||||
|
|
@ -3382,8 +3375,6 @@
|
|||
},
|
||||
};
|
||||
|
||||
var version = "2.1.3";
|
||||
|
||||
var Components = {
|
||||
EssentialBoxModel: essentialBoxModel,
|
||||
ColorsProperties: colorProperties,
|
||||
|
|
@ -3401,7 +3392,9 @@
|
|||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
var index = {
|
||||
var version = "2.1.3";
|
||||
|
||||
var KUTE = {
|
||||
Animation: Animation,
|
||||
Components: Components,
|
||||
|
||||
|
|
@ -3427,6 +3420,6 @@
|
|||
Version: version,
|
||||
};
|
||||
|
||||
return index;
|
||||
return KUTE;
|
||||
|
||||
}));
|
||||
|
|
|
|||
2
dist/kute.min.js
vendored
2
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -5,8 +5,10 @@
|
|||
"main": "dist/kute.min.js",
|
||||
"module": "dist/kute.esm.js",
|
||||
"jsnext": "src/index.js",
|
||||
"types": "typescript/index.d.ts",
|
||||
"files": [
|
||||
"dist/*.{js,map}",
|
||||
"dist/types/*.{ts,map}",
|
||||
"src/**/*.{js,map}",
|
||||
"src/*.{js,map}"
|
||||
],
|
||||
|
|
@ -20,6 +22,7 @@
|
|||
"lint:js": "eslint src/ --config .eslintrc",
|
||||
"copy-build": "rollup --environment OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c",
|
||||
"build-standard": "rollup --environment DIST:standard,MIN:false,FORMAT:umd -c",
|
||||
"build-ts": "tsc -d",
|
||||
"build-standard-min": "rollup --environment DIST:standard,MIN:true,FORMAT:umd -c",
|
||||
"build-standard-esm": "rollup --environment DIST:standard,MIN:false,FORMAT:esm -c",
|
||||
"build-standard-esm-min": "rollup --environment DIST:standard,MIN:true,FORMAT:esm -c",
|
||||
|
|
@ -72,6 +75,7 @@
|
|||
"eslint-plugin-vue": "^7.7.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"rollup": "^2.38.4",
|
||||
"rollup-plugin-terser": "^7.0.2"
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "^4.4.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,19 +155,12 @@ export const textWriteFunctions = {
|
|||
onStart: onStartWrite,
|
||||
};
|
||||
|
||||
/* textWrite = {
|
||||
category: 'textWrite',
|
||||
defaultValues: {},
|
||||
interpolators: {numbers},
|
||||
functions = { prepareStart, prepareProperty, onStart }
|
||||
} */
|
||||
|
||||
// Full Component
|
||||
export const textWrite = {
|
||||
component: 'textWriteProperties',
|
||||
category: 'textWrite',
|
||||
properties: ['text', 'number'],
|
||||
defaultValues: { text: ' ', numbers: '0' },
|
||||
defaultValues: { text: ' ', number: '0' },
|
||||
defaultOptions: { textChars: 'alpha' },
|
||||
Interpolate: { numbers },
|
||||
functions: textWriteFunctions,
|
||||
|
|
|
|||
|
|
@ -6,36 +6,21 @@ import Easing from './easing/easing-base.js';
|
|||
import Internals from './core/internals.js';
|
||||
import Selector from './util/selector.js';
|
||||
|
||||
// Animation
|
||||
import Animation from './animation/animationBase.js';
|
||||
// Base Components
|
||||
import Components from './objects/componentsBase.js';
|
||||
|
||||
// TweenConstructor
|
||||
import Tween from './tween/tweenBase.js';
|
||||
// Interface only fromTo
|
||||
import fromTo from './interface/fromTo.js';
|
||||
|
||||
// import baseTransform from './components/transformFunctionsBase.js'
|
||||
import baseTransformMatrix from './components/transformMatrixBase.js';
|
||||
import baseBoxModel from './components/boxModelBase.js';
|
||||
import baseOpacity from './components/opacityPropertyBase.js';
|
||||
// const Move = new Animation(baseCrossBrowserMove)
|
||||
// support for kute-base.js ends here
|
||||
|
||||
import { version as Version } from '../package.json';
|
||||
// import {baseCrossBrowserMove} from './components/crossBrowserMove.js'
|
||||
|
||||
// const Transform = new Animation(baseTransform)
|
||||
const Transform = new Animation(baseTransformMatrix);
|
||||
const BoxModel = new Animation(baseBoxModel);
|
||||
const Opacity = new Animation(baseOpacity);
|
||||
|
||||
export default {
|
||||
Animation,
|
||||
Components: {
|
||||
Transform,
|
||||
BoxModel,
|
||||
Opacity,
|
||||
// Move
|
||||
},
|
||||
Components,
|
||||
|
||||
Tween,
|
||||
fromTo,
|
||||
|
|
|
|||
|
|
@ -18,52 +18,14 @@ import fromTo from './interface/fromTo.js';
|
|||
import allTo from './interface/allTo.js';
|
||||
import allFromTo from './interface/allFromTo.js';
|
||||
|
||||
// Animation
|
||||
import Animation from './animation/animationDevelopment.js';
|
||||
|
||||
// components
|
||||
import BackgroundPosition from './components/backgroundPosition.js';
|
||||
import BorderRadius from './components/borderRadius.js';
|
||||
import BoxModel from './components/boxModel.js';
|
||||
import ClipProperty from './components/clipProperty.js';
|
||||
import ColorProperties from './components/colorProperties.js';
|
||||
import FilterEffects from './components/filterEffects';
|
||||
import HTMLAttributes from './components/htmlAttributes.js';
|
||||
import OpacityProperty from './components/opacityProperty.js';
|
||||
import SVGDraw from './components/svgDraw.js';
|
||||
import SVGCubicMorph from './components/svgCubicMorph.js';
|
||||
import SVGTransform from './components/svgTransform.js';
|
||||
import ScrollProperty from './components/scrollProperty.js';
|
||||
import ShadowProperties from './components/shadowProperties.js';
|
||||
import TextProperties from './components/textProperties.js';
|
||||
import TextWriteProperties from './components/textWrite.js';
|
||||
import MatrixTransform from './components/transformMatrix.js';
|
||||
// Components Extra
|
||||
import Components from './objects/componentsExtra.js';
|
||||
|
||||
import { version as Version } from '../package.json';
|
||||
|
||||
const Components = {
|
||||
BackgroundPosition,
|
||||
BorderRadius,
|
||||
BoxModel,
|
||||
ClipProperty,
|
||||
ColorProperties,
|
||||
FilterEffects,
|
||||
HTMLAttributes,
|
||||
OpacityProperty,
|
||||
SVGDraw,
|
||||
SVGCubicMorph,
|
||||
SVGTransform,
|
||||
ScrollProperty,
|
||||
ShadowProperties,
|
||||
TextProperties,
|
||||
TextWriteProperties,
|
||||
MatrixTransform,
|
||||
};
|
||||
|
||||
Object.keys(Components).forEach((component) => {
|
||||
const compOps = Components[component];
|
||||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
export default {
|
||||
Animation,
|
||||
Components,
|
||||
|
|
|
|||
33
src/index.js
33
src/index.js
|
|
@ -17,38 +17,15 @@ import fromTo from './interface/fromTo.js';
|
|||
import allTo from './interface/allTo.js';
|
||||
import allFromTo from './interface/allFromTo.js';
|
||||
|
||||
// Animation
|
||||
import Animation from './animation/animation.js';
|
||||
|
||||
// components
|
||||
import EssentialBoxModel from './components/boxModelEssential.js';
|
||||
import ColorsProperties from './components/colorProperties.js';
|
||||
import HTMLAttributes from './components/htmlAttributes.js';
|
||||
import OpacityProperty from './components/opacityProperty.js';
|
||||
import TextWrite from './components/textWrite.js';
|
||||
import TransformFunctions from './components/transformFunctions.js';
|
||||
import SVGDraw from './components/svgDraw.js';
|
||||
import SVGMorph from './components/svgMorph.js';
|
||||
// Default Components
|
||||
import Components from './objects/componentsDefault.js';
|
||||
|
||||
import { version as Version } from '../package.json';
|
||||
|
||||
const Components = {
|
||||
EssentialBoxModel,
|
||||
ColorsProperties,
|
||||
HTMLAttributes,
|
||||
OpacityProperty,
|
||||
TextWrite,
|
||||
TransformFunctions,
|
||||
SVGDraw,
|
||||
SVGMorph,
|
||||
};
|
||||
|
||||
// init components
|
||||
Object.keys(Components).forEach((component) => {
|
||||
const compOps = Components[component];
|
||||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
export default {
|
||||
const KUTE = {
|
||||
Animation,
|
||||
Components,
|
||||
|
||||
|
|
@ -73,3 +50,5 @@ export default {
|
|||
Selector,
|
||||
Version,
|
||||
};
|
||||
|
||||
export default KUTE;
|
||||
|
|
|
|||
16
src/objects/componentsBase.js
Normal file
16
src/objects/componentsBase.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import Animation from '../animation/animationBase.js';
|
||||
|
||||
// kute-base.js supported components
|
||||
import baseTransform from '../components/transformFunctionsBase.js';
|
||||
import baseBoxModel from '../components/boxModelBase.js';
|
||||
import baseOpacity from '../components/opacityPropertyBase.js';
|
||||
// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js'
|
||||
// support for kute-base.js ends here
|
||||
|
||||
const Components = {
|
||||
Transform: new Animation(baseTransform),
|
||||
BoxModel: new Animation(baseBoxModel),
|
||||
Opacity: new Animation(baseOpacity),
|
||||
};
|
||||
|
||||
export default Components;
|
||||
29
src/objects/componentsDefault.js
Normal file
29
src/objects/componentsDefault.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import Animation from '../animation/animation.js';
|
||||
|
||||
import EssentialBoxModel from '../components/boxModelEssential.js';
|
||||
import ColorsProperties from '../components/colorProperties.js';
|
||||
import HTMLAttributes from '../components/htmlAttributes.js';
|
||||
import OpacityProperty from '../components/opacityProperty.js';
|
||||
import TextWrite from '../components/textWrite.js';
|
||||
import TransformFunctions from '../components/transformFunctions.js';
|
||||
import SVGDraw from '../components/svgDraw.js';
|
||||
import SVGMorph from '../components/svgMorph.js';
|
||||
|
||||
const Components = {
|
||||
EssentialBoxModel,
|
||||
ColorsProperties,
|
||||
HTMLAttributes,
|
||||
OpacityProperty,
|
||||
TextWrite,
|
||||
TransformFunctions,
|
||||
SVGDraw,
|
||||
SVGMorph,
|
||||
};
|
||||
|
||||
// init components
|
||||
Object.keys(Components).forEach((component) => {
|
||||
const compOps = Components[component];
|
||||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
export default Components;
|
||||
45
src/objects/componentsExtra.js
Normal file
45
src/objects/componentsExtra.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import Animation from '../animation/animationDevelopment.js';
|
||||
|
||||
import BackgroundPosition from '../components/backgroundPosition.js';
|
||||
import BorderRadius from '../components/borderRadius.js';
|
||||
import BoxModel from '../components/boxModel.js';
|
||||
import ClipProperty from '../components/clipProperty.js';
|
||||
import ColorProperties from '../components/colorProperties.js';
|
||||
import FilterEffects from '../components/filterEffects';
|
||||
import HTMLAttributes from '../components/htmlAttributes.js';
|
||||
import OpacityProperty from '../components/opacityProperty.js';
|
||||
import SVGDraw from '../components/svgDraw.js';
|
||||
import SVGCubicMorph from '../components/svgCubicMorph.js';
|
||||
import SVGTransform from '../components/svgTransform.js';
|
||||
import ScrollProperty from '../components/scrollProperty.js';
|
||||
import ShadowProperties from '../components/shadowProperties.js';
|
||||
import TextProperties from '../components/textProperties.js';
|
||||
import TextWriteProperties from '../components/textWrite.js';
|
||||
import MatrixTransform from '../components/transformMatrix.js';
|
||||
|
||||
const Components = {
|
||||
BackgroundPosition,
|
||||
BorderRadius,
|
||||
BoxModel,
|
||||
ClipProperty,
|
||||
ColorProperties,
|
||||
FilterEffects,
|
||||
HTMLAttributes,
|
||||
OpacityProperty,
|
||||
SVGDraw,
|
||||
SVGCubicMorph,
|
||||
SVGTransform,
|
||||
ScrollProperty,
|
||||
ShadowProperties,
|
||||
TextProperties,
|
||||
TextWriteProperties,
|
||||
MatrixTransform,
|
||||
};
|
||||
|
||||
// init components
|
||||
Object.keys(Components).forEach((component) => {
|
||||
const compOps = Components[component];
|
||||
Components[component] = new Animation(compOps);
|
||||
});
|
||||
|
||||
export default Components;
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"resolveJsonModule": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"outFile": "typescript/index.d.ts"
|
||||
},
|
||||
"files": ["src/index.js"],
|
||||
}
|
||||
897
typescript/index.d.ts
vendored
Normal file
897
typescript/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,897 @@
|
|||
declare module "src/objects/kute" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/tweens" {
|
||||
var _default: never[];
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/globalObject" {
|
||||
export default globalObject;
|
||||
let globalObject: any;
|
||||
}
|
||||
declare module "src/objects/interpolate" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/onStart" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/render" {
|
||||
export function stop(): void;
|
||||
export default Render;
|
||||
export let Tick: number;
|
||||
export function Ticker(time: any): void;
|
||||
namespace Render {
|
||||
export { Tick };
|
||||
export { Ticker };
|
||||
export { Tweens };
|
||||
export { Time };
|
||||
}
|
||||
import Tweens from "src/objects/tweens";
|
||||
namespace Time {
|
||||
const now: () => number;
|
||||
}
|
||||
}
|
||||
declare module "src/objects/supportedProperties" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/defaultValues" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/defaultOptions" {
|
||||
export default defaultOptions;
|
||||
namespace defaultOptions {
|
||||
const duration: number;
|
||||
const delay: number;
|
||||
const easing: string;
|
||||
}
|
||||
}
|
||||
declare module "src/objects/prepareProperty" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/prepareStart" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/crossCheck" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/onComplete" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/linkProperty" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/objects/objects" {
|
||||
namespace _default {
|
||||
export { supportedProperties };
|
||||
export { defaultValues };
|
||||
export { defaultOptions };
|
||||
export { prepareProperty };
|
||||
export { prepareStart };
|
||||
export { crossCheck };
|
||||
export { onStart };
|
||||
export { onComplete };
|
||||
export { linkProperty };
|
||||
}
|
||||
export default _default;
|
||||
import supportedProperties from "src/objects/supportedProperties";
|
||||
import defaultValues from "src/objects/defaultValues";
|
||||
import defaultOptions from "src/objects/defaultOptions";
|
||||
import prepareProperty from "src/objects/prepareProperty";
|
||||
import prepareStart from "src/objects/prepareStart";
|
||||
import crossCheck from "src/objects/crossCheck";
|
||||
import onStart from "src/objects/onStart";
|
||||
import onComplete from "src/objects/onComplete";
|
||||
import linkProperty from "src/objects/linkProperty";
|
||||
}
|
||||
declare module "src/objects/util" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/add" {
|
||||
function _default(tw: any): number;
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/remove" {
|
||||
function _default(tw: any): void;
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/getAll" {
|
||||
function _default(): never[];
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/removeAll" {
|
||||
function _default(): void;
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/core/linkInterpolation" {
|
||||
export default function linkInterpolation(): void;
|
||||
}
|
||||
declare module "src/core/internals" {
|
||||
namespace _default {
|
||||
export { add };
|
||||
export { remove };
|
||||
export { getAll };
|
||||
export { removeAll };
|
||||
export { stop };
|
||||
export { linkInterpolation };
|
||||
}
|
||||
export default _default;
|
||||
import add from "src/core/add";
|
||||
import remove from "src/core/remove";
|
||||
import getAll from "src/core/getAll";
|
||||
import removeAll from "src/core/removeAll";
|
||||
import { stop } from "src/core/render";
|
||||
import linkInterpolation from "src/core/linkInterpolation";
|
||||
}
|
||||
declare module "src/process/getInlineStyle" {
|
||||
export default function getInlineStyle(el: any): {};
|
||||
}
|
||||
declare module "src/process/getStyleForProperty" {
|
||||
export default function getStyleForProperty(elem: any, propertyName: any): any;
|
||||
}
|
||||
declare module "src/process/prepareObject" {
|
||||
export default function prepareObject(obj: any, fn: any): void;
|
||||
}
|
||||
declare module "src/process/getStartValues" {
|
||||
export default function getStartValues(): void;
|
||||
export default class getStartValues {
|
||||
valuesStart: {};
|
||||
}
|
||||
}
|
||||
declare module "src/process/process" {
|
||||
namespace _default {
|
||||
export { getInlineStyle };
|
||||
export { getStyleForProperty };
|
||||
export { getStartValues };
|
||||
export { prepareObject };
|
||||
}
|
||||
export default _default;
|
||||
import getInlineStyle from "src/process/getInlineStyle";
|
||||
import getStyleForProperty from "src/process/getStyleForProperty";
|
||||
import getStartValues from "src/process/getStartValues";
|
||||
import prepareObject from "src/process/prepareObject";
|
||||
}
|
||||
declare module "src/objects/connect" {
|
||||
var _default: {};
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/easing/easing-bezier" {
|
||||
export default Easing;
|
||||
namespace Easing {
|
||||
const linear: any;
|
||||
const easingSinusoidalIn: any;
|
||||
const easingSinusoidalOut: any;
|
||||
const easingSinusoidalInOut: any;
|
||||
const easingQuadraticIn: any;
|
||||
const easingQuadraticOut: any;
|
||||
const easingQuadraticInOut: any;
|
||||
const easingCubicIn: any;
|
||||
const easingCubicOut: any;
|
||||
const easingCubicInOut: any;
|
||||
const easingQuarticIn: any;
|
||||
const easingQuarticOut: any;
|
||||
const easingQuarticInOut: any;
|
||||
const easingQuinticIn: any;
|
||||
const easingQuinticOut: any;
|
||||
const easingQuinticInOut: any;
|
||||
const easingExponentialIn: any;
|
||||
const easingExponentialOut: any;
|
||||
const easingExponentialInOut: any;
|
||||
const easingCircularIn: any;
|
||||
const easingCircularOut: any;
|
||||
const easingCircularInOut: any;
|
||||
const easingBackIn: any;
|
||||
const easingBackOut: any;
|
||||
const easingBackInOut: any;
|
||||
}
|
||||
}
|
||||
declare module "src/util/selector" {
|
||||
export default function selector(el: any, multi: any): any;
|
||||
}
|
||||
declare module "src/core/queueStart" {
|
||||
export default function queueStart(): void;
|
||||
}
|
||||
declare module "src/tween/tweenBase" {
|
||||
export default class TweenBase {
|
||||
constructor(targetElement: any, startObject: any, endObject: any, opsObject: any);
|
||||
element: any;
|
||||
playing: boolean;
|
||||
_startTime: any;
|
||||
_startFired: boolean;
|
||||
valuesEnd: any;
|
||||
valuesStart: any;
|
||||
_resetStart: any;
|
||||
_easing: any;
|
||||
_duration: any;
|
||||
_delay: any;
|
||||
start(time: any): TweenBase;
|
||||
stop(): TweenBase;
|
||||
close(): void;
|
||||
chain(args: any): TweenBase;
|
||||
_chain: any;
|
||||
stopChainedTweens(): void;
|
||||
update(time: any): boolean;
|
||||
}
|
||||
}
|
||||
declare module "src/tween/tween" {
|
||||
export default class Tween extends TweenBase {
|
||||
constructor(...args: any[]);
|
||||
paused: boolean;
|
||||
_pauseTime: any;
|
||||
_repeat: any;
|
||||
_repeatDelay: any;
|
||||
_repeatOption: any;
|
||||
valuesRepeat: {};
|
||||
_yoyo: any;
|
||||
_reversed: boolean;
|
||||
resume(): Tween;
|
||||
pause(): Tween;
|
||||
reverse(): void;
|
||||
}
|
||||
import TweenBase from "src/tween/tweenBase";
|
||||
}
|
||||
declare module "src/tween/tweenCollection" {
|
||||
export default class TweenCollection {
|
||||
constructor(els: any, vS: any, vE: any, Options: any);
|
||||
tweens: any[];
|
||||
length: number;
|
||||
start(time: any): TweenCollection;
|
||||
stop(): TweenCollection;
|
||||
pause(time: any): TweenCollection;
|
||||
resume(time: any): TweenCollection;
|
||||
chain(args: any): TweenCollection;
|
||||
playing(): boolean;
|
||||
removeTweens(): void;
|
||||
getMaxDuration(): number;
|
||||
}
|
||||
}
|
||||
declare module "src/interface/to" {
|
||||
export default function to(element: any, endObject: any, optionsObj: any): any;
|
||||
}
|
||||
declare module "src/interface/fromTo" {
|
||||
export default function fromTo(element: any, startObject: any, endObject: any, optionsObj: any): any;
|
||||
}
|
||||
declare module "src/interface/allTo" {
|
||||
export default function allTo(elements: any, endObject: any, optionsObj: any): TweenCollection;
|
||||
import TweenCollection from "src/tween/tweenCollection";
|
||||
}
|
||||
declare module "src/interface/allFromTo" {
|
||||
export default function allFromTo(elements: any, startObject: any, endObject: any, optionsObj: any): TweenCollection;
|
||||
import TweenCollection from "src/tween/tweenCollection";
|
||||
}
|
||||
declare module "src/animation/animation" {
|
||||
export default class Animation {
|
||||
constructor(Component: any);
|
||||
setComponent(Component: any): Animation;
|
||||
}
|
||||
}
|
||||
declare module "src/util/trueDimension" {
|
||||
export default function trueDimension(dimValue: any, isAngle: any): {
|
||||
v: number;
|
||||
u: string;
|
||||
};
|
||||
}
|
||||
declare module "src/interpolation/numbers" {
|
||||
export default function numbers(a: any, b: any, v: any): number;
|
||||
}
|
||||
declare module "src/components/boxModelBase" {
|
||||
export function boxModelOnStart(tweenProp: any): void;
|
||||
export default baseBoxModel;
|
||||
namespace baseBoxModel {
|
||||
export const component: string;
|
||||
export const category: string;
|
||||
export { baseBoxProps as properties };
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
export namespace functions {
|
||||
export { baseBoxOnStart as onStart };
|
||||
}
|
||||
}
|
||||
const baseBoxProps: string[];
|
||||
import numbers from "src/interpolation/numbers";
|
||||
const baseBoxOnStart: {};
|
||||
}
|
||||
declare module "src/components/boxModelEssential" {
|
||||
export default essentialBoxModel;
|
||||
namespace essentialBoxModel {
|
||||
export const component: string;
|
||||
export const category: string;
|
||||
export { essentialBoxProps as properties };
|
||||
export { essentialBoxPropsValues as defaultValues };
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
export { essentialBoxModelFunctions as functions };
|
||||
export namespace Util {
|
||||
export { trueDimension };
|
||||
}
|
||||
}
|
||||
const essentialBoxProps: string[];
|
||||
namespace essentialBoxPropsValues {
|
||||
const top: number;
|
||||
const left: number;
|
||||
const width: number;
|
||||
const height: number;
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
namespace essentialBoxModelFunctions {
|
||||
export { getBoxModel as prepareStart };
|
||||
export { prepareBoxModel as prepareProperty };
|
||||
export { essentialBoxOnStart as onStart };
|
||||
}
|
||||
import trueDimension from "src/util/trueDimension";
|
||||
function getBoxModel(tweenProp: any): any;
|
||||
function prepareBoxModel(tweenProp: any, value: any): number;
|
||||
const essentialBoxOnStart: {};
|
||||
}
|
||||
declare module "src/util/hexToRGB" {
|
||||
function _default(hex: any): {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
} | null;
|
||||
export default _default;
|
||||
}
|
||||
declare module "src/util/trueColor" {
|
||||
export default function trueColor(colorString: any): {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a?: undefined;
|
||||
} | {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a: number;
|
||||
} | undefined;
|
||||
}
|
||||
declare module "src/interpolation/colors" {
|
||||
export default function colors(a: any, b: any, v: any): string;
|
||||
}
|
||||
declare module "src/components/colorPropertiesBase" {
|
||||
export function onStartColors(tweenProp: any): void;
|
||||
export namespace baseColors {
|
||||
const component: string;
|
||||
const category: string;
|
||||
namespace Interpolate {
|
||||
export { numbers };
|
||||
export { colors };
|
||||
}
|
||||
namespace functions {
|
||||
export { colorsOnStart as onStart };
|
||||
}
|
||||
}
|
||||
export default baseColors;
|
||||
import numbers from "src/interpolation/numbers";
|
||||
import colors from "src/interpolation/colors";
|
||||
const colorsOnStart: {};
|
||||
}
|
||||
declare module "src/components/colorProperties" {
|
||||
export default colorProperties;
|
||||
namespace colorProperties {
|
||||
export const component: string;
|
||||
export const category: string;
|
||||
export { supportedColors as properties };
|
||||
export { defaultColors as defaultValues };
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
export { colors };
|
||||
}
|
||||
export { colorFunctions as functions };
|
||||
export namespace Util {
|
||||
export { trueColor };
|
||||
}
|
||||
}
|
||||
const supportedColors: string[];
|
||||
const defaultColors: {};
|
||||
import numbers from "src/interpolation/numbers";
|
||||
import colors from "src/interpolation/colors";
|
||||
namespace colorFunctions {
|
||||
export { getColor as prepareStart };
|
||||
export { prepareColor as prepareProperty };
|
||||
export { colorsOnStart as onStart };
|
||||
}
|
||||
import trueColor from "src/util/trueColor";
|
||||
function getColor(prop: any): any;
|
||||
function prepareColor(prop: any, value: any): {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a?: undefined;
|
||||
} | {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a: number;
|
||||
} | undefined;
|
||||
const colorsOnStart: {};
|
||||
}
|
||||
declare module "src/components/htmlAttributesBase" {
|
||||
export namespace onStartAttr {
|
||||
function attr(tweenProp: any): void;
|
||||
function attr(tweenProp: any): void;
|
||||
function attributes(tweenProp: any): void;
|
||||
function attributes(tweenProp: any): void;
|
||||
}
|
||||
export default baseAttributes;
|
||||
export const attributes: {};
|
||||
namespace baseAttributes {
|
||||
export { ComponentName as component };
|
||||
export const property: string;
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
export { colors };
|
||||
}
|
||||
export namespace functions {
|
||||
export { onStartAttr as onStart };
|
||||
}
|
||||
}
|
||||
const ComponentName: "baseHTMLAttributes";
|
||||
import numbers from "src/interpolation/numbers";
|
||||
import colors from "src/interpolation/colors";
|
||||
}
|
||||
declare module "src/components/htmlAttributes" {
|
||||
export function getAttr(tweenProp: any, value: any): {};
|
||||
export function prepareAttr(tweenProp: any, attrObj: any): {};
|
||||
export default htmlAttributes;
|
||||
namespace htmlAttributes {
|
||||
export { ComponentName as component };
|
||||
export const property: string;
|
||||
export const subProperties: string[];
|
||||
export const defaultValue: {
|
||||
fill: string;
|
||||
stroke: string;
|
||||
'stop-color': string;
|
||||
opacity: number;
|
||||
'stroke-opacity': number;
|
||||
'fill-opacity': number;
|
||||
};
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
export { colors };
|
||||
}
|
||||
export { attrFunctions as functions };
|
||||
export namespace Util {
|
||||
export { replaceUppercase };
|
||||
export { trueColor };
|
||||
export { trueDimension };
|
||||
}
|
||||
}
|
||||
const ComponentName: "htmlAttributes";
|
||||
import numbers from "src/interpolation/numbers";
|
||||
import colors from "src/interpolation/colors";
|
||||
namespace attrFunctions {
|
||||
export { getAttr as prepareStart };
|
||||
export { prepareAttr as prepareProperty };
|
||||
export { onStartAttr as onStart };
|
||||
}
|
||||
function replaceUppercase(a: any): any;
|
||||
import trueColor from "src/util/trueColor";
|
||||
import trueDimension from "src/util/trueDimension";
|
||||
import { onStartAttr } from "src/components/htmlAttributesBase";
|
||||
}
|
||||
declare module "src/components/opacityPropertyBase" {
|
||||
export function onStartOpacity(tweenProp: any): void;
|
||||
export default baseOpacity;
|
||||
namespace baseOpacity {
|
||||
const component: string;
|
||||
const property: string;
|
||||
namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
namespace functions {
|
||||
export { onStartOpacity as onStart };
|
||||
}
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
}
|
||||
declare module "src/components/opacityProperty" {
|
||||
export default opacityProperty;
|
||||
namespace opacityProperty {
|
||||
export const component: string;
|
||||
export const property: string;
|
||||
export const defaultValue: number;
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
export { opacityFunctions as functions };
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
namespace opacityFunctions {
|
||||
export { getOpacity as prepareStart };
|
||||
export { prepareOpacity as prepareProperty };
|
||||
export { onStartOpacity as onStart };
|
||||
}
|
||||
function getOpacity(tweenProp: any): any;
|
||||
function prepareOpacity(tweenProp: any, value: any): number;
|
||||
import { onStartOpacity } from "src/components/opacityPropertyBase";
|
||||
}
|
||||
declare module "src/components/textWriteBase" {
|
||||
export namespace onStartWrite {
|
||||
function text(tweenProp: any): void;
|
||||
function text(tweenProp: any): void;
|
||||
function number(tweenProp: any): void;
|
||||
function number(tweenProp: any): void;
|
||||
}
|
||||
export namespace baseTextWrite {
|
||||
const component: string;
|
||||
const category: string;
|
||||
namespace defaultOptions {
|
||||
const textChars: string;
|
||||
}
|
||||
namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
namespace functions {
|
||||
export { onStartWrite as onStart };
|
||||
}
|
||||
namespace Util {
|
||||
export { charSet };
|
||||
}
|
||||
}
|
||||
export default baseTextWrite;
|
||||
export namespace charSet {
|
||||
export { lowerCaseAlpha as alpha };
|
||||
export { upperCaseAlpha as upper };
|
||||
export { nonAlpha as symbols };
|
||||
export { numeric };
|
||||
export { alphaNumeric as alphanumeric };
|
||||
export { allTypes as all };
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
const lowerCaseAlpha: string[];
|
||||
const upperCaseAlpha: string[];
|
||||
const nonAlpha: string[];
|
||||
const numeric: string[];
|
||||
const alphaNumeric: string[];
|
||||
const allTypes: string[];
|
||||
}
|
||||
declare module "src/components/textWrite" {
|
||||
export function createTextTweens(target: any, newText: any, ops: any): false | any[];
|
||||
export namespace textWriteFunctions {
|
||||
export { getWrite as prepareStart };
|
||||
export { prepareText as prepareProperty };
|
||||
export { onStartWrite as onStart };
|
||||
}
|
||||
export namespace textWrite {
|
||||
export const component: string;
|
||||
export const category: string;
|
||||
export const properties: string[];
|
||||
export namespace defaultValues {
|
||||
const text: string;
|
||||
const number: string;
|
||||
}
|
||||
export namespace defaultOptions {
|
||||
const textChars: string;
|
||||
}
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
export { textWriteFunctions as functions };
|
||||
export namespace Util {
|
||||
export { charSet };
|
||||
export { createTextTweens };
|
||||
}
|
||||
}
|
||||
export default textWrite;
|
||||
function getWrite(): any;
|
||||
function prepareText(tweenProp: any, value: any): any;
|
||||
import { onStartWrite } from "src/components/textWriteBase";
|
||||
import numbers from "src/interpolation/numbers";
|
||||
import { charSet } from "src/components/textWriteBase";
|
||||
}
|
||||
declare module "src/interpolation/perspective" {
|
||||
export default function perspective(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/translate3d" {
|
||||
export default function translate3d(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/rotate3d" {
|
||||
export default function rotate3d(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/translate" {
|
||||
export default function translate(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/rotate" {
|
||||
export default function rotate(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/scale" {
|
||||
export default function scale(a: any, b: any, v: any): string;
|
||||
}
|
||||
declare module "src/interpolation/skew" {
|
||||
export default function skew(a: any, b: any, u: any, v: any): string;
|
||||
}
|
||||
declare module "src/components/transformFunctionsBase" {
|
||||
export function onStartTransform(tweenProp: any): void;
|
||||
export default BaseTransform;
|
||||
namespace BaseTransform {
|
||||
const component: string;
|
||||
const property: string;
|
||||
namespace functions {
|
||||
export { onStartTransform as onStart };
|
||||
}
|
||||
namespace Interpolate {
|
||||
export { perspective };
|
||||
export { translate3d };
|
||||
export { rotate3d };
|
||||
export { translate };
|
||||
export { rotate };
|
||||
export { scale };
|
||||
export { skew };
|
||||
}
|
||||
}
|
||||
import perspective from "src/interpolation/perspective";
|
||||
import translate3d from "src/interpolation/translate3d";
|
||||
import rotate3d from "src/interpolation/rotate3d";
|
||||
import translate from "src/interpolation/translate";
|
||||
import rotate from "src/interpolation/rotate";
|
||||
import scale from "src/interpolation/scale";
|
||||
import skew from "src/interpolation/skew";
|
||||
}
|
||||
declare module "src/components/transformFunctions" {
|
||||
export default transformFunctionsComponent;
|
||||
namespace transformFunctionsComponent {
|
||||
export const component: string;
|
||||
export const property: string;
|
||||
export { supportedTransformProperties as subProperties };
|
||||
export { defaultTransformValues as defaultValues };
|
||||
export { transformFunctions as functions };
|
||||
export namespace Interpolate {
|
||||
export { perspective };
|
||||
export { translate3d };
|
||||
export { rotate3d };
|
||||
export { translate };
|
||||
export { rotate };
|
||||
export { scale };
|
||||
export { skew };
|
||||
}
|
||||
}
|
||||
const supportedTransformProperties: string[];
|
||||
namespace defaultTransformValues {
|
||||
const perspective_1: number;
|
||||
export { perspective_1 as perspective };
|
||||
const translate3d_1: number[];
|
||||
export { translate3d_1 as translate3d };
|
||||
export const translateX: number;
|
||||
export const translateY: number;
|
||||
export const translateZ: number;
|
||||
const translate_1: number[];
|
||||
export { translate_1 as translate };
|
||||
const rotate3d_1: number[];
|
||||
export { rotate3d_1 as rotate3d };
|
||||
export const rotateX: number;
|
||||
export const rotateY: number;
|
||||
export const rotateZ: number;
|
||||
const rotate_1: number;
|
||||
export { rotate_1 as rotate };
|
||||
export const skewX: number;
|
||||
export const skewY: number;
|
||||
const skew_1: number[];
|
||||
export { skew_1 as skew };
|
||||
const scale_1: number;
|
||||
export { scale_1 as scale };
|
||||
}
|
||||
namespace transformFunctions {
|
||||
export { getTransform as prepareStart };
|
||||
export { prepareTransform as prepareProperty };
|
||||
export { onStartTransform as onStart };
|
||||
export { crossCheckTransform as crossCheck };
|
||||
}
|
||||
import perspective from "src/interpolation/perspective";
|
||||
import translate3d from "src/interpolation/translate3d";
|
||||
import rotate3d from "src/interpolation/rotate3d";
|
||||
import translate from "src/interpolation/translate";
|
||||
import rotate from "src/interpolation/rotate";
|
||||
import scale from "src/interpolation/scale";
|
||||
import skew from "src/interpolation/skew";
|
||||
function getTransform(tweenProperty: any): any;
|
||||
function prepareTransform(prop: any, obj: any): {};
|
||||
import { onStartTransform } from "src/components/transformFunctionsBase";
|
||||
function crossCheckTransform(tweenProp: any): void;
|
||||
}
|
||||
declare module "src/components/svgDrawBase" {
|
||||
export function onStartDraw(tweenProp: any): void;
|
||||
export default baseSVGDraw;
|
||||
namespace baseSVGDraw {
|
||||
const component: string;
|
||||
const property: string;
|
||||
namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
namespace functions {
|
||||
export { onStartDraw as onStart };
|
||||
}
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
}
|
||||
declare module "src/components/svgDraw" {
|
||||
export default svgDraw;
|
||||
namespace svgDraw {
|
||||
export const component: string;
|
||||
export const property: string;
|
||||
export const defaultValue: string;
|
||||
export namespace Interpolate {
|
||||
export { numbers };
|
||||
}
|
||||
export { svgDrawFunctions as functions };
|
||||
export namespace Util {
|
||||
export { getRectLength };
|
||||
export { getPolyLength };
|
||||
export { getLineLength };
|
||||
export { getCircleLength };
|
||||
export { getEllipseLength };
|
||||
export { getTotalLength };
|
||||
export { resetDraw };
|
||||
export { getDraw };
|
||||
export { percent };
|
||||
}
|
||||
}
|
||||
import numbers from "src/interpolation/numbers";
|
||||
namespace svgDrawFunctions {
|
||||
export { getDrawValue as prepareStart };
|
||||
export { prepareDraw as prepareProperty };
|
||||
export { onStartDraw as onStart };
|
||||
}
|
||||
function getRectLength(el: any): number;
|
||||
function getPolyLength(el: any): number;
|
||||
function getLineLength(el: any): number;
|
||||
function getCircleLength(el: any): number;
|
||||
function getEllipseLength(el: any): number;
|
||||
function getTotalLength(el: any): number;
|
||||
function resetDraw(elem: any): void;
|
||||
function getDraw(element: any, value: any): any;
|
||||
function percent(v: any, l: any): number;
|
||||
function getDrawValue(): any;
|
||||
function prepareDraw(a: any, o: any): any;
|
||||
import { onStartDraw } from "src/components/svgDrawBase";
|
||||
}
|
||||
declare module "src/interpolation/coords" {
|
||||
export default function coords(a: any, b: any, l: any, v: any): never[][];
|
||||
}
|
||||
declare module "src/components/svgMorphBase" {
|
||||
export function onStartSVGMorph(tweenProp: any): void;
|
||||
export default baseSVGMorph;
|
||||
namespace baseSVGMorph {
|
||||
export const component: string;
|
||||
export const property: string;
|
||||
export { coords as Interpolate };
|
||||
export namespace functions {
|
||||
export { onStartSVGMorph as onStart };
|
||||
}
|
||||
}
|
||||
import coords from "src/interpolation/coords";
|
||||
}
|
||||
declare module "src/components/svgMorph" {
|
||||
export default svgMorph;
|
||||
namespace svgMorph {
|
||||
export const component: string;
|
||||
export const property: string;
|
||||
export const defaultValue: never[];
|
||||
export { coords as Interpolate };
|
||||
export namespace defaultOptions {
|
||||
const morphPrecision: number;
|
||||
const morphIndex: number;
|
||||
}
|
||||
export { svgMorphFunctions as functions };
|
||||
export namespace Util {
|
||||
export { addPoints };
|
||||
export { bisect };
|
||||
export { normalizeRing };
|
||||
export { validRing };
|
||||
export { getInterpolationPoints };
|
||||
export { pathStringToRing };
|
||||
export { distanceSquareRoot };
|
||||
export { midPoint };
|
||||
export { approximateRing };
|
||||
export { rotateRing };
|
||||
export { pathToString };
|
||||
export { pathToCurve };
|
||||
export { getPathLength };
|
||||
export { getPointAtLength };
|
||||
export { getDrawDirection };
|
||||
export { roundPath };
|
||||
}
|
||||
}
|
||||
import coords from "src/interpolation/coords";
|
||||
namespace svgMorphFunctions {
|
||||
export { getSVGMorph as prepareStart };
|
||||
export { prepareSVGMorph as prepareProperty };
|
||||
export { onStartSVGMorph as onStart };
|
||||
export { crossCheckSVGMorph as crossCheck };
|
||||
}
|
||||
function addPoints(ring: any, numPoints: any): void;
|
||||
function bisect(ring: any, maxSegmentLength?: number): void;
|
||||
function normalizeRing(input: any, maxSegmentLength: any): any;
|
||||
function validRing(ring: any): boolean;
|
||||
function getInterpolationPoints(pathArray1: any, pathArray2: any, precision: any): any[];
|
||||
function pathStringToRing(str: any, maxSegmentLength: any): {
|
||||
ring: any[][];
|
||||
pathLength: number;
|
||||
} | {
|
||||
pathLength: any;
|
||||
ring: any[][];
|
||||
skipBisect: boolean;
|
||||
};
|
||||
function approximateRing(parsed: any, maxSegmentLength: any): {
|
||||
pathLength: any;
|
||||
ring: any[][];
|
||||
skipBisect: boolean;
|
||||
};
|
||||
function rotateRing(ring: any, vs: any): void;
|
||||
function getSVGMorph(): any;
|
||||
function prepareSVGMorph(tweenProp: any, value: any): any;
|
||||
import { onStartSVGMorph } from "src/components/svgMorphBase";
|
||||
function crossCheckSVGMorph(prop: any): void;
|
||||
}
|
||||
declare module "src/objects/componentsDefault" {
|
||||
export default Components;
|
||||
namespace Components {
|
||||
export { EssentialBoxModel };
|
||||
export { ColorsProperties };
|
||||
export { HTMLAttributes };
|
||||
export { OpacityProperty };
|
||||
export { TextWrite };
|
||||
export { TransformFunctions };
|
||||
export { SVGDraw };
|
||||
export { SVGMorph };
|
||||
}
|
||||
import EssentialBoxModel from "src/components/boxModelEssential";
|
||||
import ColorsProperties from "src/components/colorProperties";
|
||||
import HTMLAttributes from "src/components/htmlAttributes";
|
||||
import OpacityProperty from "src/components/opacityProperty";
|
||||
import TextWrite from "src/components/textWrite";
|
||||
import TransformFunctions from "src/components/transformFunctions";
|
||||
import SVGDraw from "src/components/svgDraw";
|
||||
import SVGMorph from "src/components/svgMorph";
|
||||
}
|
||||
declare module "src/index" {
|
||||
export default KUTE;
|
||||
namespace KUTE {
|
||||
export { Animation };
|
||||
export { Components };
|
||||
export { Tween };
|
||||
export { fromTo };
|
||||
export { to };
|
||||
export { TweenCollection };
|
||||
export { allFromTo };
|
||||
export { allTo };
|
||||
export { Objects };
|
||||
export { Util };
|
||||
export { Easing };
|
||||
export { CubicBezier };
|
||||
export { Render };
|
||||
export { Interpolate };
|
||||
export { Process };
|
||||
export { Internals };
|
||||
export { Selector };
|
||||
export { Version };
|
||||
}
|
||||
import Animation from "src/animation/animation";
|
||||
import Components from "src/objects/componentsDefault";
|
||||
import Tween from "src/tween/tween";
|
||||
import fromTo from "src/interface/fromTo";
|
||||
import to from "src/interface/to";
|
||||
import TweenCollection from "src/tween/tweenCollection";
|
||||
import allFromTo from "src/interface/allFromTo";
|
||||
import allTo from "src/interface/allTo";
|
||||
import Objects from "src/objects/objects";
|
||||
import Util from "src/objects/util";
|
||||
import Easing from "src/easing/easing-bezier";
|
||||
import Render from "src/core/render";
|
||||
import Interpolate from "src/objects/interpolate";
|
||||
import Process from "src/process/process";
|
||||
import Internals from "src/core/internals";
|
||||
import Selector from "src/util/selector";
|
||||
import { version as Version } from "package.json";
|
||||
}
|
||||
Loading…
Reference in a new issue