SuperAPI AI 工具集

large-500-800ms

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:该技能用于指导制作 500-800ms 的较大幅度动效,例如英雄区过渡、复杂揭示、讲述故事并值得用户注意的动画。资料指出,在这一时长区间动画会成为“事件”,用户会停下来观看,因此应保留给重要时刻。

主要能力:按迪士尼动画原则在大尺度下的完整表达给出建议,包括挤压与拉伸(20-30% 形变)、预备动作(150-200ms 蓄势)、舞台调度(多元素分层与时间偏移)、逐帧/姿势到姿势(复杂运动宜用姿势到姿势)、跟随动作(主动作完成后继续运动 100-200ms)、慢入慢出(强烈减速)、弧线、次要动作、时间(60fps 下 30-48 帧)、夸张、扎实的绘制(完整 3D 变换)与吸引力。

使用方式:资料给出缓动建议,如 transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);、transition: all 700ms cubic-bezier(0, 0.55, 0.45, 1);、transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);、transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);。实现模式示例为 .hero-reveal 使用 opacity 500ms ease-out 与 transform 700ms cubic-bezier(0.16, 1, 0.3, 1),并通过 transition-delay 0ms/100ms/200ms 实现标题、副标题、CTA 的错峰揭示。

适用场景:英雄图片或区块揭示、重要功能引入、成功或完成庆祝、引导流程、仪表盘数据加载、作品集展示、首次用户体验、重要状态变化。

限制与警示:若用户显得不耐烦,说明时长过长;若用于常见操作,会损害流程;若多个大动画相互竞争,舞台调度会失败。资料强调大动画是戏剧性时刻,应克制使用,每个大动画都应配得上其时长。