tweenkle
Version:
Lightweight tweening library for all your tweening and animation needs.
490 lines (420 loc) • 15.8 kB
JavaScript
/*! tweenkle v0.2.2 | (c) 2020 Ryan Hefner | MIT License | https://github.com/ryanhefner/tweenkle !*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.tweenkle = {}));
}(this, (function (exports) { 'use strict';
var Sister;
/**
* @link https://github.com/gajus/sister for the canonical source repository
* @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
*/
Sister = function () {
var sister = {},
events = {};
/**
* @name handler
* @function
* @param {Object} data Event data.
*/
/**
* @param {String} name Event name.
* @param {handler} handler
* @return {listener}
*/
sister.on = function (name, handler) {
var listener = {name: name, handler: handler};
events[name] = events[name] || [];
events[name].unshift(listener);
return listener;
};
/**
* @param {listener}
*/
sister.off = function (listener) {
var index = events[listener.name].indexOf(listener);
if (index !== -1) {
events[listener.name].splice(index, 1);
}
};
/**
* @param {String} name Event name.
* @param {Object} data Event data.
*/
sister.trigger = function (name, data) {
var listeners = events[name],
i;
if (listeners) {
i = listeners.length;
while (i--) {
listeners[i].handler(data);
}
}
};
return sister;
};
var sister = Sister;
var Linear = function Linear(time, beginningValue, changeValue, duration) {
return beginningValue + changeValue * (time / duration);
};
var calculateValue = function calculateValue(startValue, endValue, ease, duration, progress) {
/**
* TODO: Setup CSS support for basic unit support. - @ryan
*/
if (duration === 0) {
return endValue;
} // if (typeof startValue === 'string' || typeof endValue === 'string') {
// const [matchStart, start, unit] = CSS_UNIT_REGEX.exec(startValue);
// const [matchEnd, end] = CSS_UNIT_REGEX.exec(endValue);
// }
var diff = startValue > endValue ? -(startValue - endValue) : endValue - startValue;
var value = ease(duration * progress, startValue, diff, duration);
return startValue > endValue ? Math.max(endValue, Math.min(startValue, value)) : Math.max(startValue, Math.min(endValue, value));
};
var updateValue = function updateValue(ref) {
if (ref.startValue instanceof Object) {
var nextValue = {};
Object.keys(ref.startValue).forEach(function (key) {
nextValue[key] = calculateValue(ref.startValue[key], ref.endValue[key], ref.ease, ref.duration, ref.progress);
});
ref.value = nextValue;
return;
}
ref.value = calculateValue(ref.startValue, ref.endValue, ref.ease, ref.duration, ref.progress);
};
var Tween = /*#__PURE__*/function () {
function Tween(_ref) {
var start = _ref.start,
end = _ref.end,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 1000 : _ref$duration,
_ref$ease = _ref.ease,
ease = _ref$ease === void 0 ? Linear : _ref$ease,
_ref$delay = _ref.delay,
delay = _ref$delay === void 0 ? 0 : _ref$delay;
var emitter = new sister();
this.on = emitter.on;
this.off = emitter.off;
this.trigger = emitter.trigger;
this.value = this.startValue = start;
this.endValue = end;
this.duration = duration;
this.ease = ease;
this.delay = delay;
this.active = false;
this.complete = false;
this.progress = 0;
this.endTime = null;
}
var _proto = Tween.prototype;
_proto.start = function start() {
this.endTime = Date.now() + this.duration * (1 - this.progress);
this.trigger('start', {
start: this.start,
end: this.end,
duration: this.duration,
progress: this.progress,
ease: this.ease,
value: this.value
});
this.animationFrame = requestAnimationFrame(this.tick.bind(this));
this.active = true;
this.complete = false;
return this;
};
_proto.stop = function stop() {
if (this.animationFrame) {
cancelAnimationFrame(this.animationFrame);
}
this.progress = this.progress + (this.endTime - Date.now()) / this.duration;
this.endTime = null;
this.active = false;
updateValue(this);
this.trigger('stop', {
start: this.start,
end: this.end,
duration: this.duration,
progress: this.progress,
ease: this.ease,
value: this.value
});
return this;
};
_proto.tick = function tick() {
this.progress = Math.max(0, Math.min(1, 1 - (this.endTime - Date.now()) / this.duration));
updateValue(this);
var tickResponse = {
start: this.startValue,
end: this.endValue,
duration: this.duration,
progress: this.progress,
ease: this.ease,
value: this.value
};
this.trigger('tick', tickResponse);
if (this.progress === 1 || this.duration === 0) {
this.active = false;
this.complete = true;
return this.trigger('complete', tickResponse);
}
this.animationFrame = requestAnimationFrame(this.tick.bind(this));
};
return Tween;
}();
var In = function In(time, beginningValue, changeValue, duration) {
var s = 1.70158;
return changeValue * (time /= duration) * time * ((s + 1) * time - s) + beginningValue;
};
var Out = function Out(time, beginningValue, changeValue, duration) {
var s = 1.70158;
return changeValue * ((time = time / duration - 1) * time * ((s + 1) * time + s) + 1) + beginningValue;
};
var InOut = function InOut(time, beginningValue, changeValue, duration) {
var s = 1.70158;
if ((time /= duration / 2) < 1) {
return changeValue / 2 * (time * time * (((s *= 1.525) + 1) * time - s)) + beginningValue;
}
return changeValue / 2 * ((time -= 2) * time * (((s *= 1.525) + 1) * time + s) + 2) + beginningValue;
};
var Back = {
In: In,
Out: Out,
InOut: InOut
};
var Out$1 = function Out(time, beginningValue, changeValue, duration) {
if ((time /= duration) < 1 / 2.75) {
return changeValue * (7.5625 * time * time) + beginningValue;
}
if (time < 2 / 2.75) {
return changeValue * (7.5625 * (time -= 1.5 / 2.75) * time + .75) + beginningValue;
}
if (time < 2.5 / 2.75) {
return changeValue * (7.5625 * (time -= 2.25 / 2.75) * time + .9375) + beginningValue;
}
return changeValue * (7.5625 * (time -= 2.625 / 2.75) * time + .984375) + beginningValue;
};
var In$1 = function In(time, beginningValue, changeValue, duration) {
return changeValue - bounceEaseOut(duration - time, 0, changeValue, duration) + beginningValue;
};
var InOut$1 = function InOut(time, beginningValue, changeValue, duration) {
if (time < duration / 2) {
return In$1(time * 2, 0, changeValue, duration) * .5 + beginningValue;
}
return Out$1(time * 2 - duration, 0, changeValue, duration) * .5 + changeValue * .5 + beginningValue;
};
var Bounce = {
In: In$1,
Out: Out$1,
InOut: InOut$1
};
var In$2 = function In(time, beginningValue, changeValue, duration) {
return -changeValue * (Math.sqrt(1 - (time /= duration) * time) - 1) + beginningValue;
};
var Out$2 = function Out(time, beginningValue, changeValue, duration) {
return changeValue * Math.sqrt(1 - (time = time / duration - 1) * time) + beginningValue;
};
var InOut$2 = function InOut(time, beginningValue, changeValue, duration) {
if ((time /= duration / 2) < 1) {
return -changeValue / 2 * (Math.sqrt(1 - time * time) - 1) + beginningValue;
}
return changeValue / 2 * (Math.sqrt(1 - (time -= 2) * time) + 1) + beginningValue;
};
var Circ = {
In: In$2,
Out: Out$2,
InOut: InOut$2
};
var In$3 = function In(time, beginningValue, changeValue, duration) {
return changeValue * (time /= duration) * time * time + beginningValue;
};
var Out$3 = function Out(time, beginningValue, changeValue, duration) {
return changeValue * ((time = time / duration - 1) * time * time + 1) + beginningValue;
};
var InOut$3 = function InOut(time, beginningValue, changeValue, duration) {
if ((time /= duration / 2) < 1) {
return changeValue / 2 * time * time * time + beginningValue;
}
return changeValue / 2 * ((time -= 2) * time * time + 2) + beginningValue;
};
var Cubic = {
In: In$3,
Out: Out$3,
InOut: InOut$3
};
var In$4 = function In(time, beginningValue, changeValue, duration) {
var s = 1.70158;
var p = 0;
var a = changeValue;
if (time === 0) {
return beginningValue;
}
if ((time /= duration) === 1) {
return beginningValue + changeValue;
}
if (!p) {
p = duration * .3;
}
if (a < Math.abs(changeValue)) {
a = changeValue;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(changeValue / a);
}
return -(a * Math.pow(2, 10 * (time -= 1)) * Math.sin((time * duration - s) * (2 * Math.PI) / p)) + beginningValue;
};
var Out$4 = function Out(time, beginningValue, changeValue, duration) {
var s = 1.70158;
var p = 0;
var a = changeValue;
if (time === 0) {
return beginningValue;
}
if ((time /= duration) === 1) {
return beginningValue + changeValue;
}
if (!p) {
p = duration * .3;
}
if (a < Math.abs(changeValue)) {
a = changeValue;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(changeValue / a);
}
return a * Math.pow(2, -10 * time) * Math.sin((time * duration - s) * (2 * Math.PI) / p) + changeValue + beginningValue;
};
var InOut$4 = function InOut(time, beginningValue, changeValue, duration) {
var s = 1.70158;
var p = 0;
var a = changeValue;
if (time === 0) {
return beginningValue;
}
if ((time /= duration / 2) === 2) {
return beginningValue + changeValue;
}
if (!p) {
p = duration * (.3 * 1.5);
}
if (a < Math.abs(changeValue)) {
a = changeValue;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(changeValue / a);
}
if (time < 1) {
return -.5 * (a * Math.pow(2, 10 * (time -= 1)) * Math.sin((time * duration - s) * (2 * Math.PI) / p)) + beginningValue;
}
return a * Math.pow(2, -10 * (time -= 1)) * Math.sin((time * duration - s) * (2 * Math.PI) / p) * .5 + changeValue + beginningValue;
};
var Elastic = {
In: In$4,
Out: Out$4,
InOut: InOut$4
};
var In$5 = function In(time, beginningValue, changeValue, duration) {
return time === 0 ? beginningValue : changeValue * Math.pow(2, 10 * (time / duration - 1)) + beginningValue;
};
var Out$5 = function Out(time, beginningValue, changeValue, duration) {
return time === duration ? beginningValue + changeValue : changeValue * (-Math.pow(2, -10 * time / duration) + 1) + beginningValue;
};
var InOut$5 = function InOut(time, beginningValue, changeValue, duration) {
if (time === 0) {
return beginningValue;
}
if (time === duration) {
return beginningValue + changeValue;
}
if ((time /= duration / 2) < 1) {
return changeValue / 2 * Math.pow(2, 10 * (time - 1)) + beginningValue;
}
return changeValue / 2 * (-Math.pow(2, -10 * --time) + 2) + beginningValue;
};
var Expo = {
In: In$5,
Out: Out$5,
InOut: InOut$5
};
var In$6 = function In(time, beginningValue, changeValue, duration) {
return changeValue * (time /= duration) * time + beginningValue;
};
var Out$6 = function Out(time, beginningValue, changeValue, duration) {
return -changeValue * (time /= duration) * (time - 2) + beginningValue;
};
var InOut$6 = function InOut(time, beginningValue, changeValue, duration) {
if ((time /= duration / 2) < 1) {
return changeValue / 2 * time * time + beginningValue;
}
return -changeValue / 2 * (--time * (time - 2) - 1) + beginningValue;
};
var Quad = {
In: In$6,
Out: Out$6,
InOut: InOut$6
};
var In$7 = function In(time, beginningValue, changeValue, duration) {
return changeValue * (time /= duration) * time * time * time + beginningValue;
};
var Out$7 = function Out(time, beginningValue, changeValue, duration) {
return -changeValue * ((time = time / duration - 1) * time * time * time - 1) + beginningValue;
};
var InOut$7 = function InOut(time, beginningValue, changeValue, duration) {
if ((time /= duration / 2) < 1) {
return changeValue / 2 * time * time * time * time + beginningValue;
}
return -changeValue / 2 * ((time -= 2) * time * time * time - 2) + beginningValue;
};
var Quart = {
In: In$7,
Out: Out$7,
InOut: InOut$7
};
var In$8 = function In(time, beginningValue, changeValue, duration) {
return changeValue * (time /= duration) * time * time * time * time + beginningValue;
};
var Out$8 = function Out(time, beginningValue, changeValue, duration) {
return changeValue * ((time = time / duration - 1) * time * time * time * time + 1) + beginningValue;
};
var InOut$8 = function InOut(time, beginningValue, changeValue, duration) {
if ((time /= duration / 2) < 1) {
return changeValue / 2 * time * time * time * time * time + beginningValue;
}
return changeValue / 2 * ((time -= 2) * time * time * time * time + 2) + beginningValue;
};
var Quint = {
In: In$8,
Out: Out$8,
InOut: InOut$8
};
var In$9 = function In(time, beginningValue, changeValue, duration) {
return -changeValue * Math.cos(time / duration * (Math.PI / 2)) + changeValue + beginningValue;
};
var Out$9 = function Out(time, beginningValue, changeValue, duration) {
return changeValue * Math.sin(time / duration * (Math.PI / 2)) + beginningValue;
};
var InOut$9 = function InOut(time, beginningValue, changeValue, duration) {
return -changeValue / 2 * (Math.cos(Math.PI * time / duration) - 1) + beginningValue;
};
var Sine = {
In: In$9,
Out: Out$9,
InOut: InOut$9
};
var index = {
Back: Back,
Bounce: Bounce,
Circ: Circ,
Cubic: Cubic,
Elastic: Elastic,
Expo: Expo,
Linear: Linear,
Quad: Quad,
Quart: Quart,
Quint: Quint,
Sine: Sine
};
exports.Easing = index;
exports.default = Tween;
Object.defineProperty(exports, '__esModule', { value: true });
})));
/* follow me on Twitter! @ryanhefner */