线性蒙版做分屏：左右分屏、上下分屏与产品对比展示

一、线性蒙版的数学本质与视觉认知基础

1.1 什么是线性蒙版：从 Alpha 通道说起

在数字图像中，每个像素通常由 RGB 三通道描述颜色，而 Alpha 通道描述透明度。蒙版（Mask）本质上是作用于 Alpha 通道的一张灰度图：白色（255）表示完全显示，黑色（0）表示完全隐藏，灰色则表示半透明。线性蒙版，就是灰度值沿某一方向呈线性变化的蒙版——它可以用一个简单的线性函数描述：

alpha(x, y) = clamp( ( (x - x0) * cosθ + (y - y0) * sinθ ) / W + 0.5, 0, 1 )

其中 (x0, y0) 是过渡带中心，θ 是过渡方向角，W 是过渡带宽度。当 θ=0° 时，蒙版沿水平方向变化，得到左右分屏；当 θ=90° 时，沿垂直方向变化，得到上下分屏。这个公式看似简单，却是几乎所有主流软件"线性渐变蒙版"的底层逻辑。

本文评述：很多教程把线性蒙版当作"拉一条渐变"的纯操作技巧，但理解其线性函数本质后，你会发现过渡带宽度 W、方向角 θ、中心点位置三个参数就足以覆盖 90% 的分屏需求。把操作问题转化为参数问题，是后续批量化和自动化的前提。

1.2 硬边分屏 vs 软边分屏：视觉认知的取舍

分屏的边界处理有两种基本策略：硬边（Hard Edge）和软边（Soft Edge）。硬边分屏即两幅画面直接拼接，边界清晰锐利；软边分屏则通过线性蒙版的过渡带让两幅画面平滑融合。二者并非优劣之分，而是服务于不同的叙事目的。

根据视觉搜索理论（Visual Search Theory），人眼在硬边分屏中能更快定位到边界并分别处理两侧信息，而在软边分屏中则倾向于将画面作为一个整体感知。这意味着：需要观众做"对比判断"时用硬边，需要观众做"整体感受"时用软边。这一判断在广告心理学研究中有实证支持（参见参考文献 [12][23]）。

1.3 分屏的历史脉络与技术演进

分屏并非数字时代的产物。早在 1900 年代，电影先驱就尝试过多次曝光与遮片（Matte）技术实现画面并置。1960—70 年代，Split Screen 在《伍德斯托克》《谜中谜》等影片中被大量使用。进入数字时代后，非线性编辑软件让分屏从"特技"变成"常规操作"。而线性蒙版的引入，则让分屏从"拼接"走向"融合"。

近三年，随着 AI 蒙版分割（如 SAM、SAM 2）和可微分渲染（Differentiable Rendering）的发展，分屏技术正在从"手工拉渐变"向"语义驱动自动分屏"演进。这一趋势将在第八章详细展开。

二、左右分屏：从硬切到软过渡的完整实现

2.1 左右分屏的构图逻辑

左右分屏是最常见的分屏形式，原因在于人眼是水平排列的，水平方向的视觉扫描更符合自然阅读习惯（尤其在从左到右的语系中）。左右分屏天然适合表达"对比"、"并列"、"前后"等关系。

构图上有三个关键参数需要确定：分割比例、过渡带宽度、视觉重心。分割比例常见的有 1:1（对等）、黄金比 1:1.618（主次分明）、2:1 或 3:1（强调一侧）。过渡带宽度则决定了软边的"软"到什么程度。

2.2 Photoshop 实现：图层蒙版 + 线性渐变

最基础的操作路径如下：

1. 将两张素材分别置于两个图层，上层为右侧画面，下层为左侧画面。
2. 选中上层图层，点击图层面板底部"添加图层蒙版"按钮。
3. 选择渐变工具（G），模式设为"线性渐变"，前景色黑、背景色白。
4. 在蒙版上从右向左拖动，即可得到左侧显示下层、右侧显示上层的软边分屏。

如果需要精确控制过渡带宽度，可以在拖动时按住 Shift 键锁定水平方向，并通过信息面板观察起点终点坐标。过渡带宽度 = 拖动距离，这是最直观的参数控制方式。

笔者认为：PS 图层蒙版的最大价值在于"非破坏性"——你随时可以重新拉渐变、调整过渡带，而不影响原始像素。很多新手习惯用橡皮擦或直接裁剪，这在需要反复修改的商业项目中是灾难性的。

2.3 After Effects 实现：蒙版 + 线性擦除

在 AE 中实现左右分屏有两种主流方式：

方式一：线性擦除（Linear Wipe）。给上层图层添加"线性擦除"效果，设置擦除角度为 0° 或 180°，调整"过渡完成"百分比和"擦除宽度"。"擦除宽度"就是过渡带宽度，这是最直接对应线性蒙版数学模型的参数。

