基于 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

📦 安装

通过 NuGet 包管理器安装：

bash 复制代码

# WPF 版本
Install-Package AnimationImage.WPF

# Avalonia 版本
Install-Package AnimationImage.Avalonia

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

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

xaml 复制代码

<!-- 指定帧率为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"

axaml 复制代码

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