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

Browse source
This commit is contained in:
thednp 2020-06-16 14:37:41 +00:00
parent dab615ea54
commit a8c06c1dad
28 changed files with 465 additions and 480 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backgroundPosition.html
View file

@ -145,8 +145,7 @@ let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start()
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
borderRadius.html
View file

@ -157,8 +157,7 @@ KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
boxModel.html
View file

@ -165,8 +165,7 @@ let tween8 = KUTE.to('selector1',{margin:'5px'})
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

4
clipProperty.html
View file

@ -140,10 +140,8 @@
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>

3
colorProperties.html
View file

@ -156,8 +156,7 @@ KUTE.to('selector1',{borderColor:'turquoise'}).start(); // IE9+
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
filterEffects.html
View file

@ -177,8 +177,7 @@ let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, drop
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
htmlAttributes.html
View file

@ -220,8 +220,7 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
index.html
View file

@ -219,8 +219,7 @@
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
opacityProperty.html
View file

@ -138,8 +138,7 @@ let fadeInTween = KUTE.to('selector1',{opacity:1}).start()
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

4
performance-matrix.html
View file

@ -199,10 +199,8 @@
<div id="container"></div>
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script id="kute" src="./src/kute-extra.min.js"></script>

7
performance-transform.html
View file

@ -202,13 +202,8 @@
<div id="container"></div>
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script id="kute" src="./src/kute.min.js"></script>

8
performance.html
View file

@ -228,15 +228,11 @@
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

5
progress.html
View file

