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

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

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

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

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

分解步骤:

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

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

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

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

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

嘻嘻 自己构图的草图

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

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

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

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

4.1银行卡绘制

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

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

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

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

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

毛玻璃参考配置

填充:#FFFFFF

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

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

在右边栏“效果”里哦

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

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

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

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

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

银行卡投影

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

 

银行卡倒影

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

 

渐变蒙版

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

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

银行卡效果图

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

4.2界面构思

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

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

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

5.动效分解

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

 

5.1XD动效基本原理

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再看下效果~

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

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

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

5.2数字转动的转动

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

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

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

5.3拖动动效

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

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

5.4多方面考虑

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

 

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

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

好啦本期教程完成了

最后提供源文件地址:

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

提取码:xx3d 

百度网盘

做人要厚道,转载请注明文章来源: http://www.boxui.com/ued/design-idea/47568.html