教程作者：设计师就业衔接班14期-24-薯条
教程指导：如如（优设设计师就业衔接班讲师）
交作业：#优设每日作业#
文章编辑：@雪寄草
大家好，我是优设学员薯条，今天由我来给大家讲解这个银行卡MG动画的设计全过程，一个简单的动效就可以让你的作品魅力无限哦~
1.1 打开AI，建立一个800×600px的画布。
1.2 用「矩形工具」绘制一个矩形，大小如下，作为背景（颜色为FF7B49），把图层名称改为「背景」。
1.3 接着制作卡片，新建图层，改名字为「卡片」。同样是用「矩形工具」绘制，大小为300×190px，颜色为673553，圆角半径为23px。
1.4 然后制作磁条。新建图层，改名为「磁条」，绘制一个60×50px的矩形，颜色为FDD484，然后用钢笔绘制以下形状颜色为673553。
1.5 新建图层，改名「圆透」，用「圆形工具」画一个60×60px的圆，颜色为FDD484，透明度改为60%。再次新建图层，改名为「圆1」，重复以上操作，透明度改为100%。位置放在如图位置。
1.6 点击文字工具输入文字，大小为29px，颜色为FDD484，字体为宋体。
1.7 点击文字图层，点击「菜单栏」里的「对象-扩展」，选择对象和填充，把文字变化为形状。
1.8 再次选择文字图层，鼠标右键，点击「取消编组」。单击击右上角的三条线图标，点击「释放到图层顺序」。把释放的图层改名从「1-16」。然后拖出文字层组。全部拖出后，删除文字图层。
除了卡片与背景图层，其他图层全部隐藏。
2.1 新建图层，改名字为「黑磁条」，用「矩形工具」绘制大小为300×45px，颜色为161616，的矩形，放在如下位置。
2.2 新建图层，改名字为「黄条」，用「矩形工具」绘制两个矩形，大小分别为为128×40px和64×40px，颜色为FDD484，的矩形，放在如下位置。
2.3 新建图层，改名字为「反光条」，用「矩形工具」绘制3个矩形，分别为一个14×200px和两个7×200px，颜色为6D5F45，放在如下位置。然后用直接选择工具框选矩形上方的瞄点，按住shift，横向拉120px左右。
Ai的部分就已经完成了，保存命名为银行卡，导入AE。
3.1 导入Ai文件，选中「反光条」、「黄条」、「黑磁条」，鼠标右键，选择「预合成」，命名「反面」。选中除卡片背景以外剩余图层，鼠标右键，选择「预合成」，命名「正面」。图层循序为「正面」-「卡片」-「反面」-「背景」。点击「卡片」，鼠标右键，选择「创建」-「从矢量图层创建形状」。删除卡片Ai图层。打开3D.如图：
3.2 制作卡片厚度：点开「卡片轮廓」图层，点击「几何选项」，把凸出深度改为5，如果「几何选项」是灰色的，可以先把渲染器改为C4D。
3.3 调整正反面的位置。点击「正面」-「变换」-「位置」，Z轴改为5.1，同理反面改为5.1。
3.4 拉一个正面反面对「卡片轮廓」的父子级：
3.5 时间指示器放在在6s的位置，点击快捷键n。把动图的时间设置为6s。
3.6 时间指示器放在0s的位置，点击「卡片」，给「旋转」属性打上关键帧，时间指示器放在6s的位置，改为1x（就是一周）。
这样，卡片的3D旋转效果就做好了。接下来就开始做正反面的细节了。
4.1 打开「正面」的预合成，选中全部图层，把时间指示器放在1s15帧的位置，按快捷键「Alt+右中括号」截断。
4.2 在选中全部图层的情况下，Ctrl+D复制全部图层，移到「磁条」图层下的位置，把时间指示器放在4s15帧的位置，移动复制图层到此位置，如图：
4.3 打开「圆透」图层，时间指示器放在0s的位置，打开「位置」属性，在如图所示区域打上关键帧，然后把时间指示器移动到1s15帧，改变位置（如图），这样圆透就有一个消失的效果。
4.4 选中32图层，把中心点移到该图层中0的下边，如图。接下来的31.17重复以上操作。
4.5 接下来选中32-17图层，点击快捷键S（缩放的快捷键），把时间指示器放在4s15帧的位置，改变缩放为0，打上关键帧。然后把时间指示器放在5s的位置，改变缩放为100.最后把时间指示器放在4s25帧的位置改变缩放为110，制造会回弹效果。
4.6 还是在选中32、17的图层情况下，把时间指示器放在5s15帧的位置「Alt+右中括号」截断，右键.关键帧辅助.序列图层。改为如图所示。
4.7 然后把时间指示器放在6s的位置，「Alt+右中括号」，得到如图：
这样所有的0就有一个慢慢长出来的效果。
4.8 选中圆透2图层，在4s15帧的位置打上位置的关键帧（方法同圆透一致），位置如图所示，在6s的位置打上关键帧，位置如图，这样就有了圆透慢慢长出来的效果。
4.9 选中磁条2图层，右键.矢量图层转换为形状，做一个磁条图层对磁条轮廓图层的反转Alpha轨道遮罩。
4.10 选中磁条2轮廓图层，在4s15帧的位置打上位置的关键帧（方法同圆透一致），位置如图所示，在6s的位置打上关键帧，位置如图，这样就有了磁条慢慢长出来的效果。
这样正面的动效就全部做完了。
5.1 进入反面的预合成，首先确定动效时间，选中全部图层，在1s15帧的位置Alt+【，在4s15帧的位置按「Alt+右中括号」。
5.2 首件制作「黑磁条」生长出来的效果，方法同「磁条2」一致。选中「黑磁条」图层，鼠标右键，选择「创建」-「从矢量图层转换为形状」，做一个磁条图层对磁条轮廓图层的反转Alpha轨道遮罩。选中「黑磁条」轮廓图层，在1s15帧打上「位置」属性的关键帧，位置如图所示，在3s的位置打上关键帧，位置如图。
5.3 用「矩形工具」新建矩形，大小可以遮挡住黄条就可以，做一个黄条对形状图层的「Alpha反转遮罩」。选中形状图层，在1s15帧的位置打上位置的关键帧，位置如图所示，在3s的位置打上关键帧，位置如图
5.4 选中「黑磁条轮廓」图层，Ctrl+D复制一个图层得到磁条轮廓2，去除磁条轮廓2中的位置关键帧。磁条轮廓2放在反光条上边，做一个反光条对磁条轮廓2图层的Alpha轨道遮罩。选中黑磁条轮廓图层，在1s15帧的位置打上位置的关键帧，位置如图所示，在3s15帧的位置打上关键帧，位置如图
5.5 选择黑磁条轮廓的关键帧，F9添加缓动效果，点击图表编辑器，右键.速度图表编辑，把曲线调到如图样式：
最后，返回银行卡合成中就可以得到一个银行卡动效了，让我们点击空格键看看效果吧：
想要来「优优自学团」和500位小伙伴一起交流学习进步吗？
添加管理员微信：uisdc2 备注「优优自学团」（无备注不通过哦）
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 已发布 2 条