2.5 - 动画状态机、灵感中心

阅读时间：2分钟更新于 2025-08-20 15:53

我们很高兴地宣布，「动画状态机」正式登陆，全新升级的「灵感中心」正式上线！

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

🎬 动画状态机 —— 交互式动画真正“活”起来！

这是一位“动画指挥家”，让互动类型动画的制作变得轻松自如，无论是设计同学还是开发伙伴，都能从中获得「设计即交互」的创作体验！

📖 什么是动画状态机？

「动画状态机」是一种将动画划分为不同“状态”并定义其切换逻辑的架构模式，它广泛应用于游戏开发、人机交互系统与高级 UI 动效设计中，是实现“响应式动画”的核心技术之一。

🙋 为什么你需要动画状态机？

传统方式	状态机方案
时间轴硬编码跳转	可视化逻辑图，逻辑清晰易维护
需开发介入实现交互	设计师独立完成交互动效
动画复用困难	模块化片段 + 参数化控制，高复用性
难以处理复杂状态	层级结构 + 混合模式，应对复杂场景

🔁 用【参数】控制状态流转

【参数（Parameters）】支持布尔值、整数、浮点数等类型，你可以通过设置参数条件来触发状态切换。

🔁 用【事件】完成设计独立的交互闭环

通过【事件（Events）】机制，设计师可直接绑定用户操作（如点击、长按、滑动等）来触发状态跳转。

🎨 三种高级混合模式，掌控动画融合艺术

支持【1D（一维）】、【Additive（相加）】、【Layered（分层）】三种主流的动画混合策略，满足不同层级的动效需求。

✂️ 一键生成动画片段

在时间轴上框选任意时间段，快速创建为独立动画片段（Animation Clip），并用于某个状态的播放单元。

⚙️ 参数可编程，状态可驱动，开发更灵活

开发可通过 @galacean/effects 开放的接口动态设置状态机参数（布尔 setBool()、数字 setFloat()、触发器 setTrigger()）：

import { Animator } from '@galacean/effects';

// 从场景中获取 Animator 组件，用于控制动画状态机
const animator = composition.getComponent(Animator);

animator.setBool('Boolean1', true);