react-use-magic-animations
Version:
A collection of easy-to-use React hooks for professional animations based on popular animation libraries
359 lines (344 loc) • 19.2 kB
JavaScript
;
var framerMotion = require('framer-motion');
var react = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function useFade(options) {
var _this = this;
if (options === void 0) { options = {}; }
var controls = framerMotion.useAnimation();
var _a = options.duration, duration = _a === void 0 ? 0.5 : _a, _b = options.delay, delay = _b === void 0 ? 0 : _b, _c = options.ease, ease = _c === void 0 ? 'easeInOut' : _c, _d = options.opacity, opacity = _d === void 0 ? 0 : _d, direction = options.direction, _e = options.distance, distance = _e === void 0 ? 50 : _e, _f = options.stagger, stagger = _f === void 0 ? 0.1 : _f; options.customVariants; var fadeInOptions = options.fadeIn, fadeOutOptions = options.fadeOut;
react.useEffect(function () {
if (duration < 0) {
throw new Error('Duration must be a positive number');
}
if (opacity < 0 || opacity > 1) {
throw new Error('Opacity must be between 0 and 1');
}
}, [duration, opacity]);
var getDirectionalTransform = react.useCallback(function () {
if (!direction)
return {};
var transforms = {};
switch (direction) {
case 'up':
transforms.y = distance;
break;
case 'down':
transforms.y = -distance;
break;
case 'left':
transforms.x = distance;
break;
case 'right':
transforms.x = -distance;
break;
}
return transforms;
}, [direction, distance]);
var fadeIn = react.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
var fadeInDuration, fadeInDelay, fadeInEase;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
fadeInDuration = (_a = fadeInOptions === null || fadeInOptions === void 0 ? void 0 : fadeInOptions.duration) !== null && _a !== void 0 ? _a : duration;
fadeInDelay = (_b = fadeInOptions === null || fadeInOptions === void 0 ? void 0 : fadeInOptions.delay) !== null && _b !== void 0 ? _b : delay;
fadeInEase = (_c = fadeInOptions === null || fadeInOptions === void 0 ? void 0 : fadeInOptions.ease) !== null && _c !== void 0 ? _c : ease;
return [4 /*yield*/, controls.start(__assign(__assign({ opacity: 1 }, getDirectionalTransform()), { transition: {
duration: fadeInDuration,
delay: fadeInDelay,
ease: fadeInEase,
stagger: stagger
} }))];
case 1:
_d.sent();
return [2 /*return*/];
}
});
}); }, [controls, duration, delay, ease, stagger, fadeInOptions, getDirectionalTransform]);
var fadeOut = react.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
var fadeOutDuration, fadeOutDelay, fadeOutEase;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
fadeOutDuration = (_a = fadeOutOptions === null || fadeOutOptions === void 0 ? void 0 : fadeOutOptions.duration) !== null && _a !== void 0 ? _a : duration;
fadeOutDelay = (_b = fadeOutOptions === null || fadeOutOptions === void 0 ? void 0 : fadeOutOptions.delay) !== null && _b !== void 0 ? _b : delay;
fadeOutEase = (_c = fadeOutOptions === null || fadeOutOptions === void 0 ? void 0 : fadeOutOptions.ease) !== null && _c !== void 0 ? _c : ease;
return [4 /*yield*/, controls.start(__assign(__assign({ opacity: opacity }, getDirectionalTransform()), { transition: {
duration: fadeOutDuration,
delay: fadeOutDelay,
ease: fadeOutEase,
stagger: stagger
} }))];
case 1:
_d.sent();
return [2 /*return*/];
}
});
}); }, [controls, duration, delay, ease, opacity, stagger, fadeOutOptions, getDirectionalTransform]);
var stop = react.useCallback(function () {
controls.stop();
}, [controls]);
return { controls: controls, fadeIn: fadeIn, fadeOut: fadeOut, stop: stop };
}
var useSlide = function (options) {
if (options === void 0) { options = {}; }
var _a = options.duration, duration = _a === void 0 ? 0.5 : _a, // Значение по умолчанию для длительности
_b = options.delay, // Значение по умолчанию для длительности
delay = _b === void 0 ? 0 : _b, // Значение по умолчанию для задержки
_c = options.direction, // Значение по умолчанию для задержки
direction = _c === void 0 ? 'left' : _c, // Значение по умолчанию для направления
_d = options.distance, // Значение по умолчанию для направления
distance = _d === void 0 ? 100 : _d, // Значение по умолчанию для расстояния
_e = options.initialOffset, // Значение по умолчанию для расстояния
initialOffset = _e === void 0 ? 0 : _e;
var controls = framerMotion.useAnimation();
// Функция для определения вариантов анимации
var getSlideVariants = function () {
var _a, _b, _c;
// Определяем ось анимации (x для горизонтального, y для вертикального)
var axis = direction === 'left' || direction === 'right' ? 'x' : 'y';
// Определяем множитель направления (-1 для left/up, 1 для right/down)
var multiplier = direction === 'left' || direction === 'up' ? -1 : 1;
return {
// Начальное состояние
initial: (_a = {},
_a[axis] = initialOffset + distance * multiplier,
_a.opacity = 0,
_a),
// Состояние анимации
animate: (_b = {},
_b[axis] = initialOffset,
_b.opacity = 1,
_b.transition = {
duration: duration,
delay: delay,
ease: 'easeOut', // Плавное замедление
},
_b),
// Состояние выхода
exit: (_c = {},
_c[axis] = distance * multiplier,
_c.opacity = 0,
_c.transition = {
duration: duration,
ease: 'easeIn', // Плавное ускорение
},
_c),
};
};
// Функция для анимации появления
var slideIn = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, controls.start('animate')];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
// Функция для анимации исчезновения
var slideOut = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, controls.start('exit')];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
// Установка начального состояния при монтировании компонента
react.useEffect(function () {
controls.set('initial');
}, [controls]);
return {
controls: controls, // Контроллеры анимации для framer-motion
slideIn: slideIn, // Функция для анимации появления
slideOut: slideOut, // Функция для анимации исчезновения
variants: getSlideVariants(), // Варианты анимации
};
};
var useScale = function (options) {
if (options === void 0) { options = {}; }
var _a = options.duration, duration = _a === void 0 ? 0.5 : _a, // Значение по умолчанию для длительности
_b = options.delay, // Значение по умолчанию для длительности
delay = _b === void 0 ? 0 : _b, // Значение по умолчанию для задержки
_c = options.initialScale, // Значение по умолчанию для задержки
initialScale = _c === void 0 ? 0 : _c, // Значение по умолчанию для начального масштаба
_d = options.finalScale, // Значение по умолчанию для начального масштаба
finalScale = _d === void 0 ? 1 : _d, // Значение по умолчанию для конечного масштаба
_e = options.initialOpacity, // Значение по умолчанию для конечного масштаба
initialOpacity = _e === void 0 ? 0 : _e, // Значение по умолчанию для начальной прозрачности
_f = options.finalOpacity, // Значение по умолчанию для начальной прозрачности
finalOpacity = _f === void 0 ? 1 : _f;
var controls = framerMotion.useAnimation();
// Функция для анимации увеличения
var scaleIn = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, controls.start({
scale: finalScale,
opacity: finalOpacity,
transition: {
duration: duration,
delay: delay,
ease: [0.4, 0, 0.2, 1], // Кастомная кривая анимации для плавного эффекта
},
})];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
// Функция для анимации уменьшения
var scaleOut = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, controls.start({
scale: initialScale,
opacity: initialOpacity,
transition: {
duration: duration,
ease: [0.4, 0, 0.2, 1], // Кастомная кривая анимации для плавного эффекта
},
})];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
// Установка начального состояния при монтировании компонента
react.useEffect(function () {
controls.set({
scale: initialScale,
opacity: initialOpacity,
});
}, [controls, initialScale, initialOpacity]);
return {
controls: controls, // Контроллеры анимации для framer-motion
scaleIn: scaleIn, // Функция для анимации увеличения
scaleOut: scaleOut, // Функция для анимации уменьшения
style: {
scale: initialScale,
opacity: initialOpacity,
},
};
};
function useSpring(options) {
var _this = this;
if (options === void 0) { options = {}; }
var controls = framerMotion.useAnimation();
var _a = options.stiffness, stiffness = _a === void 0 ? 100 : _a, _b = options.damping, damping = _b === void 0 ? 10 : _b, _c = options.mass, mass = _c === void 0 ? 1 : _c, _d = options.velocity, velocity = _d === void 0 ? 0 : _d, _e = options.restDelta, restDelta = _e === void 0 ? 0.001 : _e, _f = options.restSpeed, restSpeed = _f === void 0 ? 0.001 : _f, _g = options.duration, duration = _g === void 0 ? 1 : _g, _h = options.delay, delay = _h === void 0 ? 0 : _h, _j = options.from, from = _j === void 0 ? 0 : _j; options.to; var _l = options.bounce, bounce = _l === void 0 ? 0.25 : _l, _m = options.tension, tension = _m === void 0 ? 170 : _m, _o = options.friction, friction = _o === void 0 ? 26 : _o, _p = options.velocityThreshold, velocityThreshold = _p === void 0 ? 0.001 : _p, _q = options.distanceThreshold, distanceThreshold = _q === void 0 ? 0.001 : _q;
var spring = react.useCallback(function (targetValue) { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, controls.start({
scale: targetValue,
transition: {
type: "spring",
stiffness: stiffness,
damping: damping,
mass: mass,
velocity: velocity,
restDelta: restDelta,
restSpeed: restSpeed,
duration: duration,
delay: delay,
bounce: bounce,
tension: tension,
friction: friction,
velocityThreshold: velocityThreshold,
distanceThreshold: distanceThreshold,
}
})];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); }, [controls, stiffness, damping, mass, velocity, restDelta, restSpeed, duration, delay, bounce, tension, friction, velocityThreshold, distanceThreshold]);
var stop = react.useCallback(function () {
controls.stop();
}, [controls]);
react.useEffect(function () {
controls.set({ scale: from });
}, [controls, from]);
return {
controls: controls,
spring: spring,
stop: stop,
value: from
};
}
exports.useFade = useFade;
exports.useScale = useScale;
exports.useSlide = useSlide;
exports.useSpring = useSpring;
//# sourceMappingURL=index.js.map