前言：一个“反直觉”的实践

如果你在剪映中做过蒙版动画，一定遇到过这样的困惑：

• 同样的蒙版大小，换了一张图片，效果完全变了

• 同样的X轴数值，在不同的图片上偏移距离天差地别

• 想让蒙版移到屏幕边缘，却不知道数值该设多少

这个“动感天眼扫描效果”的案例，就是为了彻底解决这个问题而设计的。它不仅仅是教你做一个酷炫的效果，而是通过两组不同分辨率的图片，让你亲手验证蒙版参数背后的底层原理。

一、最终效果预览

画面主体：两张现代清纯美女图，通过圆形蒙版的缩放、移动和挤压，模拟出“天眼扫描”的动感效果——蒙版像雷达一样扫描、聚焦、扩散、切换，配合白边强化视觉层次。

核心看点：

• 图1（1440×2560）和图2（720×1280）使用完全不同的蒙版数值

• 但它们在屏幕上的视觉表现完全一致

• 这背后的原理，正是本文要彻底拆解的内容

效果演示：

二、准备工作

素材清单

为什么保留原始分辨率？

这是本教程最关键的设计点。很多人会习惯性地先用PS把图片统一成720×1280，但那样就掩盖了“分辨率影响蒙版参数”这个核心原理。

为了让你直观地看到：同样的蒙版数值，在不同分辨率的图片上表现完全不同——而且这种不同是可以被精确计算的。

软件版本

• 剪映专业版

• Adobe Photoshop（用于生成白图，可选）

三、分步操作指南

第一步：建立项目与背景

1. 新建剪映项目，选择9:16竖屏比例

2. 把图1拖入轨道1，时长为15秒

3. 设置“背景填充”为“模糊”，模糊效果选择倒数第二个（中等模糊程度）

4. 缩小图片并移出屏幕外（作为背景色的占位，不影响最终画面）

第二步：图1的天眼扫描动画（轨道2）

把图1拖入轨道2，时长为15秒。在以下几个时间点设置圆形蒙版的关键帧：

操作要点：

• 在2秒处，点击“蒙版参数”右侧的菱形图标添加第一个关键帧

• 然后在其他时间点直接修改参数，剪映会自动生成关键帧

• 宽或高为1时，蒙版被压缩成一条线，形成“扫描线”效果

第三步：图2的天眼扫描动画（轨道3）

把图2拖入轨道3，开头处对齐轨道2的第2秒位置（即图2从2秒处开始），时长为13秒。

注意：图2的第2秒对应时间线上的2秒处，第4秒对应4秒处，以此类推。

第四步：添加白色描边层（强化视觉效果）

图1的白边（轨道2下方）：

1. 复制轨道2中的图1

2. 粘贴到其下一层轨道

3. 右键 → “替换片段” → 替换为与图1同分辨率的纯白图片（1440×2560）

4. 修改缩放值为105%（让白边比原图略大，形成描边效果）

图2的白边（轨道3下方）：

1. 复制轨道3中的图2

2. 粘贴到其下一层轨道

3. 替换为与图2同分辨率的纯白图片（720×1280）

4. 修改缩放值为105%

原理：白边图片的蒙版动画与原图完全同步（因为是直接复制过来的），但由于白边在下一层且缩放略大，视觉上形成了“蒙版边缘有一圈白框”的效果，强化了“扫描”的科技感。

第五步：添加贴纸与滤镜

1. 在贴纸中搜索“科技”“扫描”“边框”等关键词，选择合适的贴纸点缀

2. 在滤镜中选择合适的风格（推荐“高级灰”或“冷色调”）

3. 添加特效→光效→ 选择“镜头光晕”或“闪光”增强扫描的动感

第六步：导出

1. 选中所有图片，右键勾选“超清画质”

2. 点击右上角“导出”

3. 选择分辨率：1080×1920（9:16竖屏）

4. 帧率：30fps

5. 等待渲染完成

四、核心原理深度解析（重点）

4.1 剪映的坐标系统

在剪映中，蒙版的位置计算相当于在屏幕中建立一个二维坐标系：

• 原点：屏幕的正中心 (X=0, Y=0)

• X轴：水平方向，向右为正，向左为负

• Y轴：垂直方向，向上为正，向下为负

4.2 坐标范围与图片分辨率的关系

关键公式1：位置极限值

X轴范围 = [-图片宽度/2, +图片宽度/2]
Y轴范围 = [-图片高度/2, +图片高度/2]

这就是为什么图1的X=-720和图2的X=-360都表示“移动到屏幕最左侧”——因为它们的图片宽度不同，但计算出的极限位置比例相同。

结论：你设置的X值必须与图片的原始宽度挂钩，而不是与屏幕宽度挂钩。

4.3 蒙版尺寸与屏幕占比的关系

关键公式2：蒙版视觉占比

蒙版在屏幕中的视觉占比 = 蒙版宽度 / 图片原始宽度

所以，虽然图1的蒙版是860、图2的蒙版是432，但它们表现出来完全一样大——因为它们的比例都是60%。

推论：假设：蒙版宽度/图片宽度=n。

• 如果蒙版宽度 = 图片宽度（n=1），则蒙版与屏幕同宽

• 如果蒙版宽度 > 图片宽度（n>1），则蒙版超出屏幕宽度

• 如果蒙版宽度 < 图片宽度（n<1），则蒙版小于屏幕宽度

4.4 为什么图1和图2的数值不同，效果却相同？

这正是本教程的核心价值所在：

答案：剪映中的蒙版参数不是“绝对值”，而是相对于图片原始分辨率的“相对比例”。

五、规律总结

一张表看懂全部规律

核心一句话

剪映中的蒙版尺寸和位置数值，是相对于图片原始分辨率的“绝对值”；而它们在屏幕上表现出的视觉大小和位置，是相对于图片分辨率计算后的“相对值”。

理解这一条，你就能在任何分辨率下准确计算蒙版参数。

六、常见问题排查

七、思考延伸

掌握了这套原理，你可以举一反三：

• 关键帧路径：在不同分辨率的图片上，如何让蒙版走同样的运动轨迹？（答案：按比例换算坐标值）

• 缩放值的影响：如果把图片缩放值改为50%，蒙版数值是否需要调整？（答案：需要，具体请上机实验）

• 换成视频素材：视频素材同样适用这套规则，因为剪映中视频也有原始分辨率

八、结语

这篇文章的核心价值不在于“教你做一个效果”，而在于让你彻底理解“为什么这样做”。

很多教程只会告诉你“点这里、设这个值”，但你一旦换了图片分辨率、换了屏幕比例，就完全不知道怎么调整了。而你通过这个案例，亲手验证了：

• 蒙版大小与图片分辨率的关系

• 坐标极限值与图片宽高的关系

• 不同分辨率下如何换算相同的视觉比例

当你掌握了这套原理，你就再也不用“背参数”了——你可以自己“算参数”。

如果觉得有用，欢迎收藏、转发，或者在评论区留下你的问题。