Croprix品牌手册v1.1.0

第 8 章 · Chapter 8

动效Motion

四档时长、三条缓动曲线；标志动效三段：叶脉线描画、叶标填充、字标淡入，共 1.2s；尊重 reduced-motion。

8.1时长与缓动Duration & easing

时长 token值用途
--cx-motion-duration-fast120ms颜色、描边、hover
--cx-motion-duration-base200ms按钮、开关、小位移
--cx-motion-duration-slow320ms面板展开、列表重排
--cx-motion-duration-enter400ms页面/对话框进入
--cx-motion-duration-logo-draw600ms标志动效第 1 段：叶脉线描画
--cx-motion-duration-logo-fill400ms标志动效第 2 段：叶标填充
--cx-motion-duration-logo-fade200ms标志动效第 3 段：字标淡入
缓动 token值用途
--cx-motion-ease-standardcubic-bezier(.2,0,0,1)状态变化、位移
--cx-motion-ease-entercubic-bezier(0,0,0,1)元素进入（减速）
--cx-motion-ease-exitcubic-bezier(.4,0,1,1)元素退出（加速）

缓动对比

standard · cubic-bezier(.2,0,0,1)
enter · cubic-bezier(0,0,0,1)
exit · cubic-bezier(.4,0,1,1)

8.2演示Demos

按钮 hover

背景 accent → accent-hover，base 200ms + ease.standard；按下位移 1px，fast 120ms。主按钮小字用 navy-950。

大按钮（≥ 18.66px 粗体）才允许白字。

面板进入 / 退出

进入：enter 400ms + ease.enter，透明度与 12px 上移；退出：base 200ms + ease.exit（面板、模态、toast 退出一律用 ease.exit）。

巡检 · 晨间

环境观测与作业记录回到管理环节，为后续生产安排提供依据。

8.3标志动效Logo motion

三段（decisions §5）：叶脉线沿路径 600ms 描画（logo-draw）→ 叶标 400ms 填充（logo-fill）→ 字标 200ms 淡入（logo-fade），总长 1.2s。只在片头、启动画面、加载态使用；不循环、不弹跳、不旋转。下面用叶脉线 + 叶标 + 字标示意节奏（正式交付物用标志 SVG 路径，见第 13 章与 assets/motion/）。

阶段时间token说明
1 · 叶脉线描画0 – 600ms--cx-motion-duration-logo-draw沿环形路径从叶基向外旋出；stroke-dashoffset 从路径长度归零；ease.standard
2 · 叶标填充600 – 1000ms--cx-motion-duration-logo-fill整片叶标透明度 0 → 1（遮罩显现）；ease.enter
3 · 字标淡入1000 – 1200ms--cx-motion-duration-logo-fadeNavy 字标透明度 0 → 1，不位移；ease.enter
reduced-motion0ms—直接显示完整标志，或 0ms 淡入

片头 = 1.2s 出标 + 0.8s 定格 = 2.0s；片尾 Navy 底定格 3s，标志下方网址字高 = 字标 x 高 0.6（decisions §6）。交付文件与用法见第 13 章 13.3 与 assets/motion/README.md。

8.4reduced-motionReduced motion

prefers-reduced-motion: reduce 时全部动效改为 0ms 淡入淡出：不位移、不描画、不缩放。手册的 CSS 已包含该媒体查询；也可以用下面的开关在本页模拟。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}