Windows 8应用实例解析 - WinRT下创建GIF动画(Flipflop)

原创 2013年03月06日 03:49:31

在Windows Store中下载了一个有意思的应用,叫做Flipflop(http://apps.microsoft.com/windows/app/flipflop/99c01512-fe4f-4d1a-872e-eb9fd6638ff4),该应用允许用户创建翻页式动画效果(Flipbook Animation), 并且可以导出动画为GIF文件。在MSDN看到一篇介绍该项目的技术文章,分享给大家。

Flipflop项目中,作者使用Windows Imaging Component(WIC)实现创建图片(MSDN查看Windows 8 WIC新特性),

在项目中引用Windows.Graphics命名空间,在该空间中包含BitmapEncoder类(MSDN),通过该类可以创建特定的图片编码,例如GifEncoder。

通过代码查看工具,可以看到作者创建一个共享类"GifMaker"实现动画帧的定义,

 

  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Runtime.InteropServices.WindowsRuntime; 
  4. using Windows.Foundation; 
  5. using Windows.Graphics.Imaging; 
  6. using Windows.Storage; 
  7.  
  8. namespace Utilities 
  9.     public sealed class GifMaker 
  10.     { 
  11.         readonly List<byte[]> frames = new List<byte[]>(); 
  12.         private readonly uint frameWidth; 
  13.         private readonly uint frameHeight; 
  14.  
  15.         public GifMaker(uint width, uint height) 
  16.         { 
  17.             frameWidth = width; 
  18.             frameHeight = height; 
  19.         } 
  20.  
  21.         public void AppendNewFrame([ReadOnlyArray]byte[] frame) 
  22.         { 
  23.             frames.Add(frame); 
  24.         } 

实现翻页式动画效果的关键是将多个单帧图片连接在一起,然后通过延时设置播放各个帧实现动画效果。

BitmapEncoder类(MSDN)中,GoToNextFrameAsync()方法可实现在当前帧的基础上异步动态添加新的空白帧,而通过代码实现浏览各个单一图片,动态放入不同的空白帧中实现翻页动画效果。

 

  1. public IAsyncInfo GenerateAsync(StorageFile file) 
  2.     return AsyncInfo.Run(async ctx => 
  3.         { 
  4.             var outStream = await file.OpenAsync(FileAccessMode.ReadWrite); 
  5.  
  6.             var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.GifEncoderId, outStream); 
  7.  
  8.             for (int i = 0; i < frames.Count; i++) 
  9.             { 
  10.                 var pixels = frames[i]; 
  11.                 encoder.SetPixelData(BitmapPixelFormat.Rgba8, BitmapAlphaMode.Ignore, 
  12.                                      frameWidth, frameHeight, 
  13.                                      92.0, 92.0, 
  14.                                      pixels); 
  15.  
  16.                 if (i < frames.Count - 1) 
  17.                     await encoder.GoToNextFrameAsync(); 
  18.             } 
  19.  
  20.             await encoder.FlushAsync(); 
  21.             outStream.Dispose(); 
  22.         }); 

最后,需要设置播放帧延迟时间,以达到翻页动画效果。控制帧延迟的属性是encoder.BitmapProperties“/grctlext/Delay”,代码如下:

 

  1. public IAsyncInfo GenerateAsync(StorageFile file, int delay) 
  2.     return AsyncInfo.Run(async ctx => 
  3.         { 
  4.             var outStream = await file.OpenAsync(FileAccessMode.ReadWrite); 
  5.  
  6.             var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.GifEncoderId, outStream); 
  7.  
  8.             for (int i = 0; i < frames.Count; i++) 
  9.             { 
  10.                 var pixels = frames[i]; 
  11.                 encoder.SetPixelData(BitmapPixelFormat.Rgba8, BitmapAlphaMode.Ignore, 
  12.                                      frameWidth, frameHeight, 
  13.                                      92.0, 92.0, 
  14.                                      pixels); 
  15.  
  16.                 if (i == 0) 
  17.                 { 
  18.                     var properties = new BitmapPropertySet 
  19.                         { 
  20.                             { 
  21.                                 "/grctlext/Delay"
  22.                                 new BitmapTypedValue(delay / 10, PropertyType.UInt16) 
  23.                             } 
  24.                         }; 
  25.  
  26.                     await encoder.BitmapProperties.SetPropertiesAsync(properties); 
  27.                 } 
  28.  
  29.                 if (i < frames.Count - 1) 
  30.                     await encoder.GoToNextFrameAsync(); 
  31.             } 
  32.  
  33.             await encoder.FlushAsync(); 
  34.             outStream.Dispose(); 
  35.         }); 

如果你是使用JavaScript作为Windows store应用开发语言,可以使用以下代码实现以上相同的效果,

 

  1. var picker = new Windows.Storage.Pickers.FileSavePicker(); 
  2. picker.fileTypeChoices.insert("Gif files", [".gif"]); 
  3.  
  4. picker.pickSaveFileAsync().then(function(file) { 
  5.     if (!file) { 
  6.         return
  7.     } 
  8.     var gifMaker = new Utilities.GifMaker(800, 600); 
  9.  
  10.     for (var commandsIndex = 0; commandsIndex < currentFlipflop.pages.length; commandsIndex++) { 
  11.         // This code is used to retrieve canvases bytes 
  12.         var bytes = Flipflop.Tools.GetBytesfromFlipflop(currentFlipflop.pages[commandsIndex], 
  13.             800, 600); 
  14.  
  15.         gifMaker.appendNewFrame(bytes); 
  16.     } 
  17.  
  18.     gifMaker.generateAsync(file, 200).done(); 
  19. }); 

Flipflop产生GIF动画效果演示:

 

欢迎大家留言讨论学习Windows 8应用开发,希望能够看到更多优秀的Windows store应用。

欢迎大家加入QQ技术群,一起学习讨论Windows 8&Silverlight&WPF&Widnows Phone开发技术。 
22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人

如何从C# 桌面应用程序调用Windows 8的WinRT API- WinRT 图表

[原文地址:Howto call WinRT APIs in Windows 8 from C# Desktop Applications - WinRT Diagram] 中文翻译 我曾试着访问...

浅谈Windows 8, WinRT, XAML 和Silverlight

相信大家都很关注即将出世的Windows 8, 2 月 29 日(也就是明天)的全球移动通信大会(MWC)上,微软将带来 Windows 8 消费者预览版(Consumer Preview),让我们来...
  • lmyhao
  • lmyhao
  • 2012年02月29日 00:07
  • 1116

Windows 8实例教程系列 - 理解应用框架

Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的。Windows 8继承Windows桌面的优点,同时提供一种新的用...
  • jv9
  • jv9
  • 2012年11月21日 15:14
  • 2364

21款工具帮助你快速创建Windows 8 Store应用

今日,小编为大家整理了21款Windows 8.x开发工具或库,可帮助你的Windows Store应用开发事半功倍或改善现有Windows 8.x应用程序性能。 Visual Studio 201...

Windows 8应用商店程序开发源程序

  • 2014年10月23日 22:42
  • 393KB
  • 下载

Windows 8实例教程系列

与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI。 本篇将讨论Windows8布局设计控制。 Windows 8布局控件 在Windows Store应用设计中,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Windows 8应用实例解析 - WinRT下创建GIF动画(Flipflop)
举报原因:
原因补充:

(最多只允许输入30个字)