AnimationImage

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

🚀 简介

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

✨ 核心特性

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

---

性能表现：
1、Lottie动画

2、GIF 800x600 50FPS

📦 安装

通过 NuGet 包管理器安装：

# WPF 版本
Install-Package AnimationImage.WPF

# Avalonia 版本
Install-Package AnimationImage.Avalonia

---

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

引入命名空间：xmlns:ani="https://github.com/LazyCuteLion/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基本相同）：

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