本文告诉大家如何在 WPF 里，通过 GifBitmapDecoder 调用 WIC 层来解析 GIF 图片，然后采用动画的方式进行播放

在上一篇博客告诉大家，可以通过 GifBitmapDecoder 调用 WIC 层解析 GIF 图片

使用 WIC 层解析 GIF 图片可以调用系统默认解码器，对 GIF 的支持较好，也能支持很多诡异的格式，而且对这些诡异的图片的行为保持和其他应用相同

本文在上一篇博客的基础上，告诉大家如何使用动画播放方式，进行播放 GIF 图片

这是一个简单的方式，优势在于使用动画播放，十分简单。缺点在于只能支持简单的 GIF 图片格式，也就是每一帧都是全画的 GIF 文件，如果只是范围更新的，那么效果很差

本文的实现可以从本文最后拿到所有代码，下面来告诉大家这是如何做的。 先创建一个继承 FrameworkElement 类型的 GifImage 类，将在这个类里面播放 GIF 图片

定义 GifSource 依赖属性，在依赖属性变更时，进行初始化逻辑

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;

class GifImage : FrameworkElement
{
    public static readonly DependencyProperty GifSourceProperty = DependencyProperty.Register(
        "GifSource", typeof(Uri), typeof(GifImage), new UIPropertyMetadata(default(Uri), GifSourcePropertyChanged));

    public Uri GifSource
    {
        get { return (Uri) GetValue(GifSourceProperty); }
        set { SetValue(GifSourceProperty, value); }
    }

    private static void GifSourcePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        (sender as GifImage).Initialize();
    }

    private void Initialize()
    {
        // 初始化
    }
}

在上面的 Initialize 是本文的核心逻辑，将初始化 GIF 的解析