方式二：蒙版 + 蒙版羽化。用矩形工具在上层图层画一个覆盖右半部分的蒙版，然后增大蒙版羽化值（Mask Feather）。这种方式更灵活，因为蒙版形状可以任意编辑。

// AE 表达式：让过渡带随时间自动扫描
// 添加到"线性擦除"的"过渡完成"属性上
linear(time, 0, 2, 0, 100)

这段表达式让过渡带在 2 秒内从 0% 扫到 100%，实现"擦除式"分屏动画。这是产品对比视频中非常常用的手法。

2.4 Premiere Pro 实现：裁剪 + 蒙版

PR 中实现左右分屏，最常用的是"裁剪（Crop）"效果配合"蒙版"。将两个素材叠放，上层素材添加裁剪效果裁掉左半部分，再在"不透明度"下绘制蒙版并设置羽化。PR 2023 之后的版本在效果控件中直接提供了蒙版羽化参数，操作更顺手。

需要提醒的是，PR 的"裁剪"是硬边裁剪，如果只做硬边分屏，裁剪就够了；如果要软边，必须叠加蒙版羽化。很多教程把这两步混为一谈，导致初学者做不出软边效果。

2.5 参数建议与常见问题

常见问题：过渡带过窄会导致"脏边"（两侧画面颜色混合产生灰带），过宽则会让两侧画面都显得模糊。经验法则是过渡带宽度不超过画面宽度的 15%。

三、上下分屏：构图平衡与视觉动线设计

3.1 上下分屏的适用场景

上下分屏在移动端内容中尤为常见，因为手机屏幕本身就是竖向的。它适合表达"上下"、"天地"、"前后"、"因果"等关系。典型场景包括：教程类视频（上方演示、下方讲解）、产品展示（上方产品、下方参数）、Vlog（上方风景、下方人物）。

与左右分屏相比，上下分屏的视觉动线更符合"从上到下"的阅读顺序，因此在信息层级表达上更有优势——上方通常是"主"，下方是"辅"。

3.2 实现要点：方向角 θ=90°

回到第一章的数学公式，上下分屏只需将方向角 θ 设为 90°。在软件操作层面，就是把渐变方向从水平改为垂直。

在 AE 的"线性擦除"中，将"擦除角度"设为 90° 或 -90°；在 PS 的渐变工具中，按住 Shift 键垂直拖动；在 PR 的蒙版中，绘制上下方向的渐变。核心逻辑完全一致。

3.3 视觉动线与平衡

上下分屏最容易犯的错误是"上重下轻"或"上轻下重"。由于人眼习惯从上往下看，上方画面如果过于复杂，会让观众"卡"在上半部分，忽略下方内容。因此建议：

• 上方画面保持简洁，主体明确；
• 下方画面可以承载更多信息，但要有清晰的视觉焦点；
• 过渡带位置通常放在画面 40%—60% 高度处，避免正中间（正中间会显得呆板）。

本文评述：三分法构图在上下分屏中同样适用。把过渡带放在画面 1/3 或 2/3 处，往往比放在正中间更耐看。这不是玄学，而是因为非对称构图能产生视觉张力，引导视线流动。

3.4 移动端适配注意事项

在 9:16 竖屏中做上下分屏，过渡带宽度需要比横屏更窄，否则会挤压两侧内容空间。同时要注意安全区域（Safe Area），避免过渡带落在平台 UI 遮挡区域（如抖音底部信息栏、Instagram 顶部状态栏）。

四、产品对比展示：分屏的营销与信息传达逻辑

4.1 产品对比的三种分屏范式

产品对比展示是分屏技术商业价值最高的应用场景。根据信息组织方式，可以归纳为三种范式：

1. 并列式（Side-by-Side）：左右或上下并置两个产品，强调"对比"。适合 A/B 对比、新旧对比。
2. 擦除式（Wipe）：通过过渡带移动，让一个产品"变成"另一个产品，强调"变化"。适合效果演示、前后对比。
3. 叠加式（Overlay）：两个产品半透明叠加，强调"融合"或"差异点"。适合参数对比、细节对比。

4.2 擦除式对比的实现细节

擦除式是产品对比中最有冲击力的手法。实现上，只需让线性蒙版的过渡带从画面一侧移动到另一侧即可。关键参数是移动速度：太快看不清，太慢拖沓。根据眼动研究，观众需要约 0.8—1.2 秒来识别一个画面变化，因此擦除动画建议控制在 1.5—2.5 秒。

// AE 表达式：缓入缓出的擦除动画
// 添加到"过渡完成"属性
ease(time, 0, 2, 0, 100)

使用 ease() 而非 linear() 能让动画更自然。线性运动在视觉上会显得机械，而缓入缓出符合真实世界的运动规律。

