从文字到图片，从图片到动画（视频），人们总是喜欢看些更“有趣”的信息——沃硕德。

去年11月，笔者及笔者leader感大势所趋，自学了AE软件，开始了动效设计的不归路，如今已小一年，支持了一些实际项目，不少同学都对动效设计感兴趣，所以就在此唠唠。

一：总有个理由让你想开始

事实上动画这种形式，从古到今都会和趣味联系到一起，人们看到媒介上出现活物时都会下意识觉得奇妙，在娱乐和信息都匮乏的时代里，为了满足猎奇心，大家看个“GIF图”可是会花点银子的。

19世纪的幻影转盘丰富了西方群众的精神文明生活

早年间Flash的网页和动画甚至游戏因其流畅的播放与潇洒的动画曾风靡一时，然而由于时势所致，淡出人们的视线。而如今随着技术的发展，网页上流畅的动画效果，H5里有趣的互动动画，手机APP的交互场景等等，越来越多的“动画”开始改变着我们信息获取的体验。

许多年后看到朋友圈充斥着H5小动画，小游戏的闪客们，是否会有种似曾相识的存在感。

回想完过去，咱畅想畅想将来~不都说今年是VR元年嘛，甭管是VR还是AR，相信在这些设备中的UI界面也不会是静止的。至于究竟是什么样子的，我们且等且看吧，不过综上所述——动效设计在现今确实是一种大趋势

现实中的物体没有绝对静止的，相信VR设备中的UI也是一样

当然，未来的事还不知道什么时候来，计划永远不如变化快。如果非要说活在当下，学习动效设计还可以为我们带来什么好处呢？

作为一个“视觉设计师”，将想表达的东西通过视觉作品更准确传达给受众，是我们必须要做的。而动效的引入相当于我们多了一种“在时间上的表达能力”，受众看到的不再是静止的插画而是一种更具有情绪的小动画。

更高效的沟通：

众所周知，前端同学在做动画效果时是通过代码来实现的，所有效果背后对应的都是一行行的参数和代码。如果你是一个还不会使用动效的UI设计师，在与前端沟通时难免会遇到下面的问题

友谊的键盘说翻就翻啊！！为了维护与前端同学坚固的革命友谊，学习了动效后你们的沟通将会变得大不一样

潇洒！

AE还可以给你流畅丝滑的动画

可以看到PS在这个界面下是通过一张张的切换图片来形成动画的，也就是我们通常所说的“逐帧动画”。我们看的动画片里大部分都是通过逐帧实现的，这种方式相对来说比较传统，也比较考验功底，因为要画出每一帧的样子必须要对动态有很入的理解。而AE的时间轴时间被直观的展示出来了，每个蓝条就是元素出现的时间，而动画是通过设置关键帧来实现的，比如第一个关键帧设置了透明度100%，1秒后的关键帧设置了透明度0%，在两个关键帧之间就会自动生成从100%到0%的变化。这种动画的形式被称为关键帧动画。在AE中几乎能想到的参数都可以通过关键帧来控制，我们不需要一帧帧的去改每一张图片，动画变得更加精准和可控。

读到这里的同学可能要往回再翻一下，再仔细看一下PS的时间轴，看看每帧图片下方的“0.06”字样。↑

→这个“0.06”的意思是动画在播放过程中在每张图片上停留的时间，这就引入了一个速率问题。同样的3秒动画，我们可以让它先快后慢，也可以让它先慢后快，什么都不做的话就是一个匀速运动。

匀速运动是一种寡淡的动作

调整过速率后的动画会变得更加生动有趣

在AE中通过【曲线编辑器】工具就可以轻松的去控制动画播放的速率问题，先慢后快还是时慢时快，什么样的节奏才是最呀最摇摆，你说了算。

二：那我们就开始学点啥吧

不管你有什么样的理由，开始学了就要入个门，笔者在这个章节不会讲过多的技术，而是以自身的经验，讲一个之间对动画了解不多的“静态UI设计师”该如何开始（如果想从技术入手请拖到文章末尾的教程推荐部分）

