当前位置: 首页 >文章 > 新手不会做动效?——XD的动效之路
收藏
分享

新手不会做动效?——XD的动效之路

举报酸梅干超人酸梅干超人发布于 2019-01-238242阅读29点赞1评论
XD 的动画面板在 “原型” 模式中,通过连线后点击角标就可以弹出,动画面板主要分成 3 个部分,交互方式、动画类型以及动画属性。...


一方面,Adobe 选择将 XD 免费,我们不用再使用盗版也可以持续获得最新版本更新;另一方面,开放了对第三方插件的支持,用传闻 1000 万刀的奖励来鼓励第三方开发者开发插件,力求弥补了面对 Sketch 时最大的软肋。

在去年 10 月份的更新中,XD 重点更新了关于交互动画方面的支持,包括语音、自动生成动画、拖动手势、导出到 AE 等。这个功能一上线,XD 的原生功能就足以覆盖大多数轻量化应用从原型、界面到动画上的一条龙操作。尤其是对 Windows 用户来说,在没有 Flinto、Framer、Principle 的情况下,也可以快速做出可以操作和演示的交互动画,而无需使用更吃配置和资源的 AE 来实现。

下面,我们就要详细讲解 Adobe XD 的动画功能,看看这些一直没怎么被人重视的功能可以帮我们实现什么效果。

XD 的动画面板在 “原型” 模式中,通过连线后点击角标就可以弹出,动画面板主要分成 3 个部分,交互方式、动画类型以及动画属性。


简单来说,就是通过设置指定操作触发对应属性的交互动画。

一、触发方式

触发方式就是我们平时对屏幕操作的交互方式,目前只提供了四种基础触发方式:

    - 点击:点击屏幕触发

    - 拖拽:滑动屏幕触发

    - 时间:进入该页面固定时间之后自动触发

    - 语音:通过指定语音(现只支持英文)触发

二、动画类型

动画类型,就是动画的形式,它的类型会根据我们选择的触发方式有所变动,主要的可设置选项包含:

    - 动作:动画的动作类型

    - 目标:从当前页面跳转到的目标页面

    - 动画:动画的类型

下面,我们将所有动作和它所包含的动画类型做一次梳理:

1.过渡

过渡可以触发的动画选项有 10 个,除了“无”以外,其实只有三个大类:

溶解:很多工具会把这个动画翻译成 “渐隐渐现”,即当前页面慢慢隐藏,下一个页面慢慢出现。

滑动:目标页面可以从上下左右四个方向平移进来,并覆盖到当前页面上方。

推出:目标页面从上下左右四个方向平移进来,并同时将当前页面“挤出”画布。

滑动和推出效果非常接近,但应用上有一点小差异,滑动是在一般页面跳转中使用的效果,推出更多在类似引导页中平级滚动的场景下使用。

2.自动制作动画

自制动画的逻辑,就是在页面1和页面2中包含了相同的图层,并且图层的属性(位置、大小、圆角)不同,那么页面1中的这些图层就会逐渐过渡(移动、缩放、变形、旋转等)到页面2。

说白了,这就是 Keynote 中的神奇移动,只要 Keynote 用的比较多的同学一定不会陌生,再换个说法,它也叫关键帧动画,不同的页面就是不同的关键帧。

这个功能为 XD 制作动画带来了非常大的扩展性。

3.叠加

叠加就是将目标页面置于当前页面上方的效果,和滑入类似,但是原页面并不会移走。

应用叠加的场景,主要可以集中在类似弹窗、浮层这类非独立页面的效果中,我们只要在目标页面使用空白或带有透明度的背景即可。

4.语音播放

语音播放这个比较有意思,它不带任何动画效果。实际上它的作用是播放一段音频,而音频的内容则是在下方输入的英文文本。这个功能目前没有太大的用处,相信在后续如果支持自定义音效,才能发挥出更好的作用。

5.上一个画板

这个功能即自动返回之前跳过来的页面,通常添加在该页的返回按钮上,不用我们每次都重新定义一遍返回动画。

