在前端开发领域，动画已从视觉点缀升级为关键交互元素，它能有效引导用户注意力、增强操作反馈并优化使用体验。然而随着项目复杂度提升，动画管理往往面临分散混乱的挑战。

TinyVue 采用 LESS + CSS 变量结合方案，兼顾两者优势：

1. 变量化控制所有动效的时长、透明度、位移量都由 CSS 变量控制
2. 可局部覆盖组件可根据需求覆盖变量，灵活调整动画参数
3. 主题可切换只需在不同主题文件中修改变量，即可快速切换全局动效风格

1. 拉取 TinyVue 仓库：

git clone https://github.com/opentiny/tiny-vue.gitcd tiny-vuepnpm i

2. 启动TinyVue项目

pnpm dev

浏览器访问：http://localhost:7130

3. 打开配置文件：

/packages/theme/src/base/vars.less

1. 修改变量即可实时生效：

--tv-motion-slide-speed: 1.2s;

刷新页面后，可在抽屉（Drawer）组件中观察滑动动效速度变化。

同样地：

--tv-motion-fade-offset-y: 100px;

会影响对话框（DialogBox）的淡入位移动画。

1. 统一变量管理

所有动画相关参数集中在 /packages/theme/src/base/vars.less：

:root {
  /* 淡入淡出 */
  --tv-motion-fade-speed: 0.3s;
  /* 滑动类 */
  --tv-motion-slide-speed: 0.4s;
  --tv-motion-slide-offset-left: -30px;
  --tv-motion-slide-offset-left-mid: -10px;
  --tv-motion-slide-opacity-mid: 0.5;
  /* 蚂蚁线 */
  --tv-motion-ants-shift: 8px;
  --tv-motion-ants-speed: 0.8s;
}

2. 按类型分类管理

为方便维护和扩展，动效按类型拆分为多个 LESS 文件：

motion/
  fade.less       // 淡入淡出
  slide.less      // 滑动
  zoom.less       // 缩放
  rotate.less     // 旋转
  bounce.less     // 弹跳
  ants.less       // 蚂蚁线
  ...
  index.less      // 汇总引入

每个文件独立维护一类动效，结构清晰，修改成本低。

3. 动效命名规范

统一命名规则：{type}-{direction}-{state}

示例：

1. fade-in：淡入
2. slide-left-in：从左滑入
3. zoom-in：放大进入
4. ants-x-rev：蚂蚁线反向滚动

1️⃣ 淡入淡出动效

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

调用方式：

.fade-enter-active {
  animation: fade-in var(--tv-motion-fade-speed) ease-out both;
}
.fade-leave-active {
  animation: fade-out var(--tv-motion-fade-speed) ease-in both;
}

2️⃣ 滑动动效

@keyframes slide-left-in {
  0% {
    opacity: 0;
    transform: translateX(var(--tv-motion-slide-offset-left));
  }
  50% {
    opacity: var(--tv-motion-slide-opacity-mid);
    transform: translateX(var(--tv-motion-slide-offset-left-mid));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

通过变量可灵活调整动画节奏和距离。

3️⃣ 蚂蚁线动画（Ants）

@keyframes ants-x {
  0% { background-position: 0 0; }
  100% { background-position: var(--tv-motion-ants-shift, 8px) 0; }
}

在组件中调用：

.copyed-borders {
  --tv-motion-ants-shift: 13px;
  .border-top {
    animation: ants-x var(--tv-motion-ants-speed) linear infinite;
  }
}

1. 保持命名规范 ：保证语义清晰、避免重复
2. 文件分类明确 ：不同类型动效分文件管理
3. 加注释和示例：便于团队协作与复用

通过LESS与CSS变量的深度整合，TinyVue构建了一套灵活可扩展的动效体系，既实现了全局统一管理，又保留了组件级的个性化定制能力，为复杂前端项目提供了优雅的动画解决方案。