2024-04-302025-07-24Aragakey.@wxad.design

制作点赞与投票动画

好像在工作的这些年中，我做的最多的交互式动画就是点赞或按钮动画。那就简单地整一个集合吧。

因为涉及到比较多的技术栈（甚至 React/Vue 都有）和实现方法，所以都以视频的方式展现，并且简单地梳理一下设计细节与它们背后的实现手段。

微广 11 周年

来自于微信广告 11 周年活动。点赞如果只是数字的增加就太没有氛围了，我们可以把两根应援棒变成烟花棒玩玩：

自强不息，厚德载物。祝微信广告十一周年生日快乐，越来越好。

Aragakey.

在发射 confetti 之前，先进行一个压缩：

@keyframes wxad11Stick {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
  }
  50% {
    transform: translate3d(0, 4px, 0) scaleY(0.7) scaleX(1.35);
  }
}

评选 24

24 年评选的点赞动画最初是这样的：

阶段 0

上面的氛围感有点不足，因此我和设计师加大了一些爱心的尺寸：

阶段 0

但票数和爱心之间没有关联。我们需要投票 -> 动画 -> 票数增加的示意更加明确，因此我们需要一个类似于这样汇聚到上方的动画，在汇聚后票数增加：

阶段 0

最后设计师为我绘制了两套路径，整个动画通过 offset-path 配合 motion/react 实现：

*爱心 lottie 动画由其他项目成员完成。

榜单 v3

朋友圈榜单

视频号榜单

爱心与圆形背景会分别执行一个 0.7s 的 scale 动画，后者会延迟 0.1s 执行。爱心与背景被分层，像是前者的运动带动了后者，从而会让整体更显动感；
最底层为多个彩色爱心向外旋转扩散。

@keyframes bouncy {
  0%,
  100% {
    scale: 1;
  }
  25% {
    scale: 0.9;
  }
  50% {
    scale: 1.35;
  }
  75% {
    scale: 0.78;
  }
}

背景有延时

背景无延时

底层爱心

评选 23

*爱心 lottie 动画由其他项目成员完成。

向上加速运动，爱心旋转 18deg，类 ease-in 曲线；
撞击卡片后继续向上位移 60px，爱心旋转 0deg，最终运动到顶点，类 ease-out 曲线；
开始下落，向下加速运动，爱心旋转 -26deg，类 ease-in 曲线。

爱心轨迹分为三个阶段的连接成为完整连贯的动画。

其他的一些细节：

爱心先放大至 1.2 倍，再缩小至 0.6 倍，这样会更有撞击感，就像你挥拳一样，会先收拳发力，就是这样的感觉；
蒙版的设置实际上是一个很大的圆形，这样在整个运动过程中，爱心都会在蒙版的内部，无需额外的处理。

榜单 v2

这个是在把榜单从 vue 彻底改为 react 的过程中顺手重新实现的。很显然，它参考于 Twitter 的动画。

评选 22

*投票与阿心 lottie 动画均由其他项目成员完成。

投票与阿心 lottie 动画均由其他项目成员完成。这一年在投票动画上我参与比较少（不过我也实现了令自己满意的其他动画 😁）。

评选 21

算是 22 年的退化版。数字部分的蒙版是通过 svg 实现的。由于 CSS 中的 mask 属性只支持图片，因此 SVG 就变得很有用了。甚至可以直接将 CSS 动画写在 SVG 里，这样就实现了一个 矢量的、动态的、可编程的蒙版图片。这让我对 SVG 的认知又丰富了一些，当时非常兴奋。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265 68">
  <style type="text/css">
    #thePolyline {animation:x 0.7s linear both;}
  </style>
  <polyline id="thePolyline" points="..." />
</polyline>
</svg>