回顾：制作朋友圈广告年度评选

朋友圈广告年度评选，是由微信广告官方发起的广告创意评选活动，TOP 10 由大众投票产生。每一年，该活动通过 H5、公众号、视频号等渠道，完成评选流程，用户作为评委，最终将获得一张 “评委卡”。

自 2017 年开始至去年 2023 年，我担任该活动的开发负责人，和设计师已经一起打造了 7 个作品。如果你对 2018 - 2020 年的视觉设计感兴趣，可以去看看 这个人。

先前，我回顾了一些 点赞/投票动画集合，它们大部分就来源于这项活动。现在，我想以每年的方式一一回顾，分享一些感受。

2023

可点击 Demo 链接 在移动端体验活动。

2023 年，呼...又是一回酣畅淋漓的赶工。每一年的时间当然都是紧张的，但这一年确实是历史上最紧迫的一次，也许没有之一。

因为有同事的协助，这一年没有负责评委卡生成部分的工作。我所负责的其他部分，都用力做出了令自己满意的结果。今年活动数据也史无前例的好看，这一年真好。

转盘交互动画

开了这个站的第一篇文章，就写了 转盘交互动画：以关键参数，细化我们的感受。在这篇文章中我讨论了 4 个关键问题。

转盘动画的背后，存在着数个关键参数。理解这些参数，不（仅）是为了理解实现原理本身，而是为了在改变这些参数的过程中，寻求简单的“对”或“不对”之间的具体差异，更是为了细化对交互动画的具体感受。

文章发布在腾讯内部，荣幸入选了 2023 年腾讯知点设计通道的优秀文章。自然也是唯一一篇由 UI 开发岗撰写的参选文章。

腾讯知点设计通道优秀文章

爱心惯性动画

使用 react-spring 的具体实现可阅读 这篇文章。

点赞动画

具体细节可阅读 这篇文章。

2022

可点击 Demo 链接 在移动端体验活动。

2022 年，我个人最大的也可能是唯一的亮点就是生成评委卡的动画。不过，光是这个动画，就让我感到很满足了。

设计目标

这一年我们的目标：

1. 设计目标：尝试新玩法、局部有亮点；创意主题侧重“沟通交流”；
2. 评委卡目标：升级生成的仪式感；加强情感体验、专属感；
3. 具体实现：生成过程的强化。

要做到过渡是 有趣的，且有秩序的。要保证元素不能显得杂乱，时间不能显得冗长。

就像乐高积木一样，完成后的乐高模型可能会被遮挡或隐藏，但组装的过程和体验将一直留在人们的记忆中，成为一种有价值的体验和回忆。

元素层级解构

在拿到设计稿后，在我心中已经解构出了下面的层级关系（当然我必须做出这个酷炫的动画示意）：

我是这样组织动画的：

第一步：开场

1. 背景 ❤ 首次交换位置
2. 卡片背面 ❤ 出现
3. 主色为蓝色，开始绘制基本信息

第二步：卡片主要文字

1. 随着卡片的摆动，背景 ❤ 变化位置与大小
2. 随着文字的出现，百分比与进度条开始增长

第三步：卡片次要文字

1. 随着卡片的摆动，背景 ❤ 变化位置与大小
2. 随着文字的出现，投票数开始增长

第四步：创意图片

1. 背景 ❤ 飞出，为完成做准备
2. 创意图片依序从三个方向出现，保证每张展现
3. 别针从下方飞入，完成固定

第五步：完成

1. 卡片归位
2. 背景 ○ 从中心放大、背景 ❤ 出现
3. IP 与橙色 ❤ 一同飞入

完整动画

1. 生成时间：近 5 秒，耗时很多但不能感到冗长 -> 突出趣味和专属感；
2. 运动元素：近 30 个，元素很多但不要感到杂乱 -> 建立秩序感。

2021

2021 这一年，在投票动画的细节上下了一点功夫。实现上的小技巧，就是动态 SVG 蒙版。

SVG 是一张完全受我编写的、矢量的、而且还是 CSS 动画的图，它是一份形似图片的代码。利用这点应用在蒙版 mask 上，令当时的我非常兴奋。

比如头像的动画：

头像动态 SVG 蒙版

其基于的就是这样的一份我直接把 CSS 动画写在里面的 SVG 蒙版：

<svg
  id="$accumulator"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 102.38 90.76"