4.3 对比展示的信息设计原则

分屏只是形式，信息设计才是核心。产品对比展示要遵循三条原则：

• 对比维度单一化：一次只对比一个维度（如"亮度"或"续航"），多个维度应分多次展示。
• 视觉权重对等：两侧产品的画面占比、亮度、饱和度应尽量接近，避免一侧"抢戏"。
• 标注清晰：在过渡带附近添加文字标注（如"产品 A"、"产品 B"），降低观众认知负担。

笔者认为：很多产品对比视频失败的原因不是分屏做得不好，而是对比维度不清晰。观众看完不知道"到底哪个更好"。分屏是放大器，它放大的是信息本身——信息设计做不好，分屏只会让混乱更明显。

4.4 电商场景的落地案例

在电商详情页中，分屏对比常用于"使用前/使用后"、"竞品对比"、"不同色号对比"。淘宝、京东等平台的主图视频规范中，通常要求对比画面占比不低于 60%，过渡带宽度不超过画面 10%。这些平台规范本质上是把线性蒙版的参数标准化了。

五、跨工具链实现：PS/AE/PR/达芬奇/Figma/Web

5.1 各工具能力对比

5.2 Web 端实现：CSS mask-image

Web 端做分屏，最现代的方式是 CSS 的 mask-image 属性：

.split-right {
  -webkit-mask-image: linear-gradient(to right, transparent 40%, black 60%);
  mask-image: linear-gradient(to right, transparent 40%, black 60%);
}

这段代码让元素在水平方向 40%—60% 区间内从透明过渡到不透明，形成软边分屏。相比传统的 clip-path（只能硬边裁剪），mask-image 支持渐变，是真正意义上的"线性蒙版"。

浏览器兼容性方面，mask-image 在 Chrome 120+、Safari 15.4+、Firefox 53+ 均已支持，可以放心使用（数据来源：Can I Use，2025 年 3 月查询）。

5.3 Python + OpenCV 实现

对于需要批量处理或集成到自动化流水线的场景，Python 是更好的选择：

import cv2
import numpy as np

def linear_split(img_a, img_b, direction='horizontal', center=0.5, width=0.1):
    h, w = img_a.shape[:2]
    if direction == 'horizontal':
        x = np.linspace(0, 1, w)
        mask = np.clip((x - (center - width/2)) / width, 0, 1)
        mask = np.tile(mask, (h, 1))
    else:
        y = np.linspace(0, 1, h)
        mask = np.clip((y - (center - width/2)) / width, 0, 1)
        mask = np.tile(mask[:, None], (1, w))
    mask = mask[..., None]
    return (img_a * (1 - mask) + img_b * mask).astype(np.uint8)

这段代码完整实现了第一章的数学公式，可以直接用于批量分屏生成。参数 center 控制过渡带中心位置，width 控制过渡带宽度。

5.4 DaVinci Resolve Fusion 节点实现

在 Fusion 中，使用 Background 节点生成渐变，再通过 Merge 节点的 Effect Mask 输入连接，即可实现线性蒙版分屏。Fusion 的节点化流程虽然学习曲线陡，但一旦搭建好模板，复用性极强。

六、工程化流水线：批量分屏与自动化脚本

6.1 为什么需要工程化

当你需要为 100 个产品生成对比图，或者为 50 条视频添加统一风格的分屏片头时，手工操作是不可接受的。工程化的核心是把"操作"转化为"参数"，把"参数"转化为"配置"，把"配置"转化为"脚本"。

本文评述：很多设计师排斥脚本，觉得"写代码不是设计师的活"。但事实上，掌握基础的 Python 或 AE 表达式，能让重复性工作效率提升 10 倍以上。这不是取代设计能力，而是把设计师从机械劳动中解放出来。

6.2 批量分屏脚本设计

一个典型的批量分屏脚本包含四个模块：

1. 素材读取模块：从指定目录读取图片/视频，按命名规则配对。
2. 参数配置模块：从 JSON/YAML 读取分屏参数（方向、比例、过渡带宽度）。
3. 合成模块：调用 OpenCV 或 FFmpeg 执行分屏。
4. 输出模块：按规范命名并保存，生成处理日志。

# config.yaml 示例
split:
  direction: horizontal
  ratio: 0.5
  transition_width: 0.08
  output_format: jpg
  quality: 95

6.3 FFmpeg 视频分屏方案

对于视频，FFmpeg 是最高效的工具。以下是左右分屏的 FFmpeg 命令：

ffmpeg -i left.mp4 -i right.mp4 -filter_complex \
"[0:v]crop=iw/2:ih:0:0[l];[1:v]crop=iw/2:ih:iw/2:0[r];[l][r]hstack" \
output.mp4

