玻璃透镜

为什么有效

边缘的桶形扭曲比镜内放大更能说明这是一块玻璃。转场的工具就是被介绍的材质本身：镜头推进到玻璃填满画面的那一帧，背景从黑翻成浅灰白，翻转藏在遮满画面的帧里。

参数

时长

全片 10.8s。手机 0–0.9s 升起。标签栏透镜：1.45s 出现，1.6–2.3s 从 Home 滑到 Library，2.25s 松开。3.0s 点加号，3.1–3.75s 弹窗升起。光标放大镜：4.05s 出现，4.45–4.85s 与 4.85–5.25s 两次跳行，5.3s 消失。开关：5.45s 出现玻璃，5.55–5.95s 拖动，6.0s 消失。6.05s 点创建，6.2–6.95s 正在播放升起。进度条旋钮：7.2s 出现，7.35–8.45s 拖动。8.1–8.8s 镜头推近，8.6–8.95s 交叉淡入字标，8.7–10.8s 末尾透镜滑过字标

缓动

出现 expo.out 0.28s，放大倍率 expo.out 0.3–0.35s，透镜移动 expo.out（标签栏 0.7s，光标每次跳行 0.4s，开关 0.4s，进度条 1.1s），松开 power2.out 0.26s，镜头移动 expo.out 0.7–0.95s 中间夹两段 none；末尾透镜 none 匀速 2.1s。玻璃和它下方的内容副本在同一个 tween 里移动，缓动和时长相同

镜头

移动的是缩放后的舞台，透镜本身不推近：缩放 1.06 到 1.09，然后推到 1.75 对准标签栏（0.95s），1.8 保持，1.15 看弹窗（2.45s），2.3 看光标所在行（3.6s），2.9 看开关（5.1s），1.1 拉回（6.0s），2.2 看进度条（6.95s），6.0 推进旋钮（8.1s），每段 0.7–0.95s expo.out，以即将变成玻璃的控件为中心

主体

玻璃是同一内容的放大副本，裁成胶囊并加 saturate(1.2) contrast(1.03)：标签栏 72×56 放大 1.55 倍，光标放大镜 132×58 放大 1.7 倍，开关 64×40 放大 1.5 倍，进度条旋钮 64×38 放大 1.6 倍，字标透镜 440×262 放大 1.28 倍。每个从缩放 0.7–0.85 弹到 1.0–1.12；控件静止时是实心样式，只在被拖动时变成玻璃

同步

玻璃和它的内容副本在同一个 tween 里反向位移。到达时（2.25s）标签颜色、选中胶囊、屏幕切换和透镜松开发生在同一帧。开关滑块、轨道颜色（5.65s 变绿 #34c759）和透镜一起移动；进度条旋钮、填充条以及已播放和剩余时间（0:41 到 2:41，-3:02 到 -1:02，共 7 档）跟随透镜

风格

浅灰径向渐变背景（#f6f7f9 到 #dddfe5）加 12% 边缘暗角；深色手机机身。玻璃有白色顶部高光、1.2px 圆锥渐变边框（粉、琥珀、绿、蓝、紫）、左粉右蓝各 3px 内侧边缘阴影和柔和投影。末尾字标 Inter 600，250px，字距 -0.05em，#101114

提示词

常见说法

• 透明玻璃片放大下面的文字
• 放大镜跟着光标扫过一行字
• 玻璃按钮滑过去时下面的内容被放大变形

容易混淆

• 玻璃水滴分离水滴分离展示玻璃的形变与断开；玻璃透镜展示玻璃对下方内容的折射和放大
• 同位替换同位替换在同一锚点换成另一物体；玻璃透镜用透镜铺满画面的一帧完成场景翻转