初始化逻辑采用 GifBitmapDecoder 进行解析，代码如下

    private void Initialize()
    {
        _gifDecoder = new GifBitmapDecoder(GifSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
    }
    private GifBitmapDecoder _gifDecoder;

可以通过 _gifDecoder.Frames 拿到 GIF 的多个图片，每个图片信息，都可以通过 BitmapMetadata 的 GetQuery 方法获取参数，可以选择的参数有很多，如下

  • /grctlext 控制信息
  • /grctlext/Disposal 处置方法，表示如何处理上一张图片，如替换为背景色等
  • /grctlext/TransparencyFlag 透明色选项
  • /grctlext/Delay 延迟时间，单位是 10 分之一毫秒
  • /grctlext/TransparentColorIndex 透明色索引
  • /imgdesc 图片描述
  • /imgdesc/Left 当前张图片所在的左上坐标和宽高，这里指的是左值
  • /imgdesc/Top 当前张图片所在的左上坐标和宽高，这里指的是上值
  • /imgdesc/Width 当前张图片所在的左上坐标和宽高，这里指的是宽度
  • /imgdesc/Height 当前张图片所在的左上坐标和宽高，这里指的是高度

其他的还有 /grctlext/UserInputFlag /imgdesc/LocalColorTableFlag /imgdesc/InterlaceFlag /imgdesc/SortFlag /imgdesc/LocalColorTableSize 等。详细请看 Native Image Format Metadata Queries - Win32 apps Microsoft Docs

使用 /grctlext/Delay 获取延时时间，根据延时时间创建动画。动画的方式就是修改当前使用第几张图片

    private void Initialize()
    {
        _gifDecoder = new GifBitmapDecoder(GifSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);

        var keyFrames = new Int32KeyFrameCollection();
        TimeSpan last = TimeSpan.Zero;
        for (int i = 0; i < _gifDecoder.Frames.Count; i++)
        {
            var gifDecoderFrame = _gifDecoder.Frames[i];
            var bitmapMetadata = gifDecoderFrame.Metadata as BitmapMetadata;
            var delayTime = bitmapMetadata?.GetQuery("/grctlext/Delay") as ushort?;
            var delay = delayTime ?? 10;
            if (delay == 0)
            {
                delay = 10;
            }
            last += TimeSpan.FromMilliseconds(delay * 10);
            keyFrames.Add(new DiscreteInt32KeyFrame(i, KeyTime.FromTimeSpan(last)));
        }

        _animation = new Int32AnimationUsingKeyFrames()
        {
            KeyFrames = keyFrames,
            RepeatBehavior = RepeatBehavior.Forever,
        };
    }

    private GifBitmapDecoder _gifDecoder;
    private Int32AnimationUsingKeyFrames _animation;

添加一个叫播放的函数，调用此函数时，将执行动画

    /// <summary>
    /// Starts the animation
    /// </summary>
    public void StartAnimation()
    {
        BeginAnimation(FrameIndexProperty, _animation);
    }

    public static readonly DependencyProperty FrameIndexProperty =
        DependencyProperty.Register("FrameIndex", typeof(int), typeof(GifImage), new FrameworkPropertyMetadata(0, new PropertyChangedCallback(ChangingFrameIndex)));

    static void ChangingFrameIndex(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var gifImage = obj as GifImage;
        gifImage.ChangingFrameIndex((int) e.NewValue);
    }

    private void ChangingFrameIndex(int index)
    {
        InvalidateVisual();
    }

通过动画修改 FrameIndexProperty 从而通过依赖属性修改进入 InvalidateVisual 方法，让框架重新调用 OnRender 方法

    protected override void OnRender(DrawingContext drawingContext)
    {
        var gifDecoderFrame = _gifDecoder.Frames[FrameIndex];

        drawingContext.DrawImage(gifDecoderFrame,new Rect(new Size(gifDecoderFrame.PixelWidth, gifDecoderFrame.PixelHeight)));
    }

如此即可完成播放

此类型的代码如下

class GifImage : FrameworkElement
{
    private bool _isInitialized;
    private GifBitmapDecoder _gifDecoder;
    private Int32AnimationUsingKeyFrames _animation;

    public int FrameIndex
    {
        get { return (int) GetValue(FrameIndexProperty); }
        set { SetValue(FrameIndexProperty, value); }
    }

    private void Initialize()
    {
        _gifDecoder = new GifBitmapDecoder(GifSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);

        var keyFrames = new Int32KeyFrameCollection();
        TimeSpan last = TimeSpan.Zero;
        for (int i = 0; i < _gifDecoder.Frames.Count; i++)
        {
            var gifDecoderFrame = _gifDecoder.Frames[i];
            var bitmapMetadata = gifDecoderFrame.Metadata as BitmapMetadata;
            var delayTime = bitmapMetadata?.GetQuery("/grctlext/Delay") as ushort?;
            var delay = delayTime ?? 10;
            if (delay == 0)
            {
                delay = 10;
            }
            last += TimeSpan.FromMilliseconds(delay * 10);
            keyFrames.Add(new DiscreteInt32KeyFrame(i, KeyTime.FromTimeSpan(last)));
        }

        _animation = new Int32AnimationUsingKeyFrames()
        {
            KeyFrames = keyFrames,
            RepeatBehavior = RepeatBehavior.Forever,
        };

        _isInitialized = true;
    }

    static GifImage()
    {
        VisibilityProperty.OverrideMetadata(typeof(GifImage),
            new FrameworkPropertyMetadata(VisibilityPropertyChanged));
    }

    private static void VisibilityPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if ((Visibility) e.NewValue == Visibility.Visible)
        {
            ((GifImage) sender).StartAnimation();
        }
        else
        {
            ((GifImage) sender).StopAnimation();
        }
    }

    public static readonly DependencyProperty FrameIndexProperty =
        DependencyProperty.Register("FrameIndex", typeof(int), typeof(GifImage), new FrameworkPropertyMetadata(0, new PropertyChangedCallback(ChangingFrameIndex)));

    static void ChangingFrameIndex(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var gifImage = obj as GifImage;
        gifImage.ChangingFrameIndex((int) e.NewValue);
    }

    private void ChangingFrameIndex(int index)
    {
        InvalidateVisual();
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        var gifDecoderFrame = _gifDecoder.Frames[FrameIndex];

        drawingContext.DrawImage(gifDecoderFrame,new Rect(new Size(gifDecoderFrame.PixelWidth, gifDecoderFrame.PixelHeight)));
    }

    /// <summary>
    /// Defines whether the animation starts on it's own
    /// </summary>
    public bool AutoStart
    {
        get { return (bool) GetValue(AutoStartProperty); }
        set { SetValue(AutoStartProperty, value); }
    }

    public static readonly DependencyProperty AutoStartProperty =
        DependencyProperty.Register("AutoStart", typeof(bool), typeof(GifImage), new UIPropertyMetadata(false, AutoStartPropertyChanged));

    private static void AutoStartPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if ((bool) e.NewValue)
            (sender as GifImage).StartAnimation();
    }

    public static readonly DependencyProperty GifSourceProperty = DependencyProperty.Register(
        "GifSource", typeof(Uri), typeof(GifImage), new UIPropertyMetadata(default(Uri), GifSourcePropertyChanged));

    public Uri GifSource
    {
        get { return (Uri) GetValue(GifSourceProperty); }
        set { SetValue(GifSourceProperty, value); }
    }

    private static void GifSourcePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        (sender as GifImage).Initialize();
    }

    /// <summary>
    /// Starts the animation
    /// </summary>
    public void StartAnimation()
    {
        if (!_isInitialized)
            this.Initialize();

        BeginAnimation(FrameIndexProperty, _animation);
    }

    /// <summary>
    /// Stops the animation
    /// </summary>
    public void StopAnimation()
    {
        BeginAnimation(FrameIndexProperty, null);
    }
}

除此之外的其他播放 GIF 方法，请看：

WPF 一个性能比较好的 gif 解析库

WPF 播放 gif

更多请看

gif 格式

wpf GifBitmapDecoder 解析 gif 格式

本文以上的代码放在github 和 gitee 欢迎访问

可以通过如下方式获取本文的源代码，先创建一个空文件夹，接着使用命令行 cd 命令进入此空文件夹，在命令行里面输入以下代码，即可获取到本文的代码

git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin e11f2ea15fd5107fac4bd4523580587ce7febd56

以上使用的是 gitee 的源，如果 gitee 不能访问，请替换为 github 的源

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git

获取代码之后，进入 CairjawworalhulalGeacharkucoha 文件夹

本文会经常更新，请阅读原文： https://blog.lindexi.com/post/WPF-%E9%80%9A%E8%BF%87-GifBitmapDecoder-%E8%B0%83%E7%94%A8-WIC-%E8%A7%A3%E6%9E%90-Gif-%E5%92%8C%E8%BF%9B%E8%A1%8C%E5%8A%A8%E7%94%BB%E6%92%AD%E6%94%BE%E7%9A%84%E7%AE%80%E5%8D%95%E6%96%B9%E6%B3%95.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

如果你想持续阅读我的最新博客，请点击 RSS 订阅，推荐使用RSS Stalker订阅博客，或者收藏我的博客导航

知识共享许可协议 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙（包含链接： https://blog.lindexi.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 。

微软最具价值专家

无盈利，不卖课，做纯粹的技术博客

以下是广告时间

推荐关注 Edi.Wang 的公众号

欢迎进入 Eleven 老师组建的 .NET 社区

以上广告全是友情推广，无盈利

相关文章