支持WPF和Avalonia

最近完成了一个.NET平台的Lottie动画库，支持在WPF和Avalonia应用中播放Lottie JSON动画。经过一段时间的开发和测试，现在开源出来供大家使用。

为什么要做这个库

  • 主要原因也是因为这段时间又痴迷上了 Tg 的表情包 以及 Lottie 动画效果，还写了一个转换工具，参考： https://b.ncii.cn/archives/avAzRUQh，现在把里面的 Lottie 库独立出来。
  • 在开发桌面应用时，经常需要集成一些动画效果来提升用户体验。Lottie作为Adobe After Effects导出的动画格式，在移动端已经非常成熟，但在.NET桌面应用中的支持相对有限。于是决定基于SkiaSharp开发一个功能完整的Lottie库。

主要功能

核心特性

  • 完整的Lottie动画支持 - 支持标准Lottie JSON格式
  • 全面的播放控制 - 播放、暂停、跳转、循环、变速播放
  • 逐帧控制 - 精确控制到每一帧
  • PNG导出 - 支持导出整个动画序列或特定帧
  • 外部控制模式 - 支持外部程序控制帧播放
  • 多种文件格式 - JSON、压缩的.json.gz文件、URI路径

性能优化

  • 基于SkiaSharp的硬件加速渲染
  • 自动内存管理
  • 可配置的帧率控制

快速上手

安装

对于Avalonia应用：

Install-Package Lottie.Avalonia

对于WPF应用：

Install-Package Lottie.WPF

基础使用

Avalonia示例：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:lottie="clr-namespace:Lottie.Avalonia;assembly=Lottie.Avalonia">
    <lottie:LottieView Source="animation.json" 
                       Loops="-1" 
                       Width="200" 
                       Height="200" />
</Window>

WPF示例：

<Window xmlns:lottie="clr-namespace:Lottie.WPF;assembly=Lottie.WPF">
    <lottie:LottieView Source="animation.json" 
                       Loops="-1" 
                       Width="200" 
                       Height="200" />
</Window>

代码控制：

var lottieView = new LottieView();
lottieView.Source = "path/to/animation.json";
lottieView.Loops = LottieView.LoopForever;
lottieView.Speed = 1.5; // 1.5倍速播放

高级功能

逐帧控制

// 跳转到指定帧
lottieView.CurrentFrame = 25;

// 获取动画信息
var totalFrames = lottieView.TotalFrames;
var duration = lottieView.Duration;

// 按进度跳转(0.0-1.0)
lottieView.Position = 0.5; // 跳转到中间位置

外部控制模式

这是一个比较有意思的功能。当启用外部控制模式时，库会自动检测外部的帧变化，并暂停内部的自动播放：

lottieView.AllowExternalControl = true;

// 库会检测到外部控制
lottieView.CurrentFrame = 10;
lottieView.CurrentFrame = 15;
// 500ms无外部变化后，自动恢复内部控制

PNG导出功能

支持将动画导出为PNG序列，这在需要静态资源或其他格式转换时很有用：

// 导出整个动画序列
PngExporter.ExportPngSequence(
    lottiePath: "animation.json",
    outputDirectory: "output/frames",
    fps: 30,
    outputWidth: 512,
    outputHeight: 512,
    progressCallback: progress => {
        Console.WriteLine($"进度: {progress.ProgressPercentage:F1}%");
    });

// 导出特定帧
var frameIndices = new[] { 0, 10, 20, 30 };
PngExporter.ExportSpecificFrames(
    lottiePath: "animation.json",
    outputDirectory: "output/frames",
    frameIndices: frameIndices,
    fps: 30);

技术实现

架构设计

库的核心基于SkiaSharp.Skottie，这是Skia图形库的Lottie实现。选择这个方案主要考虑：

  1. 性能 - SkiaSharp提供硬件加速渲染
  2. 兼容性 - Skottie是Google开发，对Lottie格式支持较好
  3. 跨平台 - 同一套代码可以支持不同的UI框架

主要属性

动画控制：

  • Source - 动画文件路径或URI
  • Loops - 循环次数(-1为无限循环)
  • Speed - 播放速度倍数
  • IsPaused - 暂停状态
  • Position - 当前位置(0.0-1.0)
  • CurrentFrame - 当前帧索引

显示控制：

  • Fill - 拉伸模式
  • Direction - 拉伸方向
  • Background - 背景画刷
  • Fps - 目标帧率

性能优化

在开发过程中，主要在以下几个方面做了优化：

  1. 内存管理 - 自动释放大型动画资源
  2. 帧率控制 - 可配置的FPS避免不必要的渲染
  3. 尺寸优化 - 避免过度缩放导致的性能损失

使用场景

这个库适合以下场景：

  • 桌面应用的Loading动画 - 替代传统的GIF或旋转图标
  • UI交互反馈 - 按钮点击、状态变化等微交互
  • 数据可视化 - 图表动画、进度展示
  • 游戏UI - 菜单动画、技能特效等
  • 工具应用 - 需要导出动画帧的场景

总结

开发这个库的过程中，深入了解了Lottie格式和SkiaSharp的渲染机制。虽然市面上已有一些类似的库，但很多要么功能不够完整，要么性能存在问题。希望这个库能为.NET桌面开发者提供一个好用的Lottie动画解决方案。

项目已经开源，欢迎大家试用和贡献代码。如果在使用过程中遇到问题，可以在GitHub上提交Issue。

项目地址