封面

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

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

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

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

1

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

 

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

2

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

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

3

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

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

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

 

 

4

更高效的沟通:

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

5-1

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

5-2

潇洒!

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

16.001

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

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

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

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

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

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

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

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

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

8

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

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

 

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

9动态研究

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

3/临摹

文摹:做些小动画

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

10-1

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

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

武摹:不要惧怕,给自己找个大活儿

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

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

三:实战经验

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

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

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

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

2/输出的三种形式:

pasted-image

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

14-1

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

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

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

15LG

 

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

 

 

 

写在最后:

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

最后的最后:

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

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

龋齿一号:www.gfxcamp.com

UI中国:ui.cn

doyoudo:www.doyoudo.com

 

喜欢(664) 评论(0) 分享

Leave a Reply

© 2017 JDC. All Rights Reserved.