Фабрики анимаций в Velocity.js используются для генерации повторно применяемых конфигураций анимаций, которые инкапсулируют поведение, параметры и логику трансформаций элементов. Такой подход устраняет дублирование, упрощает масштабирование интерфейсных эффектов и позволяет строить предсказуемую систему анимаций, основанную на композиции и параметризации.
Фабрика анимаций в контексте Velocity.js чаще всего реализуется как
функция, возвращающая объект конфигурации или готовый вызов
Velocity. Базовая идея заключается в отделении описания
анимации от её исполнения.
const fadeFactory = (duration = 300, easing = "ease-in-out") => {
return {
properties: {
opacity: [1, 0]
},
options: {
duration,
easing
}
};
};Такой уровень абстракции позволяет централизовать управление параметрами и стандартизировать поведение визуальных эффектов.
Фабрика может использоваться как источник конфигурации для вызова
Velocity:
const element = document.querySelector(".box");
const fadeIn = fadeFactory(500, "ease-out");
Velocity(element, fadeIn.properties, fadeIn.options);Разделение на properties и options
соответствует архитектуре Velocity.js, где свойства описывают конечное
состояние анимации, а опции управляют временем, кривыми и дополнительным
поведением.
Фабрики приобретают гибкость при добавлении параметров, влияющих на динамику эффектов. Это позволяет строить универсальные анимационные шаблоны.
const moveFactory = (x = 0, y = 0, duration = 400) => {
return {
properties: {
translateX: x,
translateY: y
},
options: {
duration,
easing: "ease-in-out"
}
};
};Использование:
Velocity(element, moveFactory(100, 0, 600).properties, moveFactory(100, 0, 600).options);Подобная структура допускает дальнейшее расширение, включая добавление задержек, обратных вызовов и очередей анимаций.
Фабрики анимаций часто используются как строительные блоки для сложных эффектов. Композиция достигается объединением нескольких конфигураций в последовательность или параллельное выполнение.
const scaleFactory = (scale = 1.2, duration = 200) => ({
properties: {
scale
},
options: {
duration,
easing: "spring"
}
});
const pulseFactory = () => {
return [
scaleFactory(1.2, 150),
scaleFactory(1.0, 150)
];
};Применение последовательности:
const sequence = pulseFactory();
Velocity(element, sequence[0].properties, sequence[0].options);
Velocity(element, sequence[1].properties, sequence[1].options);Такой подход формирует базу для построения собственных систем очередей анимаций поверх Velocity.js.
Velocity.js поддерживает встроенные очереди анимаций, что позволяет фабрикам возвращать не только параметры, но и управляющую логику.
const queueFactory = (name = "fx") => {
return {
properties: {
opacity: 0
},
options: {
duration: 300,
queue: name
}
};
};Использование очередей позволяет изолировать анимации по контекстам, предотвращая пересечение эффектов внутри одного элемента.
Velocity(element, queueFactory("intro").properties, queueFactory("intro").options);Фабрики анимаций часто включают выбор кривых замедления как часть своей логики. Это позволяет стандартизировать поведение интерфейса.
const easingFactory = (type = "ease-in") => {
const map = {
smooth: "ease-in-out",
sharp: "ease-in",
bounce: "spring"
};
return map[type] || "linear";
};Использование внутри фабрики движения:
const slideFactory = (distance = 200, type = "smooth") => {
return {
properties: {
translateX: distance
},
options: {
duration: 400,
easing: easingFactory(type)
}
};
};При росте интерфейса возникает необходимость комбинировать несколько трансформаций одновременно: перемещение, масштабирование, изменение прозрачности.
const modalFactory = (visible = true) => {
return {
properties: {
opacity: visible ? 1 : 0,
scale: visible ? 1 : 0.8,
translateY: visible ? 0 : 20
},
options: {
duration: 250,
easing: "ease-out"
}
};
};Такая фабрика описывает целостное состояние компонента, а не отдельный эффект, что приближает анимации к декларативной модели управления UI.
В ряде случаев фабрика может сохранять внутреннее состояние, формируя динамическое поведение на основе предыдущих вызовов.
const counterFactory = () => {
let step = 0;
return () => {
step += 1;
return {
properties: {
translateY: step * 10
},
options: {
duration: 200
}
};
};
};Использование:
const animateStep = counterFactory();
Velocity(element, animateStep().properties, animateStep().options);
Velocity(element, animateStep().properties, animateStep().options);Такой подход применяется для построения прогрессивных анимаций, где каждый вызов изменяет поведение последующего эффекта.
При большом количестве анимаций возникает необходимость унифицировать входные данные. Фабрики могут выполнять нормализацию параметров перед формированием конфигурации.
const normalizeDuration = (d) => Math.max(100, Math.min(d, 2000));
const normalizedFactory = (opacity = 1, duration = 300) => {
return {
properties: {
opacity
},
options: {
duration: normalizeDuration(duration),
easing: "ease-in-out"
}
};
};Подобная логика снижает риск неконсистентного поведения интерфейса при различных условиях исполнения.
При развитии интерфейсных систем фабрики анимаций становятся слоем абстракции, аналогичным токенам в дизайн-системах. Они задают стандарты поведения:
const animationTokens = {
duration: {
fast: 150,
base: 300,
slow: 600
},
easing: {
default: "ease-in-out",
entrance: "ease-out",
exit: "ease-in"
}
};Фабрика, использующая такие токены:
const tokenizedFactory = () => {
return {
properties: {
opacity: 1
},
options: {
duration: animationTokens.duration.base,
easing: animationTokens.easing.default
}
};
};Такой уровень абстракции обеспечивает согласованность всех анимационных эффектов внутри приложения и снижает вероятность появления визуальных несоответствий.
Velocity.js предоставляет низкоуровневый API управления анимациями, а фабрики формируют над ним слой архитектурной организации. При увеличении количества интерактивных элементов фабричный подход снижает сложность сопровождения, объединяя разрозненные эффекты в структурированную систему конфигураций и повторно используемых паттернов.