查看原文
其他

TQ 2018-05-31

前言

今天除了有专访外,还可以来看一看Qzone的动画是怎么产生的。虽然早读君已经过了玩空间的年纪,但还是很有冲动再次去看看空间。那么今天由@TQ来分享。


正文从这开始~


一:背景描述
每次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实现粒子动画,此处不做赘述,请参看之前写过的一篇总结。


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


它的工作流程一般包括:1、通过内置模型组件建模(或导入外部3D模型);2、通过固态层的方式,给物体添加材质;3、配合摄像机运动,来调整最终动画效果。


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


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


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


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


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



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


关于本文

作者:@TQ

原文链接:http://isux.tencent.com/the-making-of-qzone-6-0-animation.html


长按图片识别图中二维码


    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存