五、全局动效体系

5.1 统一动效管理的背景
在前端开发中，动画不仅是锦上添花的“视觉糖”，更是交互体验的重要组成部分。动画能够：

引导用户关注：通过动画突出重要操作和状态变化

反馈操作结果：点击、悬停等交互需要视觉反馈

缓解等待焦虑：加载动画可以减少用户等待的焦虑感

提升产品质感：流畅的动画让产品更加专业

但当项目变大、组件增多后，可能出现以下问题：

同样的淡入淡出，在不同组件中表现不一致

想调整动画速度，却要修改多个文件

动画样式难以复用、维护困难

动画性能问题难以统一优化

为解决这些问题，TinyVue 引入了一套基于 LESS + CSS 变量 的全新全局动效体系，实现集中配置与动态控制。

5.2 动效变量体系
所有动画相关参数集中在 /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-zoom-speed: 0.25s;
  --tv-motion-zoom-scale: 1.05;

  /* ========== 旋转类动效 ========== */
  --tv-motion-rotate-speed: 0.3s;
  --tv-motion-rotate-angle: 180deg;

  /* ========== 弹跳类动效 ========== */
  --tv-motion-bounce-speed: 0.5s;
  --tv-motion-bounce-distance: 10px;

  /* ========== 蚂蚁线（进度/加载） ========== */
  --tv-motion-ants-shift: 8px;
  --tv-motion-ants-speed: 0.8s;
}

修改任意变量即可影响全局动效表现，无需逐个组件修改。

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

packages/theme/src/motion/
├── fade.less       // 淡入淡出动效
├── slide.less      // 滑动动效
├── zoom.less       // 缩放动效
├── rotate.less     // 旋转动效
├── bounce.less     // 弹跳动效
├── ants.less       // 蚂蚁线动效（用于进度、加载状态）
├── index.less      // 汇总引入
└── README.md       // 动效使用文档

各类型动效文件内容示例：

// fade.less
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fade-in var(--tv-motion-fade-speed) ease;
}

.fade-out {
  animation: fade-out var(--tv-motion-fade-speed) ease;
}

5.4 动效命名规范
统一命名规则：{type}-{direction}-{state}，例如：

5.5 组件集成方式

5.6 动效使用示例

<template>
  <!-- 使用预设动效类 -->
  <div class="fade-in" v-if="visible">
    淡入显示的内容
  </div>

  <!-- 自定义动效参数 -->
  <div class="slide-left-in" style="--tv-motion-slide-speed: 0.6s">
    从左侧滑入，速度更慢
  </div>

  <!-- 在组件中使用 -->
  <tiny-dialog
    :visible.sync="dialogVisible"
    class="custom-dialog"
  >
    <!-- 对话框内容 -->
  </tiny-dialog>
</template>

<style>
.custom-dialog {
  --tv-motion-fade-speed: 0.5s;
  --tv-motion-zoom-scale: 1.02;
}
</style>

来源：
https://qeext.cn/