这是硬边分屏。如果要软边，需要引入 alphaextract 和 blend 滤镜，复杂度会显著上升。实践中，软边分屏更推荐在 AE 或 DaVinci 中完成，FFmpeg 更适合硬边批量处理。

6.4 模板化与设计系统

在团队协作中，建议把分屏参数固化为"设计系统"的一部分：定义 3—5 套标准分屏模板（如"1:1 硬边"、"黄金比软边"、"擦除式"），所有项目统一调用。这样既能保证视觉一致性，又能降低沟通成本。

七、性能对比、常见坑与优化策略

7.1 各方案性能对比

注：以上为模拟测试数据，基于 16 核 CPU / 32GB 内存 / RTX 3060 环境，实际耗时因硬件和素材复杂度而异。

7.2 常见坑与解决方案

• 脏边问题：过渡带过窄导致两侧颜色混合产生灰带。解决：增大过渡带宽度，或改用硬边。
• 色彩空间不一致：两幅画面色彩空间不同（sRGB vs Adobe RGB），分屏后色差明显。解决：统一色彩空间后再合成。
• 分辨率不匹配：两幅画面分辨率不同，缩放后清晰度下降。解决：统一到较高分辨率再合成。
• Alpha 通道丢失：某些格式（如 JPG）不支持 Alpha，导出后蒙版失效。解决：使用 PNG 或 TIFF。

7.3 优化策略

性能优化的核心是"减少不必要的计算"。例如，在 Python 实现中，用 NumPy 的向量化操作替代循环，速度可提升 50—100 倍；在 AE 中，用"预合成"减少重复渲染；在 FFmpeg 中，用硬件加速（-hwaccel cuda）提升编码速度。

八、前沿演进：AI 蒙版、可微分渲染与实时分屏

8.1 AI 语义蒙版：从"拉渐变"到"说需求"

2023 年 Meta 发布的 SAM（Segment Anything Model）和 2024 年的 SAM 2，让"语义分割"变得触手可及。在分屏场景中，这意味着你不再需要手动拉渐变，而是可以直接说"把人物分到左边，背景分到右边"，AI 自动生成蒙版。

Adobe 在 2024 年发布的 Firefly Video 模型中，已经集成了类似的语义蒙版能力。国内方面，字节跳动的"即梦"、快手的"可灵"也在探索 AI 驱动的智能分屏。

本文评述：AI 蒙版不会取代线性蒙版，而是与之互补。线性蒙版处理"几何分割"，AI 蒙版处理"语义分割"。未来的分屏工作流很可能是：AI 先做语义分割，再用线性蒙版做精细过渡。两者结合，才是完整方案。

8.2 可微分渲染与参数优化

可微分渲染（Differentiable Rendering）是近年图形学的重要方向。它允许通过梯度下降自动优化渲染参数。在分屏场景中，这意味着可以定义一个"视觉目标"（如"两侧亮度均衡"），然后让算法自动求解最优的过渡带宽度和位置。

相关研究如 Mitsuba 3（2022）和 Slang.D（2023）已经提供了可微分渲染的基础设施。虽然目前还主要停留在学术阶段，但工程化落地只是时间问题。

8.3 实时分屏与 WebGPU

WebGPU 在 2023 年正式登陆 Chrome，为浏览器端实时图形处理打开了新空间。基于 WebGPU 的实时分屏，可以在网页中实现 60fps 的软边分屏效果，且支持复杂的着色器逻辑。这对于在线视频编辑、实时直播分屏等场景意义重大。

8.4 前沿预判

综合来看，分屏技术未来三年的演进方向有三个：语义化（AI 理解内容自动分屏）、实时化（WebGPU/移动端实时渲染）、自适应化（根据屏幕尺寸、观看距离自动调整分屏参数）。线性蒙版作为底层数学工具，仍将是这些演进的基础。

九、总结与操作清单

9.1 核心结论

1. 线性蒙版的本质是一个线性函数，三个参数（方向、中心、宽度）覆盖绝大多数分屏需求。
2. 左右分屏适合对比，上下分屏适合层级，产品对比展示需遵循"单一维度、权重对等、标注清晰"三原则。
3. 工程化的关键是"操作→参数→配置→脚本"的转化。
4. AI 蒙版与线性蒙版互补，未来工作流是"语义分割 + 几何过渡"。

9.2 操作清单（Checklist）

9.3 延伸学习资源

• Adobe 官方教程：Photoshop 图层蒙版官方文档
• After Effects 线性擦除：Adobe 过渡效果文档
• MDN CSS mask-image：MDN mask-image
• OpenCV 图像混合：OpenCV 官方教程
• FFmpeg 滤镜文档：FFmpeg Filters
• SAM 2 项目主页：Meta SAM 2

十、参考文献与延伸资源