设计和制作一个开场动画的历程

2015 年 10 月 10 号,RubyConf China 在深圳举行,我略带激动地看完了只有 20 秒的开场动画,那是很短又很长的 20 秒。

在沙溪设计完大会的 Logo 后,我想起如果大会有个像苹果发布会那样的开场动画的话可以让大会增色不少,而且可以给开场一个过渡,不会那么生硬。所以我开始根据 Logo 所要表达的意思设想起开场动画。

这是一个有意思的挑战,因为我从来没有学过如何制作一个动画,我不知道要用什么工具实现,难度有多大,需要多少时间。我当时没有对主办方提起,因为我对这事完全没底。

我开始沿用设计 Logo 的方法,开始在脑海里制作动画。因为之前 Logo 的设计是一个意外事件和不断完善和补充的过程,所以在 Logo 设计出来后我依然不能很清楚的解释出想要表达的意思,那还只是一个比较模糊的想法。但是如果要做出这个动画,我必须先要能很清楚的表达出 Logo 含义,而且要很简短,因为开场动画不能太长,最重要的是我不会制作动画,不能有太丰富的画面。

使用想象去制作动画其实比设想图形要容易很多,有时候会觉得想要在脑海里定格一个画面是有些困难的,好像总是需要把变掉的图形给回想回来。记住由一连串的画面可能会比记住一个单独的画面简单。

灵光乍现

我工作外的时间几乎都在尝试着说出这个 Logo 的意思,而且想越简单越好。听上去简单的话都比较简短。听上去很简单,就容易被记住。至于对于这句话的深层的理解,可以以后慢慢消化。

有一天下午我在工作的时候,因为之前有写代码测试,所以敢于把觉得不好的代码进行重构。正在感叹写测试的好处之余,更觉得我们要敢于破坏掉原来已经写好的代码,重新用更好的替换掉它。啊哈!我脑子里突然得到了一个对 Logo 含义很棒的诠释 。对于 Logo 所要表达的含义瞬间清晰了很多,我开始尝试着把想到的意思说出来,听完后继续尝试理解,把模糊的想法变得再清楚一些。

对于这种与正在做的事情看似毫不相关的思维跳跃,我已经不再觉得那么惊奇了。这个我在设计 Logo 的时候已经有了比较切实的体验。

这个动画是大会 Logo 的诠释,我把动画根据 Logo 的含义分成 4 个主要画面,然后想象连接起这些画面的动画。首先是分别想象出 4 个含义的画面, Logo 的 4 个主要含义是 4 个动词,每个画面表示一种状态。我设想出了下列这些状态:

动画四个主要画面
动画四个主要画面

这四种状态、图形分别在含义和外形上合成了 Logo 整体。

限制是突破的前提

一天晚上睡觉前,我为每个画面设想了很丰富的效果,而且越想越多。但是后来考虑如何实现的时候,发现我完全实现不了,我的时间和能力都存在着很大的限制。所以我在不断的构思动画的同时也在不断地简化动画,去掉看似锦上添花的每一帧,不断打磨至不可去除的部分。

有意思的是我的出发点并不是为了做出「完美」的作品,我只是想让动画尽可能的简单,这样我能实现的可能性就会增加很多。当然了,不能失去要表达的意思。那时突然觉得其实限制会推动我们做得更好,有时甚至让我们做出突破,进而创造更好的结果。如果我有用不尽的资源和时间,我就不会考虑效率。

后来我每天晚上睡觉前不再为想到一个效果而兴奋,而是为精简了一个画面而高兴,而且很多都是我认为很巧妙的做法。另一个意想不到的事情是,在思考动画的同时,我对 Logo 的表达能力越来越强,能把含义说得更简练。

突破是创造的前提。

选择舒适还是艰难

在沙溪时,我常常想在去了成都之后就回深圳继续制作动画,因为起初觉得那里有很安定的环境,免去旅行的琐事和不确定的情况。一边旅行一遍工作本来就要耗费很多精力,如果还要一边学习和制作动画我就觉得过于困难了。

我几度决定要回深圳,但是有一个声音不断提醒我那可能不是个好选择。

真心想做,去到哪都一样,不应因为回到一个看似舒服的环境才可以,那只是借口。而且后来证明我的直觉是对的,我想回去深圳是因为我被表面的困难吓到了,但我的直觉看到了更深层的东西,那就是我在那个地方是否能足够专注。

我竟然忽略了我回家后根本无法集中精神做事情。

不够专注,再多的时间也是无用。

动画分镜

在接近 8 月份的时候,快到沙溪的火把节了,那是沙溪最热闹和隆重的节日,但我却要回成都和同事们会和,进行集中开发。幸好在我离开沙溪前已经把动画构思得差不多了,接下去就是逐步学习和实现动画了,前面更多的是了解和熟悉制作动画的基础、难度和对动画的打磨。

整个动画当时还只存在于我的脑子里,还有最开始的一点草图。在成都做的第一件事情就是把动画的分镜画出来。因为动画足够简练,所以我是用 Sketch 去画的,一是因为这是我最熟练的画图工具,二是因为画出来的图像可以直接做为素材。

有意思的是,当我打算开始制作动画的时候,先画出分镜是脑里跳出来的一个想法。也许是因为以前看过了一些介绍制作动画的电视节目,对于用一张张纸上的定格动作拼成一个动画的做法印象非常深刻。另外一个可能就是因为漫画看多了,一个情节是用许多个定格的方格画连成的。

在成都的时候,因为公司安排我们住在办公室所在大厦附近的酒店,网络很差。所以我经常在工作完后的晚上跑回办公室一边搜索学习资料,一边尝试把一些关键的动画效果制作出来,主要的目的是掌握制作方法。

