SuperAPI AI 工具集

orchestrated-sequences

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:编排序列用于协调多个元素在时间上的运动,适用于页面加载、仪表盘揭示、卡片网格、导航菜单展开、功能区块显现、数据可视化构建、引导步骤与列表填充等场景。

主要能力:以迪士尼动画原则指导编排,包括挤压拉伸(统一弹性风格)、预备动作(错峰准备)、舞台调度(清晰主次层级)、姿势到姿势(精确时间控制)、跟随动作(级联落位)、缓入缓出(共享缓动族)、弧线(互补路径)、次要动作、时间节奏、夸张(按比例强调)、扎实造型与吸引力。

使用方式:通过 CSS 过渡延迟实现错峰,例如线性错峰 .item:nth-child(n) { transition-delay: calc(var(--index) * 50ms); },也可用 nth-child 写出加速或减速错峰。缓动建议使用同一曲线不同时长,如 .primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); },序列曲线可用 cubic-bezier(0.22, 1, 0.36, 1)。实现模式为元素初始 opacity: 0 与 translateY(20px),加 .visible 后过渡到可见,并用 nth-child 或自定义属性设置延迟;复杂序列可用 JS 数组定义元素、延迟与时长。

限制:资料未提供具体平台、收费、价格或效果保证等信息,暂未提供。