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

文章基于 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 包管理器安装：

# 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" />

文章来源:https://www.cnblogs.com/LCHL/p/20176221
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！