来自星星的花朵 - 腾讯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 条评论
登录 后参与评论

相关文章

来自专栏海说

Java应用中常见的JDBC连接字符串(SQLite、MySQL、Oracle、Sybase、SQLServer、DB2)

Java应用中常见的JDBC连接字符串 Java应用中连接数据库是不可或缺的,于是便整理一些可能用到的JDBC的jar包及其相匹配的URL,以备日后查阅。 1)...

2680
来自专栏跟着阿笨一起玩NET

[C#]工具类—FTP上传下载

  不错的文章:http://www.cnblogs.com/greatverve/archive/2012/03/03/csharp-ftp.html

1081
来自专栏积累沉淀

Hive2.0.0操作HBase 1.2.1报错解决

首先看错  org.apache.hive.service.cli.HiveSQLException: Failed to open new session: ...

2319
来自专栏互联网开发者交流社区

WinForm之窗体应用程序

1763
来自专栏码匠的流水账

聊聊EurekaRibbonClientConfiguration

spring-cloud-netflix-eureka-client-2.0.0.RELEASE-sources.jar!/org/springframewor...

1121
来自专栏跟着阿笨一起玩NET

GB2312转换成UTF-8与utf_8转换成GB2312

1711
来自专栏张善友的专栏

Using sqlite with .NET

The other day I found that there is a .NET wrapper for sqlite. sqlite is a very ...

2208
来自专栏Pulsar-V

C#下各种获取时间的姿势

直接贴代码吧 DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2005-11-5 13:21...

3196
来自专栏听雨堂

想修改CSS

      下载了一个“通用”的CSS文件,本来想偷懒的,结果发现有问题,就是它用的颜色是变量定义的,无法识别。我又找不到在哪里可以定义。 BODY{     ...

20110
来自专栏james大数据架构

C#日期格式转换

DateTime dt = DateTime.Now; // Label1.Text = dt.ToString();//2005-11-5 13:21:25 ...

1875

扫码关注云+社区