feat(theme): [transition] add global animation configuration scheme (LESS-based)

examples/sites/demos/pc/app/scroll-text/scroll-direction.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('文字滚动方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-direction')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
-  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'scroll-left')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'scroll-right')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'scroll-up')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'scroll-down')
 })

packages/theme/src/base/index.less

@@ -14,4 +14,5 @@
 @import './vars.less';
 // @import './old-theme.less';
 // @import './aurora-theme.less';
+// @import './motion-theme.less';
 @import './transition.less';

packages/theme/src/base/reset.less

@@ -12,21 +12,12 @@
 
 @import '../custom.less';
 @import './vars.less';
+@import '../motion/index.less';
 
 // .tiny-icon-loading 类名的动画效果。 它出现在多个组件中，故抽取到一起。
 .@{css-prefix-iconfont}-loading {
   line-height: 1;
-  animation: rotating 2s linear infinite;
-}
-
-@keyframes rotating {
-  0% {
-    transform: rotateZ(0deg);
-  }
-
-  100% {
-    transform: rotateZ(360deg);
-  }
+  animation: rotate-z var(--tv-motion-rotate-speed) linear infinite;
 }
 
 // 高亮节点

packages/theme/src/base/transition.less

@@ -2,6 +2,7 @@
 vue2的动画状态类：  v-enter       v-enter-to  v-leave      v-leave-to 以及 v-enter-active, v-leave-active
 vue3的动画状态类：  v-enter-from  v-enter-to  v-leave-from v-leave-to 以及 v-enter-active, v-leave-active
 */
+@import '../motion/index.less';
 
 .fade-in-linear-enter-active,
 .fade-in-linear-leave-active {
@@ -243,28 +244,3 @@ vue3的动画状态类：  v-enter-from  v-enter-to  v-leave-from v-leave-to 以
 .tiny-transition-alert-fade-leave-active {
   transition: opacity 0.3s ease-in;
 }
-
-// modal 的动画
-@keyframes modal-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes modal-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}

packages/theme/src/base/vars.less

@@ -522,4 +522,101 @@
   --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
   --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
   --tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色