值得注意的是,这个动作会根据上一个页面跳转过来的动画,反向执行一遍。

三、缓动

我们再简单讲解下缓动。

在真实世界中,大多数物体发生的位移都不会是匀速的,比如自由落体、抛物线、车辆启停等等。这导致我们对元素产生的动画效果也有一样的期待,如果所有元素发生的变化全是匀速的,那会让我们觉得很 “反常”,这就是我们需要去应用缓动的动机。

于是,业界就发明了用来描述进程和时间的坐标轴,用线条来反应它们的关系,如下图所示。当然,这类信息在网上已经非常充足了,XD 目前页不支持曲线的自定义,所以这部分就不展开讲了。

目前,XD 中之提供了最常见的几种缓动类型,我们可以通过下面的对比图例了解一下。

1.渐出

进程由快到慢的过程,即结束的时候速度越来越慢。

2.渐入

进程由慢到快的过程,在开始时较慢。


3.渐入渐出

在开始时较慢做加速运动,到一半时速度达到最快,并在这时候减速至结束。

4.对齐

对齐就是先应用渐出,然后在结尾处超出原本的范围之后再缩回,即一个轻微的抖动效果。

5.卷紧

相当于对齐反过来的效果。

6.弹跳

弹跳则和名字一样,再结束的时候有几次幅度比较大的抖动。

最后,我们再在一张图里查看它们的对比,有个更直观的印象。

好了,相关的功能解释完了,现在就要拿些真家伙出来演示一下。下面,我通过之前做过的一个 APP 案例,来完整应用一遍 XD 的动画功能,先看一看完整的效果。

PS:页面案例直接设计出来的,没有太充足的时间,大家先看着就行。

第一步,实现基本的跳转。

我们先简单的将页面用过渡效果以及返回上一页串联起来。

第二步,制作首页幻灯效果。

先复制2个首页出来,然后移动幻灯片编组到 2 和 3 的对应位置。

通过选中画板拖动连线,将这 3 个页面首位衔接,选择动作为时间,2s,然后应用,自动设置动画。

于是,幻灯片就可以自动播放了。

第三步,分类页实现拖动卡片的效果。

先做出拖动卡片后的效果页面。

然后将两个画板相互链接起来,使用拖移和自动制作动画效果。

于是,我们就可以通过拖动的交互让卡片进行位移,遗憾的是目前只支持一个方向的拖动。

第四步,实现分类到详情的过度动画

要让分类页面能直接过度到详情页面而不是翻页跳转,就要让两个页面中有相同的元素,详情页的图片,我们可以直接从分类页中复制过去再重新定义尺寸。而详情页中底部的卡片,则要复制到详情页中并移动到屏幕底部。

然后选择图片链接到详情页,使用自制动画,并将缓动改成对齐,就可以实现元素的位移和缩放组成下一个页面的动画效果。

第五步,实现通知弹窗的移入

新建一个弹窗页,背景用一个黑色透明度矩形。在首页上创建一个热点区域,链接到弹窗页,设置对应的参数为点击、叠加、下滑、渐出。

然后,我们就可以通过在首页点击这个热点区域触发弹窗的叠加滑入。

当然这个效果还可以换种思路,即使用自动制作动画的方式实现。这就要先设计好弹出的样式,然后将多出来的图层复制回首页,对它们进行缩小和透明度修改(看似没有实则隐藏)。


当然,这个过程我们还可以更改一些参数,使得动画效果更有趣一点,比如下图所示。具体操作方法可以参考视频。

结尾

了解好 XD 的这些基础功能,那么制作一些简单的动效已经不成问题了。它真正优势是在于,设计一整套应用以后,我们可以轻易的制作出一套相对完整的动画原型出来,直接进行操作和演示,无需再导入到其它动画软件中制作。

虽然目前的功能还很简陋,有不少逻辑上的问题没有给出更好的解决方案,但是已经可以窥见 Adobe 对 XD 未来发展的定位了。相信在 2019 年,一定会上线对动画支持更充分的更新。

感谢大家的收看,希望对大家有所帮助。

1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天61人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证