基于 SkiaSharp 的 WPF AvaloniaUI 极简动图播放方案

基于 SkiaSharp 的 WPF & AvaloniaUI 极简动图播放方案

🚀 简介

AnimationImage 是一个专为 WPF 和 AvaloniaUI 打造的动图播放方案。基于 SkiaSharp ，性能优秀。

支持播放 Lottie(JSON)、GIF 和 WebP 格式，相比现有方案，具有更高的帧率、更佳的渲染性能以及更低的内存占用。

✨ 核心特性

• 多平台支持：支持 WPF 和 AvaloniaUI（目前未对移动端进行测试）。
• 多格式兼容：支持 Lottie(.json)，GIF、WebP 等格式动图（未来计划支持Apng）。
• 极致性能：动图利用SKCodec进行流式加载，逐帧解码，极低的内存占用。Lottie则利用Skottie，极致流畅。
• 动画驱动：使用框架动画库Animation，相比定时器方案，帧率更高更稳定。WPF可以设置更高的帧率，而非默认的60FPS。
• 极简API：通过附加属性或标记扩展，以原生Image控件作为渲染器。
• 灵活控制：预加载帧数支持自动计算、手动配置，也可禁用或全量缓存。默认自动播放，可设置循环次数；支持MVVM。

---

性能表现：
1、lottie动画

2、gif-800x600-50fps

3、gif-1920x1080-30fps，流畅播放，但是进度条拖动不理想

📦 安装

通过 NuGet 包管理器安装：

# WPF 版本
Install-Package AnimationImage.WPF# Avalonia 版本
Install-Package AnimationImage.Avalonia

---

使用方法（参考2个Demo项目）

WPF：xmlns:ani="clr-namespace:AnimationImage.WPF;assembly=AnimationImage.WPF"

<!-- 指定帧率为144，永久循环 -->
<Image ani:AnimationBehavior.AnimatableBitmap="[path]"ani:AnimationBehavior.ForceFPS="144"ani:AnimationBehavior.RepeatBehavior="Forever" /><!-- 全量缓存（gif/webp有效） -->
<Image Source="{ani:AnimatableBitmap '[path]',PreloadCount=PreloadOptions.Full}" /><!-- 设置渲染比例（Lottie有效） -->
<Image Source="{ani:AnimatableBitmap '[path]',RenderScale=0.5}" /><!-- 也可以用到拥有Brush类型属性的控件 -->
<Rectangle Fill="{ani:AnimatableBitmap '[path]'}" /><Border Background="{ani:AnimatableBitmap '[path]'}" /><!-- 取消自动播放 -->
<Image ani:AnimationBehavior.AutoStart="false" …… /><!-- 进度条 -->
<Slider Maximum="{Binding ElementName=img, Path=(ani:AnimationBehavior.AnimatableBitmap).Metadata.Duration}"Value="{Binding ElementName=img, Path=(ani:AnimationBehavior.AnimationTime), Mode=TwoWay}" /><!-- 命令绑定 -->
<StackPanel DataContext="{Binding ElementName=img, Path=(ani:AnimationBehavior.AnimatableBitmap)}"Orientation="Horizontal"><Button Command="{Binding BeginCommand, Mode=OneTime}"Content="Play" /><Button Margin="10,0"Command="{Binding PauseCommand, Mode=OneTime}"Content="Pause" /><Button Command="{Binding StopCommand, Mode=OneTime}"Content="Stop" />
</StackPanel>

Avalonia（用法与WPF基本相同）：xmlns:ani="using:AnimationImage.Avalonia"

<!-- 永久循环 -->
<Image ani:AnimationBehavior.AnimatableBitmap="[path]"ani:AnimationBehavior.LoopCount="-1" />