41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
|
function easeInOutSin(time) {
|
||
|
|
return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
|
||
|
|
}
|
||
|
|
export default function animate(property, element, to) {
|
||
|
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||
|
|
var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};
|
||
|
|
var _options$ease = options.ease,
|
||
|
|
ease = _options$ease === void 0 ? easeInOutSin : _options$ease,
|
||
|
|
_options$duration = options.duration,
|
||
|
|
duration = _options$duration === void 0 ? 300 : _options$duration;
|
||
|
|
var start = null;
|
||
|
|
var from = element[property];
|
||
|
|
var cancelled = false;
|
||
|
|
var cancel = function cancel() {
|
||
|
|
cancelled = true;
|
||
|
|
};
|
||
|
|
var step = function step(timestamp) {
|
||
|
|
if (cancelled) {
|
||
|
|
cb(new Error('Animation cancelled'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (start === null) {
|
||
|
|
start = timestamp;
|
||
|
|
}
|
||
|
|
var time = Math.min(1, (timestamp - start) / duration);
|
||
|
|
element[property] = ease(time) * (to - from) + from;
|
||
|
|
if (time >= 1) {
|
||
|
|
requestAnimationFrame(function () {
|
||
|
|
cb(null);
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
requestAnimationFrame(step);
|
||
|
|
};
|
||
|
|
if (from === to) {
|
||
|
|
cb(new Error('Element already at target position'));
|
||
|
|
return cancel;
|
||
|
|
}
|
||
|
|
requestAnimationFrame(step);
|
||
|
|
return cancel;
|
||
|
|
}
|