这是一篇非常非常基础的动画教程针对刚刚接触交互动画的设计师萌新们(文末附有教程所需素材)
你需要准备一个Ae或者principle制作好的视频文件
注意:iPhone X文件需要至少两个图层:┅个iPhone X模型层,一个遮罩层(平时我们使用mockup时需要替换我们自己设计稿的那一层)图层格式可转成智能对象
导入视频文件和iPhone X模型
注意:导入psd时需要选择合成保持大小选项,这样不会合并所以图层
新建合成按照自己的需要设置合成的名称、大小、持续时间和背景色
把课前准备的兩个文件拖到新的合成中,并根据需要调整大小
选中视频图层使用效果-扭曲-边角定位效果,将四个角与屏幕四个角对齐
小技巧:圆角不恏对齐可以将视频的边和遮罩的边平齐
知识点:边角定位是平时我们把动态放到展示模型最常用的一个效果
将遮罩层移动到视频层的上方点击TrkMat栏“Alpha遮罩蒙版”,完美匹配!
小技巧:如果面板栏没有“TrkMat”请检查左下角“转换控制”按钮是否点亮
知识点:遮罩蒙版-TrkMat
遮罩蒙版-TrkMat類似于ps中的剪切蒙版,这个知识点可以用在:侧边栏划入划出效果、长页面滚动效果等举一反三ps中的剪切蒙版能做的效果,类似的ae的遮罩蒙版就可以做
简单介绍遮罩蒙版-TrkMat四个选项:
Alpha遮罩:显示上方图层的范围;
Alpha反转遮罩:不显示上方图层显示的范围;
亮度遮罩:显示上方圖层的范围并根据上方图层黑白灰确定显示程度,随着灰度变化而变化白色完全显示,黑色完全不显示;
亮度反转遮罩:不显示上方圖层显示的范围并根据上方图层黑白灰确定显示程度,随着灰度变化而变化白色完全不显示,黑色完全显示;
方法二(方法不是重点主要为了讲知识点)
选择视频层-右键-新建预合成-选择“将所有属性移动到新合成”
为了讲这个知识点,给自己挖了个坑我发现直接在原始圖层中做蒙版效果会出现错误的情况,
所以有了上面这个操作有知道原因的朋友欢迎留言,教程继续下图是出现的问题
使用钢笔工具對照iPhone x屏幕范围绘制路径,完成蒙版完美匹配
知识点:路径绘制蒙版-mask
对比遮罩蒙版-TrkMat,通过路径绘制蒙版来的更加方便便于自由操控。
简單介绍路径绘制蒙版的基本参数(绘制蒙版需选中对应图层)
相加:显示路径区域内的图像
相减:不显示路径区域内的图像
交集、变暗、变亮、差值不常用可自己去尝试
蒙版路径:制作蒙版变化动画
蒙版羽化:虚化边缘过渡更加自然
蒙版不透明度:调节蒙版的不透明度
蒙版扩展:放大缩小路径的区域
使用蒙版路径变化做的一个侧边栏动画:
AE蒙版教程素材领取方式:
1、关注本头条号【设计大观园】
3、复制AE蒙版教程素材几个字私信我即可领取
注:(由于私信人数较多,本篇设置了关键字自动回复所以私信时一定是要发AE蒙版教程素材才能领取哦,私信其他是不能领取的感谢您的支持和理解!!!)