windows-phone-8 - 如何在 Windows Phone 8.1 (RT) 应用程序中显示动画 GIF？

Question

我正在尝试显示 GIF文件存储在 Windows Phone 8.1 ( RT ) 应用程序的本地文件夹中。到目前为止，我尝试了几种方法:

在 WebView 控件中加载 GIF。这不是解决方案，因为我想在 FlipView 控件中显示图像(我无法翻转到另一个图像)。此外，它很慢。

使用 BitmapDecoder 类获取 GIF 帧并使用 Storyboard为它们设置动画。
代码如下:

    using (var stream = await storageFile.OpenReadAsync())
    {
        //I don't specify the type since I would like to load other type of images also
        //It doesn't make any difference if I would use "BitmapDecoder.GifDecoderId"
        
        var decoder = await BitmapDecoder.CreateAsync(stream);
        uint frameCount = decoder.FrameCount;

        for (uint frameIndex = 0; frameIndex < frameCount; frameIndex++)
        {
            var frame = await decoder.GetFrameAsync(frameIndex);
            var writableBitmap = new WriteableBitmap((int)decoder.OrientedPixelWidth, 
                                                     (int)decoder.OrientedPixelHeight);

            var pixelDataProvider = await frame.GetPixelDataAsync
               (BitmapPixelFormat.Bgra8,
                decoder.BitmapAlphaMode, new BitmapTransform(),
                ExifOrientationMode.IgnoreExifOrientation, 
                ColorManagementMode.DoNotColorManage);

            var pixelData = pixelDataProvider.DetachPixelData();
            using (var pixelStream = writableBitmap.PixelBuffer.AsStream())
            {
                pixelStream.Write(pixelData, 0, pixelData.Length);
            }

            _bitmapFrames.Add(writableBitmap);
        }
    }

问题是我从 GIF 图像中得到的帧搞砸了

我在这种方法中做错了什么吗？我应该修改什么才能获得好的结果？
我不想使用 SharpDX，因为它似乎非常复杂，而且我是初学者。
ImageTools 仅适用于 Silverlight

Answer 1

我做了一个非常基本的 GifImage您可以从中开始的控件。 这是一个起点 ，您必须对其进行改进，使其更适合用作可重用控件。看看 here .



编辑

Do you have any idea how to improve the loading speed (parallelization, etc.)?

我假设您指的是准备框架的过程。从我的测试来看，它似乎可以立即加载，因此不需要大幅提升性能。但是，如果动画有数百帧，那么它可能是瓶颈吗？需要进行更多测试以评估是否需要优化。

我也不认为它可以轻松并行，因为每一帧都需要从前一帧开始按顺序渲染。我唯一的建议是在后台线程上运行加载代码，这样 UI 线程就不会阻塞大图像。

If I have this control as a FlipViewItem, how can I release the memory after the item is flipped away?

我不确定您是否在使用 MVVM，但无论如何，这里有一些建议:

设置 Source的GifImage如果当前不可见，则为 null(检查翻转 View 的 SelectedIndex)。请注意，目前我的 repo 中的代码不处理设置 Source为空。就像我之前说的，它需要很多改进。您必须确保控件不保存对帧的任何引用，以便垃圾回收器可以将它们从内存中释放(即，调用 animation.KeyFrames.Clear() 清除对帧的所有引用)。

使用 VirtualizingStackPanel在翻转 View 内。这将确保在内存中只创建上一个、当前和下一个翻转 View 项目。你这样设置:

<FlipView>
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
</FlipView>