每至春节前夕，支付宝的集福活动便如一场盛大的全民狂欢，迅速席卷全国。
为赋予用户一场沉浸式的奇妙之旅，快速进入集福的世界，设计师以高效的视觉表达为笔、灵动的动画效果为墨，精心勾勒出每一处细节，只为让用户在踏入的瞬间，便能沉浸于这场愉悦且美好的视觉盛宴里。
视频加载失败，请刷新页面再试
刷新 
视频加载失败，请刷新页面再试
刷新 然而，在这逐年迭代下，其对动效和性能的表现也有着更高的要求。Galacean Effects 动效，作为历年集福活动背后的核心技术，在保障几亿用户享受流畅、惊艳视觉体验的过程中，发挥着不可或缺的作用。Galacean Effects是一款由蚂蚁集团创意设计中心与体验技术部联合出品的专注于移动端的在线化动效方案。
设计师或动画师在编辑器上制作好，然后发布或导出 JSON/ZIP 产物，开发加载产物并播放即可，不用做编码的还原，制作结果等于上线效果，显著降低动效相关的实现成本，非常高效、稳定。
2025 年的集福最大的特色就是支持 28 套 IP 共计 140 张精美酷炫的福卡，每一套福卡都有独立集齐的动画效果，每一张福卡都有多种展现的形态以及千人千面的组合。
🧧主题福卡出场效果：
视频加载失败，请刷新页面再试
刷新 🧧集齐中奖的效果：
视频加载失败，请刷新页面再试
刷新 动效制作一般涉及“效果的还原度”、“动效的主要组成”以及“数据的动态化”等几个维度，下面我们将从这几个维度深入分析一下。
Galacean Effects 最大的优势就是所见即所得，无论是哪种形式的创意，只要设计师或动画师在编辑器上制作好，然后发布或导出 JSON/ZIP 产物，开发加载产物并播放，就可以在各平台 100% 还原落地。
视频加载失败，请刷新页面再试
刷新
Galacean Effects 支持众多的动画类型，除了基础的动画类型，集福活动中主要用到了 Spine 骨骼动画、粒子特效、透明视频，下面将从这三个维度详细介绍其实现的过程。为了呈现更细腻顺滑的 IP 动作，Spine 骨骼动画成为了角色动画的首选，动画师会在 Spine 中制作好角色和动作，并实现人物的眨眼、舞臂、甩尾等控制： 视频加载失败，请刷新页面再试
刷新 Galacean Effects 支持 Spine 软件产物的解析和渲染，对需要通过骨骼动画完成细节刻画的 IP 就能很好的支持。此外，通过与蒙版、编排动作顺序等效果的结合，就可以得到更真实的效果呈现。
如下图，在 Galacean Effects 中对 Spine 的动作编排以及与其他元素融合以呈现人物从卡面中穿出的效果：
多样的粒子效果
集福的 IP 动画上，右边增加了粒子系统制作的彩带、浮游等粒子效果，对比左侧，能更好地带给用户集齐套卡的喜悦感： 视频加载失败，请刷新页面再试
刷新 粒子系统是 Galacean Effects 中最大的特色，常用于烟花、彩带、爆炸等氛围效果的制作。设计可以通过设置发射器、粒子运动参数，实现各种粒子氛围，表达更丰富的视觉效果。
综合考虑，IP 的选择使用透明视频为主体：
设计按规则制作好并导出为透明视频格式，Galacean Effects 通过单独采样 alpha 通道值支持视频的透明渲染，然后使用视频元素即可展现透明效果。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
集福众多的场景，需要做到千人千面、交互反馈、动态展示等依赖实时渲染的能力。这就需要借助 Galacean Effects 的多合成播放、动态文本和可编程等方案来实现不同用户视角下如“多样的 IP 设定”和“关卡进度切换”。
多合成播放
28 套 IP 主题动画和关卡动画在编辑器导出后将产出多达120+个 JSON 产物，而每个用户所处的关卡进度、每个关卡状态和选择的 IP 等数据均是千人千面的，设计无法穷举出所有用户的动画排列组合情况，此时就需要开发根据用户的数据组合出当前用户使用的 JSON（合成）数据并播放。多合成叠加播放
每个关卡选取关卡未解锁、IP 收集中、IP 已集齐待开奖、IP 已开奖之一的动画，组合后同时渲染五个关卡的动画
开奖时顺序播放 IP 开奖动画、得奖品动画、闯关成功动画、得红包动画 视频加载失败，请刷新页面再试
刷新
IP 的左右切换是基于 Galacean Effects 的 Swiper 组件来实现的
动态文本和图片
用户持有的卡片数量、关卡描述图片和文案等需要动态下发的数据，在 Galacean Effects 中match可以通过数据模板功能轻松实现。设计同学只需要在编辑器中放置好元素的位置并给定开发同学元素名，即可轻松完成文本或图片内容的动态替换和展示。
可编程
如下面的弹卡动画，需要根据用户的实时得卡数量，决定人物是否从卡面穿出、传出时卡面的透明度变化、缩放弹动等效果的展示。
Galacean Effects 实时渲染另一大优势就是允许根据动态数据或用户的交互进行编程开发，从而带来更多样的效果。因此，设计只需在编辑器制作效果，并定义好需要操作的 IP 角色，开发再借助开放 API 进行逻辑的控制。多人协同
视频加载失败，请刷新页面再试
刷新 动效在创作的过程中，设计之间需要接力、配合，特别是在海量设计与制作任务的对接过程中更注重敏捷高效。从方案的确定到上线，往往给到的设计周期是很短的，如何在极短的周期限制性，助力业务快速的上线是设计时同样关注的问题。
与传统的桌面设计软件相比，Galacean Effects 支持在线化的多人协作方式，不同职位和部门的人员，同权限的可以通过在线链接在浏览器同时修改和观察同一个动效项目，显著减少了因过程中的同步和沟通带来的成本，实现了在任务繁重的情况下，能稳定对接、快速产出。
面对全国亿级用户，中低端设备的渲染性能是巨大挑战，如何保证动效的视觉效果不打折扣的同时也能流畅的运行，运行策略的精细化是主要的方向。
加载速度
有别于小游戏等类型的应用可以通过单独的加载页面来加载资源，集福的所有页面对加载速度有着很高的要求，要做到进入页面可以快速看到。为了实现快速加载，项目组除了采用传统的方式对资源进行优化，同时也在编译、解码等方面进行了大量的检测和优化工作，最终使主会场的加载时间控制在合理的范围，确保用户能够迅速进入活动页面，提升操作流畅性和使用体验。●资源优化：对素材（如：图片尺寸、视频格式等）检测并优化。●着色器编译：WebGL 的着色器编译通常会占用大量的时间，Galacean Effects 的 runtime 通过优化着色器代码的同时在支持 WebGL2 的设备上使用并行编译的扩展特性，减少着色器编译的时间。●图片解码：为了减少图片体积，开发往往会使用 WebP，AVIF 等压缩图片格式来减少网络带宽，但是在 WebGL 加载纹理的过程中，采用上述图片格式可能会增加解码的时间。经过测试对比，发现结合网络下载和解码的时间，使用 PNG 的场景综合加载速度会更快，因此最后采用了传统的 PNG 图片。当然，WebGL 是支持压缩纹理格式的，但是目前会在某些机型下有兼容性问题，后续解决后会优先采用。
高性能渲染集福活动既要看得酷，也要靠得住，为了保证亿级用户不同设备上的渲染效果，Galacean Effects 提供了面向不同性能设备的分级渲染能力，同时结合云渲染来确保即使少量低端设备上的渲染效果，旧如十年前的设备也能得到丝滑的动效体验。高端机 | 中端机 | 低端机（云渲染） |
|
| 与中端机 效果相同 |
一般的，H5 单页面的内存应低于 500M 左右，过高的内存占用可能会导致页面闪退或应用崩溃。项目组通过优化素材资源、内存主动释放和复用等方式，最终维持集福主会场的常态内存在 400M+，部分峰值场景在 500M 左右。机型 | 系统 | 内存（MB） |
iPhone 15 | iOS 17.0 | 427 |
iPhone 16 Plus | iOS 18.0.1 | 411 |
iPhone 11 | iOS 14.4.2 | 414 |
集福动效测试场景内存占用（含 6 个 Spine、一个视频、若干图层元素） |
🧧Galacean Effects 动效技术
分析了这么多动效的实现，下面就从“解决的问题”、“价值”和“优势”等方面系统的介绍一下 Galacean Effects。
设计师：设计效果 = 上线效果，可落地
前端开发：不用关心动效的实现（即：不用编码还原），只需关心业务逻辑
质量同学：不用担心稳定性风险
核心价值设计师在编辑器上的制作效果等于上线效果。
即：可落地
核心模块
更丰富的动画效果：支持动作补间、逐帧动画、骨骼动画、粒子动画、互动视频等基本所有动画类型，同时包含 2D、3D 表现形式
可编程：运行时支持对动画元素或场景进行二次编程，以满足更复杂的业务逻辑，稳定而不失灵活性
跨平台：Galacean Effects 拥有 H5 和 Native 三端运行时，一次创作，多处使用
在线协同：Galacean Effects 基于 Web 技术打造，拥有和新一代 Web 应用一样的在线协作能力
更开放的生态：编辑器支持导入 Lottie、PSD 等产物，runtime 支持其他引擎接入
Galacean Effects 一直贴近设计师进行功能的迭代和体验的完善。设计师在编辑器上的操作体验流畅且高效，充分发挥创意；开发者使用时，无需编码还原，极大地缩短了开发周期，提升了整体效率，助力业务以更快速度、更高质量实现落地。随着技术发展的日新月异，集福活动也在持续创新。然而，无论形式如何变化，传递的新春祝福和温暖始终如初。每年，独具匠心的动效设计衬托出新年的喜庆，也藏着一份独特的记忆。集福十年，回顾近几年的集福活动，哪一年的效果是你所偏爱的呢？
视频加载失败，请刷新页面再试
刷新 🧧结语
最后，正如那句经典所说：镜头后面的头才是关键。因此，真正让 Galacean Effects 绽放出无限精彩的，正是那些才华横溢、创意无限的设计师与动效师们，是他们凭借精湛技艺与奇思妙想，让每一个动效细节都能精准触动用户，成就了这场视觉盛宴。
官网：https://www.galacean.com/effects/GitHub：https://github.com/galacean/effects-runtime