Deleted timeline scrips, they won't work with KUTE.js 1.6.0 will have to be developed later from scratch
This commit is contained in:
thednp
parent
f46fcf68fd
commit
1c200fcbf7
|
|
@ -1,82 +0,0 @@
|
|||
/* KUTE.js - The Light Tweening Engine
|
||||
* package - Timeline plug-in
|
||||
* desc - Timelines with all controls
|
||||
* by @dalisoft (https://github.com/dalisoft)
|
||||
* Licensed under MIT-License
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(["./kute.js"], function (KUTE) {
|
||||
factory(KUTE);
|
||||
return KUTE;
|
||||
});
|
||||
} else if (typeof module == "object" && typeof require == "function") {
|
||||
// We assume, that require() is sync.
|
||||
var KUTE = require("./kute.js");
|
||||
// Export the modified one. Not really required, but convenient.
|
||||
module.exports = factory(KUTE);
|
||||
} else if (typeof window.KUTE !== 'undefined') {
|
||||
// Browser globals
|
||||
factory(window.KUTE);
|
||||
} else {
|
||||
throw new Error("Timeline plug-in require KUTE.js.");
|
||||
}
|
||||
}
|
||||
(function (KUTE) {
|
||||
KUTE.Timeline = function (defOpt) {
|
||||
this._tweens = [];
|
||||
this._startTime = [0];
|
||||
this._collection = [];
|
||||
this._lagTime = [0];
|
||||
var _totalTime = 0;
|
||||
this.tween = function (els, from, to, options) {
|
||||
if (arguments.length === 3) {
|
||||
options = to;
|
||||
to = from;
|
||||
}
|
||||
var all = document.querySelectorAll(els);
|
||||
var opt = {};
|
||||
for (var prop in to) {
|
||||
for (var set in options) {
|
||||
opt[set] = options[set][prop] || options[set] || defOpt[set][prop] || defOpt[prop];
|
||||
}
|
||||
}
|
||||
var offset = opt.offset || 0;
|
||||
opt.delay = (opt.delay || 0) + _totalTime;
|
||||
for (var i = 0, len = all.length; i < len; i++) {
|
||||
opt.delay = opt.delay ? opt.delay + offset : offset;
|
||||
if (arguments.length === 4) {
|
||||
this._tweens.push(KUTE.fromTo(all[i], from, to, opt));
|
||||
} else if (arguments.length === 3) {
|
||||
this._tweens.push(KUTE.to(all[i], to, opt));
|
||||
}
|
||||
this._collection.push(all[i]);
|
||||
}
|
||||
_totalTime += opt.duration || 1000;
|
||||
this._startTime.push((this._startTime[this._startTime.length - 1] || 0));
|
||||
|
||||
return this;
|
||||
};
|
||||
this.to = function (els, to, opt) {
|
||||
return this.tween(els, to, opt);
|
||||
}
|
||||
this.fromTo = function (els, from, to, opt) {
|
||||
return this.tween(els, from, to, opt);
|
||||
}
|
||||
this.control = function (prop, v) {
|
||||
var t = this._startTime,
|
||||
s = this;
|
||||
for (var i = 0, len = t.length; i < len; i++) {
|
||||
for (var it = 0, lent = this._tweens.length; it < lent; it++) {
|
||||
this._tweens[it][prop].apply(this._tweens[it], v);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.start = function () {
|
||||
return this.control('start', [])
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
}));
|
||||
103
sequence.js
103
sequence.js
|
|
@ -1,103 +0,0 @@
|
|||
/*!
|
||||
* Sequence.js
|
||||
* v1.0.3 for KUTE.js
|
||||
* by @dalisoft (https://github.com/dalisoft)
|
||||
* (c) 2016, @dalisoft.
|
||||
* MIT-Licensed
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof(module) === "object" && module.exports !== undefined) {
|
||||
module.exports = factory();
|
||||
} else if (typeof(define) === "function" && define.amd !== undefined) {
|
||||
define(factory);
|
||||
} else if (typeof(window) === "object") {
|
||||
window.Sequence = factory();
|
||||
} else {
|
||||
factory();
|
||||
}
|
||||
}
|
||||
(function () {
|
||||
function Sequence(options) {
|
||||
if (window === this) {
|
||||
return new Sequence(options);
|
||||
}
|
||||
this.options = options || {};
|
||||
this.queue = [];
|
||||
this.queued = 0;
|
||||
this.tweens = [];
|
||||
this.labels = {}; /* we add this on future release */
|
||||
return this;
|
||||
}
|
||||
|
||||
var p = Sequence.prototype;
|
||||
var lastSeqTime = 0;
|
||||
p.tween = function (el, f, t, s, options, queue) {
|
||||
options = options || {};
|
||||
d = options.d !== undefined ? options.d : 1000;
|
||||
lastSeqTime += d;
|
||||
options.delay = options.delay !== undefined ? options.delay : 0;
|
||||
queue = queue !== undefined ? queue : true;
|
||||
var els = typeof el === "string" ? document.querySelectorAll(el) : el.length ? el : [el]; // re-make selector to improve performance
|
||||
var tweens = [];
|
||||
var totalDuration = 0;
|
||||
var _evDelay = 0;
|
||||
for (var o in this.options) {
|
||||
if (!options[o]) {
|
||||
options[o] = this.options[o];
|
||||
}
|
||||
}
|
||||
options.repeat = options.repeat || 0;
|
||||
for (var i = 0, len = els.length; i < len; i++) {
|
||||
var tween = f === undefined ? KUTE.to(els[i], t, options) : KUTE.fromTo(els[i], f, t, options);
|
||||
tweens.push({
|
||||
tween : tween,
|
||||
evDelay : i * s
|
||||
});
|
||||
_evDelay = i * s;
|
||||
}
|
||||
totalDuration = (d * options.repeat) + _evDelay + options.delay;
|
||||
this.queue.push({
|
||||
tweens : tweens,
|
||||
totalDuration : (queue && totalDuration !== Infinity) ? totalDuration : 0
|
||||
});
|
||||
this.queued++;
|
||||
return this;
|
||||
};
|
||||
p.to = function (el, t, d, s, options) {
|
||||
return this.tween(el, undefined, t, d, s, options);
|
||||
};
|
||||
p.fromTo = function (el, f, t, d, s, options) {
|
||||
return this.tween(el, f, t, d, s, options);
|
||||
};
|
||||
p.start = function (time) {
|
||||
var queue = this.queue;
|
||||
time = time !== undefined ? time : window.performance.now();
|
||||
for (var i = 0; i < this.queued; i++) {
|
||||
time += lastSeqTime * (i / 2);
|
||||
var q = queue[i].tweens;
|
||||
var startTime = (queue[i].totalDuration * i) + time;
|
||||
for (var tweenIndex = 0, length = q.length; tweenIndex < length; tweenIndex++) {
|
||||
var tween = q[tweenIndex],
|
||||
curr = tween.tween,
|
||||
evDelay = tween.evDelay;
|
||||
curr.start(evDelay + startTime);
|
||||
this.tweens.push(curr);
|
||||
}
|
||||
}
|
||||
};
|
||||
p.control = function (type, value) {
|
||||
var tweens = this.tweens;
|
||||
for (var i = 0, len = tweens.length; i < len; i++) {
|
||||
tweens[i][type](value);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
var control = ['play', 'pause', 'timeScale', 'makeFaster', 'makeSlower', 'repeat', 'yoyo', 'delay', 'repeatDelay', 'easing', 'interpolation', 'restart', 'seek', 'stop'];
|
||||
control.forEach(function (name) {
|
||||
p[name] = function (value) {
|
||||
return this.control(name, value);
|
||||
}
|
||||
});
|
||||
return Sequence;
|
||||
}));
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>KUTE.js Timeline</title>
|
||||
<style>
|
||||
.dv {
|
||||
width: 100px; height: 100px; float: left;
|
||||
text-align: center; line-height: 100px;
|
||||
margin: 20px 20px 20px 0;
|
||||
background: #0cf;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="dv"></div>
|
||||
<div class="dv"></div>
|
||||
<div class="dv"></div>
|
||||
<div class="dv"></div>
|
||||
<div class="dv"></div>
|
||||
|
||||
|
||||
<script src='kute.js'></script>
|
||||
<script src='kute-timeline.js'></script>
|
||||
<script>
|
||||
|
||||
var tl = new KUTE.Timeline();
|
||||
tl.fromTo('.dv', { rotate : 0 }, { rotate : 45 }, { easing : { rotate : 'easingBounceInOut' }, offset : { rotate : 200 } })
|
||||
tl.to('.dv', { left : 200 }, { easing : { left : 'easingElasticInOut'}, offset: 300 });
|
||||
tl.to('.dv', { top : 200 }, { easing : { top : 'easingElasticInOut' }, offset: 300, duration : 1000 });
|
||||
tl.to('.dv', { width : 45 }, { easing : { width : 'easingElasticInOut' }, offset: 200, duration : 1000 });
|
||||
tl.to('.dv', { height : 45 }, { easing : { height : 'easingElasticInOut' }, offset: 200, duration : 1000 });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue