用途:在滚动触发动画时使用,包括揭示效果、视差、吸顶头部、进度指示等任何与滚动联动的动效。该技能把迪士尼动画十二原则应用到滚动触发运动中。
主要能力与原则:挤压拉伸(快速滚动时轻微压缩,停止时回稳);预备(内容在完全揭示前应略微可见,从10%–20%可见度开始动画);舞台调度(按阅读顺序揭示,自上而下、自左而右);直进与姿态对姿态(定义明确的隐藏与揭示姿态,由滚动位置插值);跟随与重叠(错开揭示,首个元素在视口20%触发,下一个25%等);慢入慢出(滚动触发的揭示用ease-out,内容稳定落位);弧线(视差元素相对滚动沿曲线移动,垂直滚动时带轻微水平偏移);次要动作(淡入+滑动+缩放可组合成更丰富的揭示);夸张(滚动中保持细微,由用户控制节奏,让滚动速度成为夸张);扎实绘制(元素不应跳跃或瞬移,所有滚动位置平滑插值);吸引力(滚动动画应奖励探索而非阻碍)。
时间建议:淡入500ms、20%可见、ease-out;上滑600ms、15%可见、ease-out;视差实时、连续、linear;吸顶头部200ms、阈值触发、ease-out;进度条实时、连续、linear;区块揭示600ms、25%可见、ease-out。揭示动画400–600ms,视差实时1:1或分数比例,吸顶过渡200–300ms。
实现模式:提供滚动触发揭示的CSS类(.reveal与.visible)、纯CSS视差容器与慢速层、Intersection Observer模式(threshold 0.2,rootMargin '0px 0px -10% 0px'),以及基于animation-timeline: view()与animation-range: entry 0% entry 50%的滚动联动动画。
关键规则:绝不阻塞或劫持滚动;动画应在视口内完成,不依赖精确滚动位置;提前触发(10%–20%可见)以便在完全进入视野前完成;提供prefers-reduced-motion替代方案(即时揭示、无视差);在移动端测试,滚动动画须保持60fps流畅。
限制:资料未提供具体框架集成、浏览器兼容性细节或安装命令。