来自星星的花朵 - 腾讯ISUX

“Qzone粉丝吧”的动效设计共分为两个版本(粉丝吧现已改版为话题圈),最初版是给明星“送星星”,升级版是给明星“送花”。麻雀虽小但五脏俱全,这两个版本的动效设计,虽然看似简单,其实在背后有着相对复杂、交相呼应的动画叠加效果。

起源:都教授的星星

想让都教授收到你的问候吗?快来Qzone粉丝吧送星星吧! 我不是动画特效师怎么办?没关系!Particleillusion来助你一臂之力! 为了将“互动+视觉”效果做到极致,我们将动效分为以下几部分来制作:能量环、星光轨迹、粒子爆炸、头像光晕、分值动画等。

1、粒子大爆炸

在Particleillusion中,为你提供了近百种特效预设,只需要轻轻点击预设好的原件,就可以让你瞬间变身特效大师!以上面所用到的粒子爆炸效果为例,在粒子库中选取FlashGordon原件,由于其细分效果非常之复杂,导致文件量很大、网络加载扛不住等问题,为了优化互动操作体验,我们仅保留了爆破的大效果,抛弃了不必要的细节,包括:降低了Flash的细分数值、粒子大小、运动范围、生命值、速度等参数,以保证流畅的动画体验效果。

2、星星的轨迹

是不是点一次还不过瘾,想连续点!没错,你每次点击都可以看到不同的星星轨迹!对于多次点击的情况,为了让星星轨迹动画不会那么死板,我们设置了几条运动轨迹,当用户点击的时候,运动轨迹也是随机出现的。同时,根据轨迹曲率的不同,也设置了不同的运动时长,在视觉效果也更加丰富。

3、明星头像反馈+能量波动画

为了增强粉丝在送星星时的沉浸感,在进入页面时,通过能量波循环动画来吸引用户注意力;当粉丝点击送星星之后,在明星头像上方覆盖一层闪耀的光环,让粉丝感到自己在跟明星“对话”, 同时,也增强了再次点击的欲望。

重磅升级版!从都教授星球飞来的花儿

在最初版本的基础上,我们对动效进行了重磅升级,去除了酷炫的爆破画面,取而代之的是更加优美的落英缤纷效果。 同时,在技术实现上也更为复杂,Particleillusion已经完全不能满足我们的需求了,这次我们需要专业特效师的必备神器After Effects,借助其中的Particular系统可以帮我们打造童话般柔美绚烂的效果。

1、让花瓣粒子飞起来

首先,在Particular中,通过设定Particle-Textured Polygon,可以让我们自定义发射器的图形样式,其次,在Texture中选择花瓣层,此时在预览视图中就可以看到花瓣粒子的匀速运动效果;然后,通过调节Particle特效中的Rate、Life、 RotateX、Y、Z来模拟花瓣散开的细节效果;最后,通过曲线动画来控制粒子的加速度,使花瓣散开效果更加自然。

2、更富沉浸感的动画氛围

在新版中,相比之前的星光粒子动画而言,我们打破了小框的拘束,将花瓣的运动范围扩展到整个屏幕,粉丝用户在送花的体验过程中,整体氛围更富有代入感,视觉效果也会更加饱满和震撼!

3、更加丰富的动效细节

正如我们在日常生活中所看到的那样,当往平静的水面上丢一个物体进去时,可以看到水面波纹快速散开的效果。同样的,在新版的动效设计中,我们也对波纹动效进行了细节的优化,为了增强互动的真实感,当花朵飘落到明星头像上时,其周围的波纹也有一个加速扩散的反馈,随后,波纹恢复到匀速循环的状态,动效的体验过程也更加自然。

小结

通过交互动画的形式,可以提升体验的层级感与趣味感,为用户提供更富有沉浸感的体验氛围。它还可以丰富产品的情感特征,让用户可以更加清晰、明确地感知自己的操作,用户与产品之间的交互过程也变得更加流畅。

还等什么?快来Qzone话题圈为自己喜欢的明星送花儿吧!

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。 注明出处格式:腾讯ISUX (http://isux.tencent.com/the-flowers-from-the-stars.html)

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

原文发表时间:2015-07-13

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏量子位

谷歌AI的七个“不正经”玩法,个个能玩一整天

谷歌最近就放出了几只比较搞笑的AI,可以完成一些不走寻常路的工作,比如:帮你实现靠脸吃饭,让你说的跟唱的一样~

913
来自专栏大数据钻研

谈一谈越来越难做的前端

我接触前端的时间不长也不短,13 年入门,14 年初在百度实习,14 中正式参加工作,掐指一算 4 年整。然而这四年间前端的变化已经让很多人摸不着头脑。   昨...

3266
来自专栏IT派

论如何成为技术大牛,GitHub中国区前20名详解

本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!

2700
来自专栏阮一峰的网络日志

每周分享第 29 期

欢迎投稿,请前往 GitHub 的 ruanyf/weekly 提交 issue。

1091
来自专栏我是攻城师

未来是 HTML 5 还是 Flash 的时代?

3607
来自专栏吉浦迅科技

终极DIY打造Jetson拉力赛车全过程(1)

本文作者为kangalow,由Jetsoner开发者论坛版主xID翻译 本文中的圆括号内的内容均为译者注释,方括号内的内容为原文作者注释 本文是“复杂环境下的阿...

4529
来自专栏阮一峰的网络日志

每周分享第 27 期

欢迎大家去 GitHub 的 ruanyf/weekly 提交 issue,进行投稿。

1612
来自专栏爱原型爱设计

时尚的不仅仅是它们的服装,还有它们的网站设计

随着互联网的发展,越来越多的人选择甚至依赖于网上购物,“网店”已经成为时尚服装界的大生意。截止2017年,全球服装市场价值达3万亿美元,但不是那么容易就能做成在...

37214
来自专栏镁客网

罗永浩:我不跟骂TNT的人一般见识

还记得上一场“重新定义下一个十年的个人电脑”的那场发布会吗?这一场,锤子重新定义了7:30。

872
来自专栏大数据文摘

2017年1季度爆文精选 TOP10

1172

扫码关注云+社区