空间秀的发现之旅: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)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2016-01-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云数据库(TencentDB)

腾讯云图,让数据说话

这是星云图,他表示的是QQ同时在线人数,看到这个图大家脑袋里面想到什么?QQ,蓝钻、绿钻、太阳、月亮、上学的时候跟同学聊天,认识默认网友,你会是这众多闪亮星星中...

78013
来自专栏用户2442861的专栏

CSS解构系列之-新浪页面解构-01

http://www.cnblogs.com/jikey/p/4240911.html#一-新浪的布局特点

841
来自专栏无原型不设计

从iOS 11 UI Kit中谈谈iOS 11的新变化

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统...

3369
来自专栏数据小魔方

半圆型饼图制作技巧!!!

今天跟大家分享半圆型饼图的制作技巧! ▽ 我们看惯了普通的圆形饼图,是不是总有一种审美疲劳的感觉。毕竟总是对着同一样的版式看,难免会腻味。今天教大家怎么制作半圆...

37010
来自专栏九彩拼盘的叨叨叨

扁平化设计开始流行啦~

在最近几年里,我们发现软件和应用的界面快速的从立体,纹理化变为扁平,简洁化。这种变化趋势是普遍存在的,我们来花些时间来看看这些变化是如何发生的,以及这些变化产生...

804
来自专栏互联网杂技

超实用的设计师个人品牌打造指南

动画早就不是早期人们印象中的低龄向玩物了,从早年的卢卡斯影业到今天的工业光魔,动画技术证明了它可以实现无限的可能性;从70年代的高达、EVA到之后的宫崎骏、皮克...

3587
来自专栏数据的力量

吸睛大法!如何突出网页中的关键内容?

我有特别的抢眼技巧!今天的好文非常值得拜读,此文从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你...

851
来自专栏数据小魔方

图表案例|中国保险行业资产状况调查(经济学人)

今天要跟大家分享的是一个经济学人风格图表——中国保险行业资产状况调查! 本案例图表的核心技巧主要包含两大部分: 符合图表的制作; 经典的配色排版风格。 以下是原...

3995
来自专栏PPT设计

收藏这些网站,做网站开发和PPT设计不再难

平时逛的比较多的网站,国内大牌平面设计师社区,海量优秀平面设计作品可以观摩欣赏。做好PPT从培养自己审美开始吧。

1760
来自专栏AI科技评论

业界丨微软在Office软件里添加AI技术,更方便残障人士使用

AI 在一般性用途方面稳步迈进,比如虚拟助手,但AI有着更微妙的用途,对如今社会产生更本质的影响,比如对于残障患者。 这一点上,微软的Office软件将会迎来新...

31812

扫码关注云+社区