+
+  /** 10. 动画变量 **/
+  /* ---------- 蚂蚁线 (ants.less) ---------- */
+  --tv-motion-ants-shift: 8px; /* 单次偏移距离 */
+  --tv-motion-ants-speed: 0.8s; /* 动画时长 */
+
+  /* ---------- 箭头移动 (arrow.less) ---------- */
+  --tv-motion-arrow-offset: 16px; /* 箭头最终位移 */
+  --tv-motion-arrow-left-init: -17px; /* 左侧初始位置 */
+  --tv-motion-arrow-left-mid: -13px; /* 左侧 pulse 中间位置 */
+  --tv-motion-arrow-right-init: -17px; /* 右侧初始位置 */
+  --tv-motion-arrow-right-mid: -13px; /* 右侧 pulse 中间位置 */
+  --tv-motion-arrow-speed: 0.3s; /* 箭头动画时长 */
+
+  /* ---------- 缩放弹入 (bounce.less) ---------- */
+  --tv-motion-bounce-scale-min: 0; /* 初始缩小比例 */
+  --tv-motion-bounce-scale-mid: 1.2; /* 弹入/弹出中间比例 */
+  --tv-motion-bounce-scale-max: 1; /* 最终展开比例 */
+  --tv-motion-bounce-speed: 0.3s; /* 动画时长 */
+
+  /* ---------- 淡入淡出 (fade.less) ---------- */
+  --tv-motion-fade-offset-x: 20px; /* X轴位移 */
+  --tv-motion-fade-offset-y: 20px; /* Y轴位移 */
+  --tv-motion-fade-speed: 0.3s; /* 动画时长 */
+
+  /* ---------- 加载动画 (loading.less) ---------- */
+  /* 骨架屏 */
+  --tv-motion-skeleton-speed: 1.5s; /* 骨架屏动画时长 */
+  --tv-motion-skeleton-background-offset: -20%; /* 背景流动偏移 */
+  /* 网格加载 */
+  --tv-motion-grid-loading-speed: 1.04s; /* 网格加载动画时长 */
+  --tv-motion-grid-loading-opacity: 0.1; /* 网格加载最终透明度 */
+
+  /* ---------- 进度条背景 (progress.less) ---------- */
+  --tv-motion-progress-background-shift: 32px; /* 背景流动位移 */
+  --tv-motion-progress-speed: 1s; /* 动画时长 */
+
+  /* ---------- 通用旋转 (rotate.less) ---------- */
+  --tv-motion-rotate-speed: 2s; /* 旋转动画时长 */
+  --tv-motion-rotate-degrees: 360deg; /* 旋转角度 */
+
+  /* ---------- 滚动文字 (scroll.less) ---------- */
+  --tv-motion-scroll-speed: 3s; /* 动画时长 */
+  --tv-motion-scroll-offset-x: 100%; /* X轴初始位移 */
+  --tv-motion-scroll-offset-x-end: -100%; /* X轴结束位移 */
+  --tv-motion-scroll-offset-y: 100%; /* Y轴初始位移 */
+  --tv-motion-scroll-offset-y-end: -100%; /* Y轴结束位移 */
+
+  /* ---------- 光泽闪烁 (shine.less) ---------- */
+  --tv-motion-shine-speed: 1s; /* 动画时长 */
+  --tv-motion-shine-offset-x: -12px; /* X轴背景位移 */
+  --tv-motion-shine-offset-y: -12px; /* Y轴背景位移 */
+
+  /* ---------- 滑动方向 (slide.less) ---------- */
+  --tv-motion-slide-speed: 0.3s; /* 动画时长 */
+  --tv-motion-slide-opacity-mid: 0.6; /* 中间透明度 */
+  /* X轴偏移 */
+  --tv-motion-slide-offset-left: -100%; /* 左侧初始位移 */
+  --tv-motion-slide-offset-left-mid: -50%; /* 左侧中间位移 */
+  --tv-motion-slide-offset-right: 100%; /* 右侧初始位移 */
+  --tv-motion-slide-offset-right-mid: 50%; /* 右侧中间位移 */
+  /* Y轴偏移 */
+  --tv-motion-slide-offset-top: -100%; /* 顶部初始位移 */
+  --tv-motion-slide-offset-top-mid: -50%; /* 顶部中间位移 */
+  --tv-motion-slide-offset-bottom: 100%; /* 底部初始位移 */
+  --tv-motion-slide-offset-bottom-mid: 50%; /* 底部中间位移 */
+
+  /* ---------- 描边循环 (stroke.less) ---------- */
+  --tv-motion-stroke-speed: 1.5s; /* 动画时长 */
+  --tv-motion-stroke-dasharray-0: 1, 200; /* 初始 dasharray */
+  --tv-motion-stroke-dasharray-50: 90, 150; /* 中间 dasharray */
+  --tv-motion-stroke-dasharray-100: 90, 150; /* 结束 dasharray */
+  --tv-motion-stroke-offset-0: 0; /* 初始 dashoffset */
+  --tv-motion-stroke-offset-50: -40px; /* 中间 dashoffset */
+  --tv-motion-stroke-offset-100: -120px; /* 结束 dashoffset */
+  --tv-motion-stroke-offset-reverse-50: 40px; /* 反向中间 dashoffset */
+  --tv-motion-stroke-offset-reverse-100: 120px; /* 反向结束 dashoffset */
+
+  /* ---------- Tab切换 (tab.less) ---------- */
+  --tv-motion-tab-speed: 0.3s; /* 动画时长 */
+  --tv-motion-tab-opacity-start: 0; /* 初始透明度 */
+  --tv-motion-tab-opacity-end: 1; /* 结束透明度 */
+  --tv-motion-tab-offset-x-start: 100%; /* X轴初始位移 */
+  --tv-motion-tab-offset-x-end: 0; /* X轴结束位移 */
+  --tv-motion-tab-offset-x-start-left: -100%; /* 左侧初始位移 */
+  --tv-motion-tab-offset-y-start: 100%; /* Y轴初始位移 */
+  --tv-motion-tab-offset-y-start-down: -100%; /* 下方初始位移 */
+  --tv-motion-tab-offset-y-end: 0; /* Y轴结束位移 */
+
+  /* ---------- 弹出缩放 (zoom.less) ---------- */
+  --tv-motion-scale-speed: 0.3s; /* 动画时长 */
+  --tv-motion-scale-start: 0; /* 初始缩放 */
+  --tv-motion-scale-mid: 0.5; /* 中间缩放 */
+  --tv-motion-scale-end: 1; /* 结束缩放 */
+  --tv-motion-scale-opacity-start: 0; /* 初始透明度 */
+  --tv-motion-scale-opacity-mid: 0.5; /* 中间透明度 */
+  --tv-motion-scale-opacity-end: 1; /* 结束透明度 */
 }

