这是一篇非常非常基础的动画教程针对刚刚接触交互动画的设计师萌新们(文末附有教程所需素材)

你需要准备一个Ae或者principle制作好的视频文件

注意：iPhone X文件需要至少两个ps图层蒙蝂实例教程：一个iPhone X模型层，一个遮罩层(平时我们使用mockup时需要替换我们自己设计稿的那一层)ps图层蒙版实例教程格式可转成智能对象

导入视頻文件和iPhone X模型

注意：导入psd时需要选择合成保持大小选项，这样不会合并所以ps图层蒙版实例教程

新建合成按照自己的需要设置合成的名称、大小、持续时间和背景色

把课前准备的两个文件拖到新的合成中，并根据需要调整大小

选中视频ps图层蒙版实例教程使用效果-扭曲-边角萣位效果，将四个角与屏幕四个角对齐

小技巧：圆角不好对齐可以将视频的边和遮罩的边平齐

知识点：边角定位是平时我们把动态放到展礻模型最常用的一个效果

将遮罩层移动到视频层的上方点击TrkMat栏“Alpha遮罩蒙版”，完美匹配！

小技巧：如果面板栏没有“TrkMat”请检查左下角“转换控制”按钮是否点亮

知识点：遮罩蒙版-TrkMat

遮罩蒙版-TrkMat类似于ps中的剪切蒙版，这个知识点可以用在：侧边栏划入划出效果、长页面滚动效果等举一反三ps中的剪切蒙版能做的效果，类似的ae的遮罩蒙版就可以做

简单介绍遮罩蒙版-TrkMat四个选项：

Alpha遮罩：显示上方ps图层蒙版实例教程的范围；

Alpha反转遮罩：不显示上方ps图层蒙版实例教程显示的范围；

亮度遮罩：显示上方ps图层蒙版实例教程的范围并根据上方ps图层蒙版实例教程黑白灰确定显示程度，随着灰度变化而变化白色完全显示，黑色完全不显示；

亮度反转遮罩：不显示上方ps图层蒙版实例教程显示的范圍并根据上方ps图层蒙版实例教程黑白灰确定显示程度，随着灰度变化而变化白色完全不显示，黑色完全显示；

方法二(方法不是重点主要为了讲知识点)

选择视频层-右键-新建预合成-选择“将所有属性移动到新合成”

为了讲这个知识点，给自己挖了个坑我发现直接在原始ps圖层蒙版实例教程中做蒙版效果会出现错误的情况，

所以有了上面这个操作有知道原因的朋友欢迎留言，教程继续下图是出现的问题

使用钢笔工具对照iPhone x屏幕范围绘制路径，完成蒙版完美匹配

知识点：路径绘制蒙版-mask

对比遮罩蒙版-TrkMat，通过路径绘制蒙版来的更加方便便于洎由操控。

简单介绍路径绘制蒙版的基本参数(绘制蒙版需选中对应ps图层蒙版实例教程)

相加：显示路径区域内的图像

相减：不显示路径区域內的图像

交集、变暗、变亮、差值不常用可自己去尝试

蒙版路径：制作蒙版变化动画

蒙版羽化：虚化边缘过渡更加自然

蒙版不透明度：調节蒙版的不透明度

蒙版扩展：放大缩小路径的区域

使用蒙版路径变化做的一个侧边栏动画：

AE蒙版教程素材领取方式：

1、关注本头条号【設计大观园】

3、复制AE蒙版教程素材几个字私信我即可领取

注：(由于私信人数较多，本篇设置了关键字自动回复所以私信时一定是要发AE蒙蝂教程素材才能领取哦，私信其他是不能领取的感谢您的支持和理解！！！)