102 lines
1.9 KiB
TypeScript
102 lines
1.9 KiB
TypeScript
// src/views/AgentChat/constants/animations.ts
|
||
// Framer Motion 动画变体配置
|
||
|
||
import { Variants } from 'framer-motion';
|
||
|
||
/**
|
||
* Framer Motion 动画变体配置
|
||
* 用于 AgentChat 组件的各种动画效果
|
||
*/
|
||
export const animations: Record<string, Variants> = {
|
||
/**
|
||
* 左侧栏滑入动画（Spring 物理引擎）
|
||
* 从左侧滑入，使用弹性动画
|
||
*/
|
||
slideInLeft: {
|
||
initial: { x: -320, opacity: 0 },
|
||
animate: {
|
||
x: 0,
|
||
opacity: 1,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 300,
|
||
damping: 30,
|
||
},
|
||
},
|
||
exit: {
|
||
x: -320,
|
||
opacity: 0,
|
||
transition: { duration: 0.2 },
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 右侧栏滑入动画（Spring 物理引擎）
|
||
* 从右侧滑入，使用弹性动画
|
||
*/
|
||
slideInRight: {
|
||
initial: { x: 320, opacity: 0 },
|
||
animate: {
|
||
x: 0,
|
||
opacity: 1,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 300,
|
||
damping: 30,
|
||
},
|
||
},
|
||
exit: {
|
||
x: 320,
|
||
opacity: 0,
|
||
transition: { duration: 0.2 },
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 消息淡入上移动画
|
||
* 用于新消息出现时的动画效果
|
||
*/
|
||
fadeInUp: {
|
||
initial: { opacity: 0, y: 20 },
|
||
animate: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {
|
||
type: 'spring',
|
||
stiffness: 400,
|
||
damping: 25,
|
||
},
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 错开动画项
|
||
* 用于列表项的错开出现效果
|
||
*/
|
||
staggerItem: {
|
||
initial: { opacity: 0, y: 10 },
|
||
animate: { opacity: 1, y: 0 },
|
||
},
|
||
|
||
/**
|
||
* 错开动画容器
|
||
* 用于包含多个子项的容器，使子项依次出现
|
||
*/
|
||
staggerContainer: {
|
||
animate: {
|
||
transition: {
|
||
staggerChildren: 0.05,
|
||
},
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 按压缩放动画
|
||
* 用于按钮等交互元素的点击/悬停效果
|
||
*/
|
||
pressScale: {
|
||
whileTap: { scale: 0.95 },
|
||
whileHover: { scale: 1.05 },
|
||
},
|
||
};
|