packages/theme/src/chart-core/index.less

@@ -12,6 +12,7 @@
 
 @import '../custom.less';
 @import './vars.less';
+@import '../motion/index.less';
 
 @chart-prefix-cls: ~'@{css-prefix}chart';
 
@@ -51,11 +52,11 @@
     .circular {
       width: 42px;
       height: 42px;
-      animation: loading-rotate 2s linear infinite;
+      animation: rotate-spin var(--tv-motion-rotate-speed) linear infinite;
     }
 
     .path {
-      animation: loading-dash 1.5s ease-in-out infinite;
+      animation: stroke-dash-loop var(--tv-motion-stroke-speed) ease-in-out infinite;
       stroke-dasharray: 90, 150;
       stroke-dashoffset: 0;
       stroke-width: 2;
@@ -68,26 +69,3 @@
     filter: blur(1px);
   }
 }
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loading-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -40px;
-  }
-
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -120px;
-  }
-}

packages/theme/src/dialog-box/index.less

@@ -12,6 +12,7 @@
 
 @import '../custom.less';
 @import './vars.less';
+@import '../motion/index.less';
 
 @dialog-box-prefix-cls: ~'@{css-prefix}dialog-box';
 
@@ -209,118 +210,34 @@
 }
 
 .v-modal-enter {
-  animation: v-modal-in 0.2s ease;
+  animation: fade-in var(--tv-motion-fade-speed) ease;
 }
 
 .v-modal-leave {
-  animation: v-modal-out 0.2s ease forwards;
-}
-
-@keyframes v-modal-in {
-  0% {
-    opacity: 0;
-  }
-}
-
-@keyframes v-modal-out {
-  100% {
-    opacity: 0;
-  }
+  animation: fade-out var(--tv-motion-fade-speed) ease forwards;
 }
 
 .dialog-slideRight-enter-active {
-  animation: slideRight 0.5s ease-in forwards;
+  animation: slide-right-in var(--tv-motion-slide-speed) ease-in forwards;
 }
 
 .dialog-slideRight-leave-active {
-  animation: slideRightout 0.5s ease-in forwards;
-}
-
-@keyframes slideRight {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  50% {
-    opacity: 0.6;
-    transform: translateX(50%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-@keyframes slideRightout {
-  0% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-
-  50% {
-    opacity: 0.6;
-    transform: translateX(50%);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
+  animation: slide-right-out var(--tv-motion-slide-speed) ease-in forwards;
 }
 
 .dialog-fade-enter-active {
-  animation: dialog-fade-in 0.3s;
+  animation: fade-in-up var(--tv-motion-fade-speed);
 }
 
 .dialog-fade-leave-active {
   .@{dialog-box-prefix-cls} {
-    animation: dialog-fade-out 3s;
-  }
-  animation: dialog-fade-out 0.3s;
-}
-
-@keyframes dialog-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
+    animation: fade-out-up var(--tv-motion-fade-speed);
   }
+  animation: fade-out-up var(--tv-motion-fade-speed);
 }
 
 .enlarge-enter-active {
-  animation: enlarge-in 350ms linear;
-}
-
-@keyframes enlarge-in {
-  0% {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(0.5);
-  }
-
-  100% {
-    transform: scale(1);
-  }
+  animation: enlarge-in var(--tv-motion-scale-speed) linear;
 }
 
 @media (max-width: 480px) {