Hello，我们又再次相遇了～ 

我就是那个东瓜南瓜西瓜没有北瓜的设计师北瓜。

北瓜之前叫“钟情努力”，这事咱以后再说。北漂一族，老家是湖南滴。

为了让自己拿到站酷推荐设计师，于是我变成了一台没有感情的撸图输出机器，所幸这一年的努力没有白费。在进入到花椒直播工作后，发现自己干啥啥不行，吃饭第一名，谁叫我司的食堂美食好吃呢哈哈哈～

———————————————————————

我们来看看需求方给到的素材和最后我完成的“怦然心动”效果

这是大家工作中可能会出现的动效小需求，顺带分享一些小要点

1. 梳理需求 

需要做一个叫“「怦然心动」的图标动画”，看起来还挺很简单的，如果做的太大众化就显得平庸了，那我们肯定要在图标和动效上做出差异化设计。

小要点1：学会分析需求，找到隐藏设计点

2. 确定设计方向 

我翻阅了抖音、快手、陌陌等直播产品的点赞功能，虽没有找到类似“怦然心动”的动画，通过分析我也有所收获，总结出以下设计方向。

1，用爱心做点赞主形象

2，动态视觉呈现多样化

3，多渐变色的过渡使用

小要点2：寻找竞品和参考，或许能得到意想不到的收获

3. 设计图形化 

了解娱乐直播产品的设计风格，我将爱心设计的更圆润饱满些，得到点击前的图标和点击后的图标。

发现点击后的图标有点平凡，我们得做出差异化设计，设想一下爱心代表一个人，想产生怦然心动的感觉是不是必须两个人。

那我们就可以再添加一个小爱心作为点缀，这样是不是有内味了!

调整后的图标生动很多也更形象了，怦然心动的重点还是要在动画中去体现，我们往下看。

差异化设计x1

用脑海联想下整个动画的过程：黑色爱心被点击后立马缩小并消失，紧接着出现触发点（让用户理解到自己已经触发了点击效果），火花由中心向四周炸开并消失，最后出现由小放大的怦然心动图标。

小要点3：做出差异化设计，学会用脑袋想象动画草稿

4. 怦然心动的动效设计 

回忆下我之前说的那个脑海联想动画效果，我们按这个方向尝试动效设计。

第一步：点击后，黑色爱心缩小并消失掉，用到的基础属性（缩放、透明度、缓入运动）。



第二步：在黑色爱心消失掉的一瞬间，触发点（两个圆形都是描边做的），两个圆路径由小变大，描边由大变小至消失，用到的基础属性（路径大小、描边大小、缓出运动）。

第三步：在触发点缩放的中间时间段，火花小元素开始向四周扩散，首先扩散的是小圆球（填充），再是长长的线条（描边），用到的基础属性（位移、修建路径、不透明度、缓入和缓出）。

为什么会提到火花这个词？

“怦”=“嘭”，嘭的一声忽然炸开了，生活中的放烟花预示着好事发生、快乐、热闹等等。那我们可以在动效中加入火花爆炸的效果，视觉上给用户一种“嘭”的状态，情感上传递美好的事情即将发生～

差异化设计x2


第四步：同样是再触发点出现放大的那一刻，怦然心动开始由小变大，用到的基础属性（缩放、缓处运动）。

最后一步·完善：看到这里差不多制作完成了，有点不足的是整个动画给我然心动的感觉还差一点。

我之前说过：怦然心动指的是两个人的的心灵跳动。主要在这个“动”字，只要爱心动起来整个动画就会被赋予灵性。

差异化设计x3

正常来说人的心跳是一个收缩放大的过程，于是我加入了两颗爱心的缩放效果，还有旋转效果（加入旋转让爱心跳动更生动），注意的是旋转/缩放幅度和弹性效果要符合一定的生活常识。

本文算是北瓜的第一篇小教程动效文章～

其实整个动画只用到六个动画属性（缩放、透明度、位移、修建路径、旋转、路径），而这些在工作中基本够用了，多学有益大家一起加油哈！

点个赞，肝一杯

Powered by Froala Editor