@ -206,10 +206,7 @@ document.getElementById('rectangle').addEventListener('click',function(){
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
scrollProperty.html
View file

@ -205,8 +205,7 @@ KUTE.to('#myElement',{scroll: 0 }).start()
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
shadowProperties.html
View file

@ -179,9 +179,8 @@ var myTSTween2 = KUTE.fromTo(
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

169
src/kute-base.js
View file

@ -101,14 +101,11 @@
var onComplete = {};
var supportedProperties = {};
var Objects = {
defaultOptions: defaultOptions,
linkProperty: linkProperty,
onStart: onStart,
onComplete: onComplete,
supportedProperties: supportedProperties
};
var Util = {};
@ -163,6 +160,8 @@
function removeAll () { Tweens.length = 0; }
var supportedProperties = {};
function linkInterpolation() {
var this$1 = this;
var loop = function ( component ) {
@ -209,7 +208,7 @@
if (multi){
requestedElem = el instanceof HTMLCollection
|| el instanceof NodeList
|| el instanceof Array && el[0] instanceof Element
|| el instanceof Array && el.every(function (x) { return x instanceof Element; })
? el : document.querySelectorAll(el);
} else {
requestedElem = el instanceof Element
@ -222,16 +221,12 @@
}
}
var crossCheck = {};
var AnimationBase = function AnimationBase(Component){
this.Component = Component;
return this.setComponent()
return this.setComponent(Component)
};
AnimationBase.prototype.setComponent = function setComponent (){
var Component = this.Component;
AnimationBase.prototype.setComponent = function setComponent (Component){
var ComponentName = Component.component;
var Functions = { onStart: onStart, onComplete: onComplete, crossCheck: crossCheck };
var Functions = { onStart: onStart, onComplete: onComplete };
var Category = Component.category;
var Property = Component.property;
supportedProperties[ComponentName] = Component.properties || Component.subProperties || Component.property;
@ -242,8 +237,8 @@
}
if (Component.functions) {
for (var fn in Functions) {
if (fn in Component.functions && ['onStart','onComplete'].includes(fn)) {
if (typeof (Component.functions[fn]) === 'function' ) {
if (fn in Component.functions) {
if ( typeof (Component.functions[fn]) === 'function') {
!Functions[fn][ComponentName] && (Functions[fn][ComponentName] = {});
!Functions[fn][ComponentName][ Category||Property ] && (Functions[fn][ComponentName][ Category||Property ] = Component.functions[fn]);
} else {
@ -257,8 +252,15 @@
}
if (Component.Interpolate) {
for (var fn$1 in Component.Interpolate) {
if (!Interpolate[fn$1]) {
Interpolate[fn$1] = Component.Interpolate[fn$1];
var compIntObj = Component.Interpolate[fn$1];
if ( typeof(compIntObj) === 'function' && !Interpolate[fn$1] ) {
Interpolate[fn$1] = compIntObj;
} else {
for ( var sfn in compIntObj ) {
if ( typeof(compIntObj[sfn]) === 'function' && !Interpolate[fn$1] ) {
Interpolate[fn$1] = compIntObj[sfn];
}
}
}
}
linkProperty[ComponentName] = Component.Interpolate;
@ -341,6 +343,14 @@
this._startFired = false;
stop.call(this);
};
TweenBase.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
this._chain && this._chain.length && this._chain.map(function (tw){ return tw.stop(); });
};
TweenBase.prototype.update = function update (time) {
time = time !== undefined ? time : KUTE.Time();
var elapsed, progress;
@ -360,6 +370,9 @@
}
this.playing = false;
this.close();
if (this._chain !== undefined && this._chain.length){
this._chain.map(function (tw){ return tw.start(); });
}
return false;
}
return true;
@ -373,73 +386,49 @@
return new TC(selector(element), startObject, endObject, optionsObj)
}
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++){
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 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(',')) + ")");
}
function scale (a, b, v) {
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ")");
}
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) : '')
+ (a.translate3d ? translate3d(a.translate3d,b.translate3d,'px',v):'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate3d ? rotate3d(a.rotate3d,b.rotate3d,'deg',v):'')
+ (a.rotate||b.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale||b.scale ? scale(a.scale,b.scale,v):'');
};
}
}
var supportedTransformProperties = [
'perspective',
'translate3d', 'translateX', 'translateY', 'translateZ', 'translate',
'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'rotate',
'skewX', 'skewY', 'skew',
'scale'
];
var baseTransformOps = {
component: 'transformFunctions',
var matrixComponent = 'transformMatrix';
var CSS3Matrix = typeof(DOMMatrix) !== 'undefined' ? DOMMatrix
: typeof(WebKitCSSMatrix) !== 'undefined' ? WebKitCSSMatrix
: typeof(CSSMatrix) !== 'undefined' ? CSSMatrix
: typeof(MSCSSMatrix) !== 'undefined' ? MSCSSMatrix
: null;
var onStartTransform = {
transform : function(tweenProp) {
if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
var matrix = new CSS3Matrix(), transformObject = {};
for ( var p in b ) {
transformObject[p] = p === 'perspective' ? numbers(a[p],b[p],v) : arrays(a[p],b[p],v);
}
transformObject.perspective && (matrix.m34 = -1/transformObject.perspective);
matrix = transformObject.translate3d ? (matrix.translate(transformObject.translate3d[0],transformObject.translate3d[1],transformObject.translate3d[2])) : matrix;
matrix = transformObject.rotate3d ? (matrix.rotate(transformObject.rotate3d[0],transformObject.rotate3d[1],transformObject.rotate3d[2])) : matrix;
if (transformObject.skew) {
matrix = transformObject.skew[0] ? matrix.skewX(transformObject.skew[0]) : matrix;
matrix = transformObject.skew[1] ? matrix.skewY(transformObject.skew[1]) : matrix;
}
matrix = transformObject.scale3d ? (matrix.scale(transformObject.scale3d[0],transformObject.scale3d[1],transformObject.scale3d[2])): matrix;
elem.style[tweenProp] = matrix.toString();
};
}
},
CSS3Matrix: function(prop) {
if (this.valuesEnd.transform){
!KUTE[prop] && (KUTE[prop] = CSS3Matrix);
}
},
};
var baseMatrixTransform = {
component: matrixComponent,
property: 'transform',
subProperties: supportedTransformProperties,
functions: {onStart: onStartTransform},
Interpolate: {
perspective: perspective,
translate3d: translate3d,
rotate3d: rotate3d,
translate: translate, rotate: rotate, scale: scale, skew: skew
},
perspective: numbers,
translate3d: arrays,
rotate3d: arrays,
skew: arrays,
scale3d: arrays
}
};
function boxModelOnStart(tweenProp){
@ -452,10 +441,9 @@
var baseBoxProps = ['top','left','width','height'];
var baseBoxOnStart = {};
baseBoxProps.map(function (x){ return baseBoxOnStart[x] = boxModelOnStart; });
var baseBoxModelOps = {
component: 'boxModelProps',
var baseBoxModel = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
Interpolate: {numbers: numbers},
functions: {onStart: baseBoxOnStart}
};
@ -467,23 +455,22 @@
};
}
}
var baseOpacityOps = {
component: 'opacityProperty',
var baseOpacity = {
component: 'baseOpacity',
property: 'opacity',
Interpolate: {numbers: numbers},
functions: {onStart: onStartOpacity}
};
var BaseTransform = new AnimationBase(baseTransformOps);
var BaseBoxModel = new AnimationBase(baseBoxModelOps);
var BaseOpacity = new AnimationBase(baseOpacityOps);
var Transform = new AnimationBase(baseMatrixTransform);
var BoxModel = new AnimationBase(baseBoxModel);
var Opacity = new AnimationBase(baseOpacity);
var indexBase = {
Animation: AnimationBase,
Components: {
BaseTransform: BaseTransform,
BaseBoxModel: BaseBoxModel,
BaseScroll: BaseScroll,
BaseOpacity: BaseOpacity,
Transform: Transform,
BoxModel: BoxModel,
Opacity: Opacity,
},
TweenBase: TweenBase,
fromTo: fromTo,

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

File diff suppressed because one or more lines are too long

676
src/kute-extra.js
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

2
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
svgCubicMorph.html
View file

@ -22,6 +22,7 @@
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
</head>
<body>
@ -342,8 +343,7 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>

3
svgDraw.html
View file

@ -151,8 +151,7 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

6
svgMorph.html
View file

@ -345,7 +345,8 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or something like <a href="https://github.com/fontello/svgpath">SVGPath</a> tools to
apply a scale transformation to your shapes' path commands.</li>
<li>The morphing animation is expensive so try to optimize the number of morph animations that run at the same time. When morphing sub-paths/multi-paths instead of cloning shapes to have same number
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don.</li>
of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, mobile devices still don't do very much, regardless
of the advertising.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays
you can get quite comfortable with almost any value, including the default value.</li>
<li>Because you have the tools at hand, you can also try to use a <code>morphPrecision</code> value for every resolution. Take some time to experiement, you might find a better <code>morphPrecision</code>
@ -373,8 +374,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
svgTransform.html
View file

@ -375,8 +375,7 @@ KUTE.fromTo(element,
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

3
textProperties.html
View file

@ -144,8 +144,7 @@ let tween3 = KUTE.to('selector1',{wordSpacing:50})
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
textWrite.html
View file

@ -247,10 +247,7 @@ tweenObjects.start();
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
transformFunctions.html
View file

@ -280,10 +280,7 @@ var tween2 = KUTE.fromTo(
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>

5
transformMatrix.html
View file

@ -199,10 +199,7 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>