为了模仿苹果的一个开场动画 Designed By Apple — Intention 的风格,我连着好几个晚上一帧一帧的把动画看了许多遍,尝试捕捉一些细节和整体风格,琢磨可以如何实现。

这时候我已经拿着分镜图给好几个同事解说了,而且不会觉得拿出来讲觉得不好意思,因为我真心觉得做得很好。

动画分镜

重庆 7 日

成都集中开发完毕后不久我就去了重庆。我在重庆的瓦当青年旅舍住了 7 天。

周一到周五的时候,我每天早上会下楼,穿过地铁站去到对面商城里的麦当劳吃早餐,每天都点一样的套餐。然后回到旅舍,在大厅一直工作到中午出去吃饭,回来后就去午休。大概在 2 点的时候,我又会出现在大厅一直工作到晚上六点半出去吃饭。完了也是马上回到旅舍休息后和做点杂事和刷刷信息,到晚上 9 点后我便开始着手实现动画,一直到晚上 11 点半或 0 点。除了周末,每日如此。

在工作了一天后,要想晚上 9 点从休息的状态再回到要承受负荷的状态是有困难的,因为无论从生理还是心理上整个人都是疲惫的。但是由于有前面断断续续的预热,我已经很习惯了。

那 5 天我最大的感觉就是,我在不知不觉的专心致志的做事。这是我回家做不到的事情。我在重新把完整的动画原型做出来了,和分镜一模一样。画分镜有另外一个好处,那就是帮助我很好管理这些动画片段。每一个分镜都包含了数个动画片段,然后分镜之间再连接起来,这样让整个项目结构很清楚。

在周六和周日的时候我去了一些地方,认识了一些人,感受了一下这座城市。重庆这座城市很有她的特点,可以明显的感觉到与众不同的地方。

在来重庆之前,我还去了九寨沟。在那我住了一个星期,胜利日放假的几天进去了九寨沟、去了黄龙,还参与了两场很有意思的谈话。其中一场席中有我,香港青年,从印度回来的藏族青年和来自西方经济世界的韩国阿姨,谈话的内容是政治和宗教。另外一场有我,香港青年和上海姑娘,谈话的内容是工作和情感付出。

那时我就觉得,我没因为畏惧困难而选择回去深圳是对的。旅行、工作和学习不但是可以同时进行的,而且我想这已经是我的生活状态。

制作音效

在沙溪的时候我就发现了动画有一个很重要的部分,我是没有足够的时间去完成的,那就是音乐。无声的动画要看起来有意思,那是得多么的困难,在那段时间内我的水平做不到。所以我在成都的时候就开始到 SoundCloud 上找一些音乐和声带。但是找来找去总是发现没有合适的,因为那些音乐根本和动画没有什么关系。

在国庆前几天回到了深圳,其中一个目的就为了躲开国庆,而且大会也临近了,总是要回深圳的。在深圳的时候我开始为动画的音乐发愁,整个动画的背景音乐是最大的问题。另外一个问题就是一些动画特效的声音,网上的素材,或者说合适的素材几乎没有,最后我只找到两个最简单的声音,一个爆破、一个心跳作为两个分镜的主要音效。另外两个音效我实在找不到了,所以我开始尝试自己制作。这两个声音分别是铅笔划过纸张的声音,还有用笔头点书本的声音。

其实最后在背景音乐的衬托下,这些简单的音效很明显和突出,正好都在重点上,然而最大化的体现了它们应有的作用。而这里有一个基础就是,这个动画足够简单。

最后,我不得不尝试自己做背景音乐。我不断的听一个作曲家的一段钢琴曲,尝试分析理解声音是如何连成一段音乐的。听了一段时间后,我发现组成那段钢琴曲的元音(琴键对应的声音)是很少的,也就是说旋律非常简单。在我模仿做过一段声音后,我发现最重要的是节奏。简单的几个声音在一个稳定的时间间隔上重复出现组成一段声音,几个这样的声音可以组合成一段乐曲。我想其中时间的间隔是个很微妙的东西。

当然,我失败了。我不满意我自己制作出来的背景音乐,那个明显不好。在最后几天,我甚至跟主办方说我不想在大会上播放那段动画。不过,最后社区的「小紫」提供了一段音乐,我把它放进去了,经过了一些调整,看上去好不错。

动画含义

Build, Break, Force and Create.

动画有四个分镜,如前面写到的,是四个动词。这四个词组成两句话:

We build, but not afraid to break.
We force, so that we can create.

我们构建了现有的东西,但能不惧怕打破它。

当固有的秩序被打破后,我们将陷入混沌,这时我们需要专注的去做出选择,进行取舍,加入新的东西。如此我们才能创造新的东西。

这个动画其实也就是大会的 Logo 的形成过程,而且保留了每个过程的关键形状。我觉得它们是一个整体,是一个循环。新创造的东西会变成旧的,变成我们构建了的现有的东西,它将是下个循环的起点。

后来我觉得应该把 create 换成 craft ,因为 create 感觉有点夸张,太大,太远。而 craft 则像是平凡细微的动作,持续不断,细心雕琢。而且更符合主题,只有持续不断的做功演进,才能达成创造。

学习的喜悦

设计和制作这个动画历时数月的业余时间,最后汇聚成 20 秒。从无到有,从一个构想到实现,我得到了巨大的满足感。我从未试过把一个想法完整的实现,这让我有了许多自信。那种自信是不再惧怕那些看似做不到的事情,相信自己是有能力做到的。

这个动画在 Youtube 上能看到:

另外,动画的所有素材和源文件我都放在一个管理文档的地方:https://github.com/ichord/RubyConf-China-2015-Logo-video

Show your support

Clapping shows how much you appreciated chord.luo’s story.