来自星星的花朵 - 腾讯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)