「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

大厂案例

今年 618 互动的动效可以大致划分为两类，星秀猫主形象和入口引导动效。

在项目开始之前，我们就开始沟通整体的技术选型和美术创作工具，也就是创作选型，我们沟通了几种动效选型。一种是帧动画，以逐帧的方式来播放动画；第二种是骨骼动画，基于一套基础的骨架，来播放动画；然后是 Lottie 动画，设计师可以通过 Adobe After Effects（以下简称 AE） 设计动画然后通过插件导出即可渲染出动效。

由于骨骼动画天然适合这类有一个主体形象的动画，我们选择了2D 骨骼动画 Spine 来制作星秀猫主形象，通过网格自由变形和蒙皮技术在视觉上呈现“3D轴”的偏转。正是在 Spine 强大动画创作的支持下，星秀猫才有了“3D化”的动画化表现力。

而入口引导动效，存在量大且需要频繁调整的诉求，而 AE 是设计师们比较熟悉的软件，使用 AE 软件制作 Lottie 动画设计师们都比较愿意，因此我们采用 Lottie 来制作入口动效，制作简单的同时，时间较长的动画场景下相对 apng 和 gif 所需资源也更小。