该技能是一个用于动态图形设计的标准化编排库,核心是把常见的动效归纳为 10 个“规范动作”,并为每个动作预设调好的物理参数与缓动方程,便于在界面动画中复用。
主要能力(动作目录):
- Rise:卡片淡入并上移 30 到 40 像素,缓动 power3.out,时长 0.60s,用于引入主要 UI 卡片。
- Pop:从 0.6 缩放至 1.0 并带轻微过冲,缓动 back.out(2.5),时长 0.45s,用于成功徽章、图标、贴纸。
- Count-up:数字从零平滑滚动到目标值,缓动 power2.out,时长 1.80s,用于财务指标与计数器。
- Checklist tick:条目依次出现并带绿色勾选,缓动 power2.out,每项错开 0.35s,用于功能核对清单。
- Typewriter:句子逐字符打出,缓动 steps(n),每字符 0.04s,用于搜索输入与终端日志。
- Slide-in:元素从视口边缘水平滑入,缓动 power4.out,时长 0.40s,用于通知与侧边面板。
- Blur-in:元素从 20px 模糊变为清晰,缓动 power2.inOut,时长 0.50s,用于背景切换与标题。
- Punch-in:整个视口突然放大 15%,缓动 expo.out,时长 0.25s,用于高潮短句与关键引语。
- Reframe:整帧缩小为卡片,同时新元素升起,缓动 power3.inOut,时长 0.80s,用于多步骤功能演示。
- Bar fill:水平进度条从 0 填充到 100%,缓动 power1.inOut,时长 1.20s,用于加载条与分析统计。
使用方式:资料说明可通过组合动作建立视觉层级,主视觉元素用 Pop 或 Punch-in 吸引注意,次级元数据用 Rise 或 Slide-in,背景氛围元素用 Blur-in 或缓慢持续漂移。代码示例与配方见 references/gsap-recipes.md,其中提供可直接运行的 GSAP 时间线代码片段。
适用场景:UI 卡片与图标动效、数据指标展示、清单核对、文本输入与日志呈现、通知与侧边面板、标题与背景过渡、重点语句强调、功能演示分镜、加载与统计进度展示。
限制:资料仅给出动作参数与配方文件位置,未提供安装步骤、依赖版本、浏览器兼容性、性能预算、无障碍支持及授权收费信息,这些暂未提供。