[Jack 2heng] XD UI动效银行卡教程（附源文件）

hey 又见面了，再次介绍下自己，我叫Jack 2heng ，这是本人第二次分享教程。希望后续能继续给大家带来干货，一起变得更强。

本期教程阅读约：10~15分钟（不熟悉XD的同学可以了解下）

本期教程作品灵感来源于P站（pinterest）的一个视频动效

废话不多说，来查看效果图。（本期教程以分解教程为主，期待各位同学脑洞打开做出更好的作品。）

分解步骤：

1.动效思路，我将如何完成整体交互场景。

1.1我的目标：我想完成银行卡转账的动效流程，给自己定一个需求。

1.2我该如何完成：多参考，多收集灵感（在自己收集画册中，建立灵感库，当自己闲着的时候没事来翻翻）

2.画草图，将整体动效基本流程分镜粗略绘制（让自己清楚）

嘻嘻 自己构图的草图

3.开始绘制原型图，黑白线框图

最后以效果图为标准，中间原型搞，让自己清楚有哪些信息。

4.构思效果图，并将图层备注及分组好

4.1银行卡绘制

银行卡绘制过程，参考了银行卡的一些基本信息，银行&银联logo，卡号，持卡人，到期时间，当然可以自由发挥。

进行图层备注，养成好习惯，在后面动效中图层关系非常重要。

如何绘制 通过 毛玻璃-银行卡底部处理-银行卡投影-银行卡倒影-渐变蒙版，下面来参考绘制配置。

毛玻璃参考配置

填充：#FFFFFF

描边：#FFFFFF 透明度 40~50% 1px

背景模糊: 数量25 亮度0  不透明度0%

在右边栏“效果”里哦

银行卡底部色块由四个圆形进行蒙版后，在上面添加毛玻璃。

底部参考通过几种邻近色进行配色。请勿使用多种颜色进行配色，这样会使银行卡变脏。

银行卡投影

绘制个银行卡相邻色调的椭圆进行“对象模糊” 参考配置 数量42

 

银行卡倒影

将银行卡绘制完成后进行倒影处理。

 

渐变蒙版

背景一定要和效果图背景一致后再进行渐变，两个端点要和背景色一致，其中离银行卡最近端点需把透明度拉0%，假如效果不够，可以通过渐变锚点进行拉动，来达到投影效果。完成后需要将渐变蒙版层移到银行卡倒影上个图层。

银行卡效果图

4.2界面构思

个人页面银行卡,持卡人是要展现的内容，转账是我转账的功能。

动效通过切换银行卡，转账-选择银行卡转账-完成转账的场景继续完成。（先有图后构思动效）

5.动效分解

以下分解基本动效过程告诉同学们如何去完成，并落地。

 

5.1XD动效基本原理

 

分解模拟下银行卡插入ATM的效果

边做变看，点击右上角播放按钮，即可实时查看效果。当然有条件可以用手机连接，效果更佳。

XD的动效原理是借助画板与画板之间完成动效的，所以在构思动效之前，需要绘制两个有关联的画板。如下两图，“1画板和“2画板”是有联动性的，并且图层的关系要清晰。（图层可以备注，以免页面复杂）两个画板的图层排列层级关系不能做改变。

此外需要对“2画板”中添加插入卡槽的形状，然后调制透明度为零。

为什么要绘制呢，假设你想让他在下个画板出现，必须要在前一个图层中进行绘制，并图层关系一定要列好。就像下面既然是插入，插入口要分上与下图层中，添加银行卡，这样效果就能达到插入卡槽的样子了。（绘制好的图层级关系不能变动）

链接动效，需要把XD左上角的“设计”模块切换至“原型”模块，然后点击“1画板”，拉动蓝色箭头至“2画板”。

不一定需要通过画板进行链接，可以通过画板中的组件。如可将“银行卡”链接到其他画板上。

最关键的一步来了，链接完后右边会出现动效设置。

触发可以选择点击，拖动需要由画板中某个组件进行动画拖动，时间是在当前画板等待时间多久后跳入到设定好的画板，其他两个很少用的到，有兴趣的同学可以去尝试下。

类型，是选择你该如何将画板直接联动起来的过程，这里选择自动制作动画。当我们选择好类型，软件会帮我们生成动画。

目标，是链接到画板对象。

缓动，当我们选择自动制作动画后可选择画板之间动画的灵活性。（同学们可以多尝试不同的缓动效果）

持续时间，根据动效需要可选择时间，可以在栏目中进行修改时间，最多5秒。

完成的第一步，让银行卡翻过来。

第二步如何让卡片3D变化

在设计模块中，在“2画板”基础上复制一个画板为“3画板”，选择银行卡组件，在界面的右边点击“方盒图标”后，可以对当前选中的组件进行角度修改。

然后重复之前的步骤，将“2画板”与“3画板”内容链接起来，再把之前透明为零的图层调为100%，并检查下图层是否与之前一直。相反，需要将“2画板”中的银行卡倒影，在“3画板”往下拉动并透明度调制为0%。

此时我们得到了一个转变的动效，之后我们需要在“3画板“基础上复制“4画板”，并把银行卡插入卡槽中。复制“4画板”建立“5画板”拔卡后的效果。（记得在 2画板 中倒影部分，在 4画板 透明下调为竖行。然后在 5画板 调出来。）

后续将“6画板”为空隙补上并把链接回到“1画板”这样完成一套完整的动效了。（在绘制的过程建议把触动为点击和触动后完成时间调为2~3秒，这样可以看到动效中的细节，并做出修改。在确定无误后，在进行触动方式和触动后时间的设置。）

再看下效果~

在转动时银行卡四角有黑白变动，这是毛玻璃在动效中的变动，本人还是很喜欢这种有点变动的效果，当然有些同学不喜欢的话，可以在一个白色画板中单个导出银行卡.png。（选择后ctrl+e 导出单个组件图层。）

5.2数字转动的转动

这块需要有一定的XD基础，需要绘制一列的数字，可以通过重复网格绘制后修改当中的数字，再复制多排的数字，后进行蒙版叠加。之后复制在基础上复制新的画板并链接在一起，就有效果啦。（末尾提供数字转动源文件的地址。）

5.3拖动动效

这个更好理解，需要把三张银行卡有层次的拖动出来，在各个画板上对银行卡进行透明度和位置的变化。在这里银行卡给我用PNG形式展现出来，因为卡片在放大的过程字体会缩动，效果上会很奇怪。一个组件图层有两个交互触发。

5.4多方面考虑

剩下的内容，大家可以动动手做起来，基本内容技巧都是以上步骤。注意图层关系，假如下个画板需要出现的内容，需要在上一个画板准备好，并把透明度和出来位置设定好。其次在绘制过程中需要考虑如何开始，如何结束。图层名称也不要乱改，会变动的图层尽量别编组。记住脑洞一定要大。

 

6.最终预览并在手机实时观看，（手机预览不会同步电脑字体）如何导出（win直接win+G调出boxgame 即可录制，欢迎mac同学进行补充。）

好啦本期教程完成了

最后提供源文件地址：

链接：https://pan.baidu.com/s/11XTICrXDPsTbGR6qV7bz8Q 

提取码：xx3d 

百度网盘