以电影之眼看CSS3动画（二）

注：此文非干货聚集地，来找干货的对不住了。
注注：又多又大的图预警！！！

上回说到CSS3动画与传统动画之间千丝万缕的联系，现在就让我们来探讨一下用CSS3动画做一部动画电影都需要些什么。

一、

首先你需要一个故事。

即使只是一堆雪花往下掉，也是包含故事的——为什么下雪？是冬天来了？那是冬天的第一场雪吗？第一场雪有什么特点呢？好吧作为一个从没见过雪的南方人我承认我给自己挖了个坑，不过就是类似这种思路，让我们拥有了一个故事，所以，即使只有一秒钟的动画也是有故事的。Use your imagination.

小tip：在做影视题材的专题页时，我会首先根据相关影视的预告片确定入场动画的风格与基调，观看预告片不仅能够了解影片的风格，同时还能学习其字幕出现、消失以及转场的方式，获得一种节奏感，也就是上面所说的时间掌控。在看电影正片时也可留意影片开头与结尾字幕出现的形式，尤其是科幻片，电影字幕的设计与电影风格相辅相成，常常能让你脑洞大开——原来还能这么玩。

preview_of_overheard_3

  • [窃听风云3]预告片中字幕出现的方式表现出信号干扰的效果，由此可以将影片相关专题作出这样的开场动画——

animation_design_of_overheard_3_broadcast

  • 视觉设计：吴丹枫
1
2
3
4
5
6
7
@keyframes peoInner{
	0%, 12.5%, 16.5%, 20.5%{background:none;}
	10%, 12%{background:url(../img_bg/casts_adv_green_red.jpg) no-repeat 0 0;}
	14%, 16%{background:url(../img_bg/casts_adv_green_red.jpg) no-repeat 0 -725px;}
	18%, 20%{background:url(../img_bg/casts_adv_green_red.jpg) no-repeat 0 -725px;}
	13%, 17%, 21%, 100%{background:url(../img_bg/cast_adv_01.jpg) no-repeat top center;}
}
  • 简单的几个不同色调的图片进行替换就能做出类似效果。（demo地址）

二、

当我们在脑内小剧场构思好动画小故事之后（当然，你也可以将它写下来），我们就可以进行关键帧与时间轴的设计了。

任何人都可以用电脑动画软件将一个物体移动。但是如何赋予物体重量、大小、规模、移动和幽默感，这些都与你如何移动物体相关。电脑不能为动画师创造动画，动画师仍然需要了解时间掌握的原则知识以赋予电脑动画生命力。（《动画的时间掌握》）

这时需要注意的是因果关系对动画的影响，“一个动画师必须懂得自然界物体运动的力学知识”，这样“才能创造情绪和表达正确的感觉。”我们来看看为了使动画更加流畅真实，迪士尼爷爷想出了什么办法。［白雪公主与七个小矮人］作为80、90后动画电影启蒙，使用了一项革新动画制作的技术——转描机。

sidelights_of_snow_white

  • 视频：[白雪公主与七个小矮人]（1974）幕后花絮

视频中有一个细节，迪士尼爷爷让动画师注意那位大叔在跳踢踏舞时重力对裤腿的作用（19分15秒）。是的，迪士尼爷爷强调的就是动画与物理学的关系。其实即使是网页中的动画也能用到牛顿运动定律，将网页元素看作一个有重量、有结构、有柔韧性的物体进行动画设计，会得到意想不到的效果。事实上已经有人这么做了——

dribbble_form_animation

Adds a bit of realism to an otherwise static interface. ——The 12 basic principles of animation - The Art of Animation

bouncejs_example

Using Bounce.js and classical animation concepts to bring life to user interfaces. ——Giving Animations Life

三、

不断的修改与调整。

这是一个需要细致与耐心的过程，你得在不断的调整中保持大局观，避免陷入细节的纠结，同时又需要有能够将别扭的细节调整好的灵感。说白了就是同时拥有汉子的粗犷与妹子的细腻。节奏是一个很重要的要素，与银幕上的动画类似，CSS3动画创作者的意念必须即时并完全交给观众。

意念清晰易懂靠两个因素：1、好的表现手法和设计，要使每个主要动作能以最清楚和最有效的方式呈现在银幕上。2、好的时间掌握，要有足够的时间先使用户预感到将有什么事情发生，然后用于表现动作本身，最后要有好的收尾。这三者中，任何一项所占时间太多，便会感觉节奏太慢，用户会感到不耐烦，动画的出现便如同鸡肋。反之，如果时间太短，那么用户在注意到它之前，动作已经结束，创作者的意念未能充分表达，就浪费掉了。——《动画的时间掌握》

四、

别忘了进行性能测试。

这是一步有可能推翻前面两步甚至三步的一个步骤。但是即便发生了这样的事，也不要气馁，这并不意味着之前做的前功尽弃，反而是个宝贵的财富——对于性能的感受又多了一次体验，而其中的一些动画心得或许下次也能用上。

说了这么多，一切都显得辣么抽象，下面就上栗子。

animation_of_an_eye

这是个使用了最简单的css属性——padding、line-height、box-shadow——实现了令人吃了一斤效果的栗子，就像一道脑筋急转弯一样让大家对CSS3的动画的理解不止于CSS3的新属性，我们曾经用烂的CSS2.0属性同样也能开出花儿。

我们看到，CSS3动画并不只是由transform、opacity等等简单组成，它还可以包含许许多多的设计、想法、甚至感情。台上一分钟，台下十年功在动画上也适用，或许在所有事物上都适用。

目前为止用CSS3动画拍电影只是个概念，但想象一下你是这部电影的导演，所有元素都是可调度的场景与角色，用CSS3动画拍电影是不是也没有那么遥远了？

最后，我想将我一直以来没能找到合适实现方法的动画效果放上来，希望能够抛砖引玉、集思广益：

frames_of_flame_1

frames_of_flame_2

  • A 冷空气从火的底部冲入，受热后上升。 B 一套火的循环①-⑧，标以×的漩涡一个接一个地向上升起。升得越高，速度越慢。

火焰的动作受火的上部流动着的空气的控制。最热的部分在火的中央，在这之上热空气上升，当热空气上升时，旁边的冷空气冲入取代热空气的位置。这部分冷空气变热后又上升，这个过程重复不已。空气的流通常常使火焰成为粗略的圆锥形，由冷空气的漩涡形成一连串锯齿状火焰，从火的底部向里和向上移动。（《动画的时间掌握》）

除了空气与火焰的关系外，火焰的运动由于随机性很大，循环动画需要写得看不出动作在循环也是难点之一。如何才能在保证结构、性能的同时做出最佳的火焰效果？

最最后，放上迪士尼爷爷的一段话，在我做动画甚至做任何事时它将不断地在脑海中回响：

曾经有人问迪士尼，[白雪公主]大受欢迎的秘密是什么？他回答说：

“我们只能确定一件事，每一个人都有童年，每次拍一部新片，我们不是为大人而拍，也不只是为小孩子拍，我们是为了唤醒每个人内心深处那种早就被遗忘的纯真世界。”

参考资料：

推荐：