>
  <style type="text/css">
    #avatarPath {
      animation: apa 0.8s ease both;
    }
    @keyframes apa {
      from {
        stroke-dashoffset: 272.5561828613281;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
  <path
    id="avatarPath"
    d="M18.69 39.27s-2.5-10.3 9.9-11.5 11.3 13.3 6 12 13.2-23.7 26.9-22.2S69 58.87 56 54.17s20-16.9 25.8-5.6 3 13.1-4.7 16.3-21.1 2.3-28.9 3.4S39 74 29.69 73.17s-17.9-6.9-7.3-19.1l-3.4-13"
  />
</svg>

<svg
  id="$accumulator"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 102.38 90.76"
>
  <style type="text/css">
    #avatarPath {
      animation: apa 0.8s ease both;
    }
    @keyframes apa {
      from {
        stroke-dashoffset: 272.5561828613281;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
  <path
    id="avatarPath"
    d="M18.69 39.27s-2.5-10.3 9.9-11.5 11.3 13.3 6 12 13.2-23.7 26.9-22.2S69 58.87 56 54.17s20-16.9 25.8-5.6 3 13.1-4.7 16.3-21.1 2.3-28.9 3.4S39 74 29.69 73.17s-17.9-6.9-7.3-19.1l-3.4-13"
  />
</svg>

因为 mask 只能接收图片，就没办法以 CSS 的方式直接以代码驱动动画。SVG 正好解决了这个问题。这也是为什么可以在 Demo 中调节动画 duration，因为这是一个 CSS 动画。

另一个细节是，如果把上面的 SVG Base64 后放到 mask 属性后，动画仅会播放一次。这时候我们可以设置一个累加器，每次播放时将数字 +1，设置到 svg 的 id 或者其他属性，即能保证每一次的 mask 值都是不同的。

投票动态 SVG 蒙版

同样的思路应用到投票动画上，为了实现绿色文字被画笔划过，变为白色的效果。设计师认为随着划过，文字整体做一个简单的不透明度变化也不是不行。我还是希望实现更符合划过这样的效果：

我是这样画这张蒙版 SVG 的：

取消投票的动画也类似，只是蒙版变为了一个更简单的 rect。这个动画的细节比较多。还需要考虑不同位数的细微差异：

2020

这一年在表现上做得较少。每次回顾这一年都因为一些不顺利的事而心情复杂。这一年的自己稍许有点低谷。

花了蛮多时间手 k 了入场动画，因为不希望播放视频，现在看这样的优化其实也不是完全必要，当然确实对首屏时间有帮助：

Puppeteer 脚本，评委卡的走查验证及自动化的中文字体压缩：

当然我们实现得还是足够精致的，这是我和我们项目的基本要求：

进入欢迎页

参与投票

生成评委卡

2019

这一年 5 位设计师伙伴为每一支广告都制作了一个精美的心动动画，我使用 lottie 播放就可以了：

我的工作很简单，就是把设计师的成果摆到页面上。

我们对这些动画太喜欢了。我不希望在短短的十几天活动之后，它们就消失了。我就设计并制作了这样一个站点，称之为 Best Hearts：

Best Hearts

Each year, we select 40 WeChat Moments ads to be celebrated as MOST LIKED ADS of the year.
We name this annual event as Best Moments.
In 2019, we designed these animations inspired by each of them,to encourage more innovation, elegance and creativity.
So we call them Best Hearts.

比起完成整个项目本身，制作这个站点是我认为更有意义的事。因为我真的很喜欢它们。

—— 如我所说，我的工作很简单，就是把设计师的成果摆到页面上。

一些对页面体验的打磨：

2018

自 2017 年的首次尝试之后，2018 年我们的活动有了很大的提升。在开发上，也基本决定了未来的结构框架。

在设计上，2018 年的主题是 “矩形” —— 承载朋友圈广告创意的容器。设计师使用矩形结合内容、蒙太奇，制作了开场动画，传达令人激动的创意氛围，号召大众为自己的喜爱投票。

开场视频

参与投票

生成评委卡

2017

故事从这里开始。急急忙忙地开发，急急忙忙地测试。和未来的几年相比，流程是最简单的，设计是最精简的，但心里是最慌的。

1. 在微信 webview 中插入了第 16 个视频后，页面就不可避免地崩溃。试过了暂停和销毁，最后实在搞不定，只好将活动的视频限制在 15 个；
2. 一开始做了一版小程序，但最终选择了更合适的 H5；
3. 半夜给同事打电话，他陪我加班到 4 点；
4. 上午测试，下午上线，一上线就 bug，后台峰值就没顶住；
5. ...

最后

写完了，终于写到了文章的最后，写到了故事的开始。

回顾这些作品时，我就在想，我总是享受我们设计团队主导的活动，AD UI 也好、官网 也好，和其他业务项目就是让我感到不同。我将自己的想法和偏好融入了这些作品，它们携带着我的思想，替我表达。

我享受和设计师合作的创作过程。我们职责互补，但不模糊。我们忘却时间，将对个人实现的追求托付于我们的作品。我仍然记得 2019 年拿到设计稿时，看到设计师为每一支广告都制作了一个精美的心动动画，我大半夜坐在电脑前，真的感到太美、太开心了。我理解我的设计师伙伴们。

我这个人很简单，只想要做优雅和精致的 UI。我很庆幸遇到这样适配自己特长的项目。

每一年年末，朋友圈广告年度评选如约而至。每一次都有挑战。对我来说，这是最具有影响力的项目。也有过觉得自己的能力不足，偷偷掉眼泪的时候（2018 年？）。每一次的完满结束，就像是给一年的工作结了一个好尾。可以轻松地吃一顿饭了，可以幸福地迎接新年了。

这个项目的名称是 Best Moments，它双关了“朋友圈”和“瞬间”。它也是我和团队的 Best Moments。

—— 真是一个充满美好的项目。