UI动画运行时框架
October 27, 2025 · View on GitHub
一个专为游戏引擎（如Unity）设计的AI驱动UI动画框架，支持轨道式动效编辑、纯代码描述和多种预览方式。
🎯 核心特性
- AI友好的API: 提供简洁的接口让AI更容易生成动画代码
- 轨道系统: 基于关键帧的轨道系统，支持浮点数、向量和颜色动画
- 多种缓动函数: 内置线性、二次、三次、弹性、弹跳等多种缓动算法
- 组件化设计: 提供位置、缩放、透明度、颜色、旋转等常用动画组件
- 复合动画: 支持序列、并行、循环、延迟等动画组合方式
- 双运行时支持: 同时支持Unity和独立GUI预览工具
- 纯代码描述: 完全通过代码定义动画，无需编辑器依赖
📦 项目结构
UIAnimationRuntime/
├── UIAnimationRuntime/ # 核心运行时库
│ ├── Core/ # 核心数据结构
│ │ ├── Vector2.cs # 二维向量
│ │ ├── Color.cs # 颜色结构
│ │ └── Easing.cs # 缓动函数
│ ├── Tracks/ # 轨道系统
│ │ ├── ITrack.cs # 轨道接口
│ │ ├── FloatTrack.cs # 浮点数轨道
│ │ ├── VectorTrack.cs # 向量轨道
│ │ └── ColorTrack.cs # 颜色轨道
│ ├── Groups/ # 轨道组
│ │ └── TrackGroup.cs # 轨道组实现
│ ├── Animation/ # 动画序列
│ │ └── AnimationSequence.cs # 动画序列
│ ├── Runtime/ # 运行时引擎
│ │ ├── AnimationPlayer.cs # 动画播放器
│ │ └── AnimationEngine.cs # 动画引擎
│ ├── Components/ # 动画组件
│ │ ├── AnimationComponent.cs # 动画组件基类
│ │ └── CompositeAnimation.cs # 复合动画
│ └── AI/ # AI友好API
│ └── AIFriendlyAPI.cs # 动画工厂
│
├── UnityIntegration/ # Unity集成包
│ ├── UnityVector2.cs # Unity向量适配器
│ ├── UnityColorAdapter.cs # Unity颜色适配器
│ ├── UIAnimationBehaviour.cs # Unity行为组件
│ └── UnityAnimationImporter.cs # 动画导入器
│
├── PreviewTool.Web/ # 浏览器预览工具 (Blazor WASM)
│ ├── Pages/Index.razor # 主页面
│ ├── Components/ # 组件（时间轴/预览矩形）
│ └── wwwroot/ # 静态资源
│
└── Examples/ # 示例代码
└── Program.cs # 各种动画示例
🚀 快速开始
1. 创建简单的移动动画
using UIAnimationRuntime.AI;
// 创建从(0,0)移动到(100,100)的动画，持续2秒，使用EaseInOutQuad缓动
var animation = AnimationFactory.CreateMove(
"MoveAnimation",
0, 0, // 起始位置
100, 100, // 结束位置
2.0, // 持续时间（秒）
"EaseInOutQuad" // 缓动函数
);
// 注册到动画引擎
AnimationEngineInstance.Instance.RegisterAnimation(animation);
// 创建播放器并播放
var player = AnimationEngineInstance.Instance.Play("MoveAnimation");
2. 创建复合动画（多个属性同时变化）
var animation = AnimationFactory.CreateComposite(
"CompositeAnimation",
// 起始值
new Dictionary<string, object>
{
{ "Position", new Vector2(0, 0) },
{ "Scale", new Vector2(1, 1) },
{ "Rotation", 0f },
{ "Alpha", 1f }
},
// 结束值
new Dictionary<string, object>
{
{ "Position", new Vector2(200, 150) },
{ "Scale", new Vector2(1.5f, 1.5f) },
{ "Rotation", 180f },
{ "Alpha", 0.5f }
},
2.5, // 持续时间
"EaseInOutCubic"
);
3. 使用组件创建复杂动画
using UIAnimationRuntime.Components;
// 创建位置动画
var positionAnim = new PositionAnimation(
new Vector2(0, 0),
new Vector2(100, 0),
1.0,
Easing.EaseInOutQuad
);
// 创建缩放动画
var scaleAnim = new ScaleAnimation(
new Vector2(1, 1),
new Vector2(1.5f, 1.5f),
1.0,
Easing.EaseOutElastic
);
// 创建淡出动画
var fadeAnim = new FadeAnimation(
1.0f,
0.0f,
1.0,
Easing.EaseOutSine
);
// 组合成序列动画
var sequence = CompositeAnimation.CreateSequence(
"SequenceAnimation",
positionAnim,
scaleAnim,
fadeAnim
);
var trackGroup = sequence.CreateTrackGroup();
4. 创建特殊效果
弹跳球动画
var bounceAnim = AnimationFactory.CreateBounce(
"BouncingBall",
0, 100, // 起始位置
150, // 弹跳高度
3.0, // 持续时间
4 // 弹跳次数
);
脉冲动画
var pulseAnim = AnimationFactory.CreatePulse(
"PulseAnimation",
1.0f, // 起始缩放
1.5f, // 峰值缩放
1.0 // 持续时间
);
波形动画
var waveAnim = AnimationFactory.CreateWave(
"WaveAnimation",
"Scale", // 属性名
0.5f, // 振幅
2.0, // 持续时间
2.0f // 频率
);
🎮 Unity集成
1. 导入UnityIntegration包
将UnityIntegration项目添加到Unity项目中。
2. 创建动画组件
在Unity场景中，创建一个GameObject并添加UIAnimationBehaviour组件。
// 在脚本中
public class MyUI : MonoBehaviour
{
private UIAnimationBehaviour animationBehaviour;
void Start()
{
animationBehaviour = GetComponent<UIAnimationBehaviour>();
animationBehaviour.SetAnimation("MoveAnimation");
animationBehaviour.autoPlay = true;
}
void OnMouseDown()
{
animationBehaviour.Play();
}
}
3. 从JSON导入动画
using UIAnimationRuntime.Unity;
// 导入动画数据
AnimationImporter.ImportAndRegister("path/to/animation.json");
🖥️ 预览工具（浏览器）
运行PreviewTool.Web项目可以在浏览器中实时预览动画效果。
运行方式
- 安装WASM工具（如未安装）：
dotnet workload install wasm-tools - 运行：
dotnet run --project PreviewTool.Web - 打开控制台输出的地址
功能特性
- 动画列表管理
- 播放/暂停/停止控制
- 时间轴拖拽与关键帧刻度
- 循环播放
- 播放速度调节
- 内置示例动画生成器
- JSON 导入/导出
🎨 可用缓动函数
Linear: 线性插值EaseInQuad: 二次缓入EaseOutQuad: 二次缓出EaseInOutQuad: 二次缓入缓出EaseInCubic: 三次缓入EaseOutCubic: 三次缓出EaseInOutCubic: 三次缓入缓出EaseOutElastic: 弹性缓出EaseInElastic: 弹性缓入EaseOutBounce: 弹跳缓出EaseInBounce: 弹跳缓入EaseOutExpo: 指数缓出EaseInExpo: 指数缓入EaseInOutSine: 正弦缓入缓出（最自然）
📘 API参考
AnimationFactory
提供静态方法创建常用动画：
CreateMove(): 创建移动动画CreateScale(): 创建缩放动画CreateFadeIn(): 创建淡入动画CreateFadeOut(): 创建淡出动画CreateColorChange(): 创建颜色变化动画CreateComposite(): 创建复合动画CreateBounce(): 创建弹跳动画CreatePulse(): 创建脉冲动画CreateWave(): 创建波形动画
AnimationPlayer
控制动画播放：
var player = new AnimationPlayer();
player.Load(animation); // 加载动画
player.Play(); // 播放
player.Pause(); // 暂停
player.Stop(); // 停止
player.Seek(2.5); // 跳转到指定时间
player.Speed = 1.5f; // 设置播放速度
player.IsLooping = true; // 设置循环播放
AnimationEngine
全局动画管理器：
// 注册动画
AnimationEngineInstance.Instance.RegisterAnimation(animation);
// 播放动画
AnimationEngineInstance.Instance.Play("AnimationName");
// 停止所有动画
AnimationEngineInstance.Instance.StopAll();
🎯 AI使用指南
为AI设计的友好特性
- 直观的命名: 所有类和方法都有清晰的命名，语义化强
- 链式API: 使用Builder模式提供链式调用
- 参数化动画: 所有动画参数都可以轻松调整
- 预设效果: 提供多种预设动画效果
- 组合能力: 轻松组合多个动画创建复杂效果
AI生成代码示例
// AI可以轻松生成这样的代码
var animations = new List<AnimationSequence>();
// 生成10个不同位置的移动动画
for (int i = 0; i < 10; i++)
{
var anim = AnimationFactory.CreateMove(
$"Move_{i}",
0, 0,
i * 50, i * 30,
1.0 + i * 0.1,
"EaseInOutQuad"
);
animations.Add(anim);
}
// 生成颜色变化动画
var colorAnim = AnimationFactory.CreateColorChange(
"ColorChange",
1, 0, 0, // 红色
0, 0, 1, // 蓝色
2.0,
"EaseInOutSine"
);
animations.Add(colorAnim);
📝 许可证
MIT License
🤝 贡献
欢迎提交Issue和Pull Request来帮助改进这个项目！
📧 联系方式
如有问题，请通过GitHub Issues联系。