空间秀的发现之旅：Qzone6.0动画诞生记 - 腾讯ISUX

一：背景描述

每次Qzone经历大的改版，我们都会为用户诚意奉上精彩的欢迎动画，此次6.0版本也不例外。新版增加了空间秀、侧边栏入口转移至发现tab，当然，还有一些神奇的小功能点的优化，等着大家自己去发现哦，废话不多说直接上动画。

【发现版本】

【空间秀版本】

二：如何让动画形式更具吸引力

在设计之初，我们希望可以给动画更多可能性，因此，参考了大量的国外广告、MG动画以及app推广动画案例。在创新的同时，还要与之前的版本有“继承和延续”的概念。例如：5.0以纯矢量动画为主，5.5以场景实拍+动态元素相结合。

“空间秀”与“发现tab框架重塑”是此次新版的两个重要特征。在其视觉语义的转化层面上，“空间秀”则是倾向于“show”的概念。首先提取其“换装”的这一重要功能点，提炼出一个主角人物，然后根据不同的场景变化，更换与其相匹配的服装。最后的视觉风格采取扁平化与真实场景相结合，将虚拟形象与现实生活场景相结合，在契合产品特征的同时，让画面内容更富表现力，从而增强用户的代入感。

“发现tab框架重塑”则倾向于“模块重塑”的概念，将侧边栏中各个功能入口（如：话题圈、画报等）进行拟物化设计，通过模块之间的“抽离-重组”，最终落地到空间第四个tab栏，从而向用户传递出框架重塑这一概念。

三、如何让动画更炫酷更动感

“空间秀”短片是以人物肢体动画+场景切换的形式来呈现的。为了让人物的运动更加自然，这里使用到了Duik插件。通过它可以实现人物骨骼的绑定，然后通过关节控制点来对人物肢体动作进行控制，动画分为两步完成：骨骼绑定、人物关键帧动画。

在骨骼绑定部分，你需要了解人体的关节，以及他们之间的连带运动关系。

第一：梳理好骨骼关系,并规范命名（如：left-hand）。

第二：设定好图层的旋转中心点。

第三：按照逻辑关系进行父子绑定，大概的父子从属关系是：脚踝-小腿-大腿-腰部-胸部-脖子-头。

第四：为主要的关节点设定运动控制器，因为这次的人物动画不会太复杂，所以我们只在脚踝、手臂、腰部绑定了控制器（如上图）。

第五：将第三步与第四步按顺序逐个选择图层，最后在duik中生成IK。

这里需要特别注意的是，一定要按照顺序选择图层，不然的话就要恭喜你成功造出来一个怪物。

在人物动画部分，则需要了解人体的运动规律，然后根据不同的场景特征，来设计与其相符的人物表情及运动姿态。通过对人物的5个运动控制点，进行关键帧动画的制作，在这里需要反复调试人物运动时的肢体联动关系，以达到最舒服优美的运动效果。

比如：家居的场景，人物出场后有一个招手的动作，与观众产生互动的感觉；旅行的场景，配合其手中的相机道具，在拍照时身体随着手部的摆动，作出相应的支撑动作，比家居的场景运动姿态更加放松；英伦场景，在这里设置了一个动作的兴奋点，人物的肢体运动也更加夸张与调皮。与此同时，在人物运动时，增加一些趣味化的运动线条，丰富人物的动感。为了更好地配合转场效果，我们将相邻两个场景间的“结束+起始”动作进行匹配和定格，这样肢体动作在切换时不会过于跳跃。

为了增强画面的视觉效果，使产品看起来更加上高端大气上档次，需要在适当的时机，增加一些酷炫的粒子特效，从而增加画面活力。首先保证在画面的切换上，过渡更加顺畅和自然，在此基础上，还需要增加一些视觉的兴奋点，从而刺激用户的感官，强化产品的特征。

在粒子的动态设计上想营造一种青春灵动的效果，在Particular中将Emitter Type设定为 Light，然后通过给灯光层单独做曲线运动，最后粒子的运动路径将完美地与灯光（Light）的轨迹相匹配。

关于如何使用Particular实现粒子动画，此处不做赘述，请参看之前写过的一篇总结。

http://isux.tencent.com/the-flowers-from-the-stars.html

“发现” 动画为了营造“变换”这一概念，我们将视频的二维空间进行抽离，将转换的概念进行夸张化的三维演绎。短片中的icon动画是通过Element3d来实现的，这个插件几乎完美的满足了你对三维动画的一切愿望（除了它的建模功能之外），它的强大之处在于可以对三维动画实现完美的操控，当然这也需要你花费极其强大的耐心。

它的工作流程一般包括：

1、通过内置模型组件建模（或导入外部3D模型）；

2、通过固态层的方式，给物体添加材质；

3、配合摄像机运动，来调整最终动画效果。

以开场部分的动画为例，我们将侧边栏的icon全部在E3d内重新建模，然后通过贴图，来丰富物体的材质效果。

首先，通过内置的基本模型库来create立方体，调整其外观参数并将模型复制4份，在右侧的scene中为模型设置好id名称。

然后，模型材质的添加，在E3d中添加材质的方法有两种，如果需要不断的对材质进行微调的话，可以通过图层为模型添加材质。另外一种方法跟3Dmax中的方法类似，也就是选择材质球，然后对texture中的diffuse加载外部贴图文件，再对材质球的refraction和illumination进行微调，来模拟拍摄视频中的环境及光场效果。

最后，动画的调整，因为这里的模型原件是按照Group的形式来封装的，可以对单个组进行运动控制，然后在其内部还封装了Aux Channels的模块，这里可以为不同的channel单独调整动画，在动画中，icon被指定在不同的channel之中，通过对5个icon所在的channel分别制作动画，以达到有层次感的动画效果。这里的动画是基于三维空间进行的调整，因此，同样可以配合摄像机的参数，在画面中营造出细腻的景深效果，使其与真实的拍摄画面有更高的契合度。

同时，为了达到更加细腻的缓动效果，还对物体的运动曲线进行了细致入微的打磨。

关于动画的拍摄部分，这里不做赘述，详情可参见之前的一篇总结：

http://isux.tencent.com/the-making-of-qzone-5-5-animation-2.html

附赠幕后制作花絮

四：小结

通过动人的欢迎动画，一方面可以增强用户对新功能的感知与理解，从而提升产品的转化率。与此同时，还拓宽了产品的推广的途径，让更多的人了解到新版本的更多玩法，不断刷新用户对Qzone品牌的感知度。我们在动画的风格上也在不断延续，同时也在不断找寻更具创新的、富有亲和力的动画表现形式，从而更好地服务于产品功能，提升产品魅力。

感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。

注明出处格式：腾讯ISUX (http://isux.tencent.com/the-making-of-qzone-6-0-animation.html)