超大光标——视觉牵引者
一个刻意放大的 macOS 风格指针,作为可见主角在画面中穿行:从屏幕外进入,引导观众视线至下一个兴趣点,点击触发下一动作,然后离开。已在多个发布影片中经过生产验证。
存在的理由。 大型光标运动是发布视频中成本最低的高收益运动源之一:一个元素,仅需变换补间,即可(1)在原本死板的场景中将视线拉过屏幕,(2)为变形/过渡提供因果触发(“是那个点击造成的”),以及(3)在启动新场景或复杂动画序列时,将视线从静止状态中拉出来。越大越好——实际尺寸的光标在视频缩放后会消失。
尺寸与外观(工作室惯例)
- 全屏场景:
7cqw(在 1920 下约为 134px)。在模拟/小尺寸变体中:4.6–5.5cqw。永远不要更小。 - 所有地方都使用一个 SVG 箭头几何形状。两种经过验证的填充色——白色主体 + 黑色描边,或黑色主体(
#1c1c1c)+ 白色描边(1.4px)。根据场景对比度选择,并在整部影片中保持恒定。 - 品牌主题光标(王牌选择)。 macOS 箭头是默认选项,而非强制要求。当主题品牌具有可识别的光标身份时——协作设计工具中带有名称标签的彩色多人箭头(Figma 风格)、创意套件的精确定位十字线、或独特的产品指针——则改为使用那个光标:对于任何了解该产品的人来说,这是即刻可识别的品牌语言。同样的法则不变(超大尺寸、物理进出、尖端定位、点击触发),且带名称标签的变体作为一个刚性整体移动(标签跟在箭头后面)。仅当该主题真正可被引用时采用;如果没人认识那个光标,那它只是个奇怪的箭头——退回使用 macOS。
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none,z-index高于所有场景内容,will-change: transform。
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* 屏幕外底部——静止姿态就是屏幕外 */
width: 7cqw;
height: 7cqw;
z-index: 20;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
pointer-events: none;
will-change: transform;
}
入场法则——物理性的,从不暴露
光标总是从屏幕外进入(标准:从下方,top:115–120%)并以一次减速滑行到达其第一个目标。必须让人觉得“它走进了房间”。永远不要通过透明度渐入将其淡入到静止位置,也不要通过遮罩来揭示它——这会被视为故障(一个真实的、反复观察到的失败模式)。
- 默认路径:沿 Y 轴直线向上到达目标——没有分段的对角线。当对角线的确符合故事时(例如朝向偏轴目标入场),它可以被使用,但无论哪种方式,都只是一条连续的向量。
duration: 0.4–0.92s,ease: power3.out,在 fromTo 中使用immediateRender: false。
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
尖端定位与点击轻触
热区是箭头的尖端,而非盒子中心。将尖端落在目标中心,并将所有按压缩放以尖端为轴心:transformOrigin: '21% 14%'(对于在 24 单元 viewBox 中的工作室箭头路径)。
点击 = 非对称压缩/展开(1:2 比率感觉像真实点击):
tl.to(cursor, { scale: 0.84, duration: 0.1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
cursor,
{ scale: 1, duration: 0.22, ease: "power2.out", transformOrigin: "21% 14%" },
t + 0.1,
);
目标的反应是独立、并行的补间(按钮:从同一 t 开始,scale: 0.94 + 按压颜色/阴影)。光标单独点击(例如聚焦文本输入)则没有目标反应。在目标侧配合使用 cursor-click-ripple / press-release-spring。
点击触发下一节拍
永远不要让变形、打字效果、窗口变换或场景定义动画简单地“开始”。将光标停在触发器上,让点击在同一帧内引起该动作:
- 点击 ▸ 菜单/子菜单级联,切换翻转
- 点击 ▸ 在输入框中开始打字
- 点击 ▸ 创作器变形收缩/窗口缩小
- 点击 ▸ Logo 点火/飞行启动
- 点击 ▸ 产品模拟中的播放状态翻转 + UI 生命唤醒
在光标不“拥有”的长时间节拍中(打字、旁白),光标移向一边(0.5–0.9s,power2.out)——绝不死冻在动作之上,也绝不无意义地晃动。
退出法则与跨场景交接
两种认可的退出方式——均为物理方式,绝不在原地进行透明度渐隐:
- 离开画面:以
power2.in加速离开最近的边缘(left:'118%',left:'-12%',或top:'116%'),0.5–0.7s。 - 截弯取直交接:在硬切换前的最后约 0.3 秒,光标开始加速(
power2.in)朝向下一场景的第一个点击点,覆盖该路径的前约 1/3;下一个合成使用gsap.set将光标置于交接姿态,并以匹配速度继续使用power2.out。光标本身成为缝合画面间隙的载体元素:
// 场景 A,最后 0.3 秒——开始旅程:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// 场景 B,t=0——以匹配速度完成:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
检查清单
- 全屏 ≥ 7cqw(模拟场景内 4.6–5.5cqw)——不确定时,越大越好
- 从屏幕外沿一条连续向量入场(无淡出/遮罩揭示)
- 尖端落在目标中心;按压以
transformOrigin: '21% 14%'为轴心 - 每次点击都在同一帧内触发某件事
- 在光标不拥有的节拍中移向一边;零无意义晃动
- 物理退出(离开画面或截弯取直交接)——无原地淡出