@ozen-ui/kit/__inner__/cjs/utils/animateProperty.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.animateProperty = exports.animateNumberValue = void 0;
var timingFunctions = {
    linear: function (time) { return time; },
    'ease-in': function (time) { return Math.pow(time, 1.675); },
    'ease-out': function (time) { return 1 - Math.pow((1 - time), 1.675); },
    'ease-in-out': function (time) { return 0.5 * (Math.sin((time - 0.5) * Math.PI) + 1); },
};
/** Анимирует число, вызывая onAnimate при каждом кадре анимации */
var animateNumberValue = function (onAnimate, from, to, options) {
    if (options === void 0) { options = {}; }
    var _a = options.timingFunction, timingFunction = _a === void 0 ? 'ease-in-out' : _a, _b = options.duration, duration = _b === void 0 ? 300 : _b, onFinish = options.onFinish;
    var cancelled = false;
    var start = null;
    var cancel = function () {
        cancelled = true;
    };
    if (!from && from !== 0) {
        onFinish === null || onFinish === void 0 ? void 0 : onFinish();
        return cancel;
    }
    var previousValue = from;
    var step = function (timestamp) {
        if (cancelled)
            return;
        if (start === null) {
            start = timestamp;
        }
        var time = Math.min(1, (timestamp - start) / duration);
        var selectedTimingFunction = timingFunctions[timingFunction];
        var newValue = selectedTimingFunction(time) * (to - from) + from;
        onAnimate(newValue, previousValue);
        previousValue = newValue;
        if (time >= 1) {
            onFinish === null || onFinish === void 0 ? void 0 : onFinish();
            return;
        }
        requestAnimationFrame(step);
    };
    if (from === to) {
        onFinish === null || onFinish === void 0 ? void 0 : onFinish();
        return cancel;
    }
    requestAnimationFrame(step);
    return cancel;
};
exports.animateNumberValue = animateNumberValue;
/** Анимирует числовое свойство элемента */
var animateProperty = function (property, element, to, options) {
    if (options === void 0) { options = {}; }
    var from = element === null || element === void 0 ? void 0 : element[property];
    return (0, exports.animateNumberValue)(function (value) {
        if (!element) {
            return;
        }
        // eslint-disable-next-line no-param-reassign
        element[property] = value;
    }, from, to, options);
};
exports.animateProperty = animateProperty;