1/在开始制作动画前要更多的了解基础动效。也就是说。。一个东西。。它能怎么动。就像如果不了解你可能很难注意到电影里的长镜头之类的运镜手法，我们虽然平时都会或多或少接触动画，但很少去留心。

信息来源于网络，可自行百度了解更多

有了对基础动效的了解，在早期就不会遇到不知道该怎么动的情况，而是我想怎么动。心有所想，即使技术展示达不到，相对应的去学习也会事半功倍。

2/可以多做些动态研究。无论是要做简单的MOTION GRAPHIC也好还是想做一个卡通动画也好，动画最重要的就是要自然

呐~越符合现实规律的动态就会越自然，越流畅，让人察觉不到任何不适的感觉。做动态研究的目的也就在于此，一言以蔽之“做动画也要符合基本法”

3/临摹

文摹：做些小动画

当看到想做的动画时可以下载下来，仔细研究帧速率阿，动态啊。无论是在需求不饱和时学习也好还是需求真来了正好要做，先看后做，有个标杆，总是不会跑偏。。嗯。。太多

10-1

dribble.com上有很多这种有趣的小动画

京东黑色星期五活动，动效展示

武摹：不要惧怕，给自己找个大活儿

一开始在使用新软件的时候总会遇到不熟练的情况，这个时候不要过于着急，可以给自己找个“大活”逼自己一把，完整的动画和平时的小练习不一样，你能更好的去操作软件，也能综合起来学到的每个小知识点，相信经过了“大活”洗礼后，你的活儿一定会更好

京东到家2.0启动页动画，开始AE后的第一个“大活儿”

三：实战经验

1/简单的基础动作做出丰富的变化
JDCclub是京东用户体验设计部内部负责内部学习，与业内组织分享经验的组织，LOGO由四种颜色的“C”作为基础，在不同场合应用下有着不同组合。这么酷的LOGO不搞个动画展示怎么说的过去，搞他！

大量使用了路径剪切，弹性表达式等相对入门的技术

以这个动画为例，其实使用的技术并非很难掌握，当时更多的精力也是放在了几个LOGO如何互相转场上，想好分镜，用不同方式的转换，也会给人丰富的感觉。如果说转场也是个小问题要攻克的话，那么下面这个例子更能说明即使再简单的动作也能做出丰富的动画

现在信了哇~，所以在前期并不要惧怕自己的技术还不过关，毕竟想法也是很重要的，想法和技术两手都要抓，两手都要硬！

2/输出的三种形式：

如图所示这三种形式不分好坏，只分应用场景，如上文的JDC同学会，京东到家2.0启动动画就都是视频传播形式的，而微信文章里的配图就很适合使用方便配置的GIF图，而制作精致的H5时，我们最多使用的就是序列帧这种形式，依然举个实例

如图，从第一帧到最后一帧是一个大循环，而前端同学可以配置中间的一部分序列帧作为小循环。

3/从静态稿出发让动画更有趣：

现在的工作中，我们会习惯于先出静态设计稿，再去想动画。动画作为独立制作的部分，应该从设计稿出发，去设计一些合适的“剧情”。比如LG超极品拍日的互动游戏中，需要把房间内的旧电器换成新的。虽然需求的时间很紧，但是从趣味性的角度出发，我们不想要简简单单的闪个光啊，透明度啊什么的，于是做了些奇妙的剧情

再举个例子，京东16年校招中，我们将京东提倡新人的4S精神（Stage，Success,Speed,Style)抽象为四个几何形体。于是我们现学现卖，运用Element3D插件制作了立体的动画，完成了一些抽象的立体动效展示。

写在最后：

在工作中去学习一门新技能可能对于很多人来说不太容易执行。要明白软件只是工具，开始学习的时候就好像还没开刃的刀，虽然用起来还不是很顺手，但是不能气馁，经过不断的打磨，一定会变成一把利器。

最后的最后：

教程推荐：十分钟动态UI教学 | AK大神动效全集

网站推荐：大众脸www.lookae.com

龋齿一号：www.gfxcamp.com

UI中国：ui.cn

doyoudo:www.doyoudo.com