空间秀的发现之旅: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 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

数据可视化-EChart2.0使用总结1

图表是企业级Web开发必不可少的一个功能点。也是“数据可视化的一个具体呈现”。今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的E...

2075
来自专栏华章科技

在机器学习方面使用 R + Hadoop 方案真的有那么好?

因为他们在不懂R和Hadoop的特征应用场景的情况下,恰好抓到了一根免费,开源的稻草。

2323
来自专栏進无尽的文章

迪士尼动画与界面动效的一些关联

迪士尼出品的 《疯狂动物城》可谓逗乐了全民,作为迪士尼动画的杰出代表,大人和孩子都爱看的缘由是什么?除了精彩的剧本,拟人和夸张的动画效果可谓是最具吸引力的地方。...

1153
来自专栏人工智能头条

Apache Spark在大规模分布式自然语言处理的应用

1183
来自专栏WebHub

Material Design的概述与环境

Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新...

1515
来自专栏机器学习之旅

应用:用户生命周期

用户生命周期是指用户从加入平台开始,熟悉平台,参与平台,最终流失的整个过程。用户的生命周期相对于自身而言,是一种参与度的变化,参与度也可以称之为活跃度。

1114
来自专栏Python小屋

大学生们颤抖吧,中学生已经开始学Python了!

高中生学Python?这是开玩笑的吧?高中生能学会吗?高中生学Python干啥用?高中生应该怎么学Python?高中学了Python的话大学还要再学吗? 本文我...

2869
来自专栏PPV课数据科学社区

信息图表-快速引导你学习Python去做数据科学

我想通过学习Python语言来学习数据科学,所以我在谷歌上搜索:“我想通过学习Python语言来学习数据科学。而在谷歌,不一会儿的功夫就列出所有关于Pytho...

2994
来自专栏编程

新手如何学习UG,初学UG编程的快速…

新手如何学习UG,初学UG编程的有什么快速入门方法。也许你学习软件时不知道该从哪里着手学起。这里,远歌总结以往学习UG编程时的经验。告诉新手,学习时,一般先学习...

1859
来自专栏大数据挖掘DT机器学习

52 个有用的机器学习与预测API

随着基于人工智能与机器学习的应用如雨后春笋般不断涌现,我们也看到有很多提供类似功能的 API 悄悄登上了舞台。 API 是用于构建软件应用的程序、协议以及工具的...

34210

扫码关注云+社区