在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. { 
10.     public sealed class GifMaker 
11.     { 
12.         readonly List<byte[]> frames = new List<byte[]>(); 
13.         private readonly uint frameWidth; 
14.         private readonly uint frameHeight; 
15.  
16.         public GifMaker(uint width, uint height) 
17.         { 
18.             frameWidth = width; 
19.             frameHeight = height; 
20.         } 
21.  
22.         public void AppendNewFrame([ReadOnlyArray]byte[] frame) 
23.         { 
24.             frames.Add(frame); 
25.         } 

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

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

 

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

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

 

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

如果你是使用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人

本文转自冷秋寒 51CTO博客，原文链接：http://blog.51cto.com/kevinfan/1148024 ，如需转载请自行联系原作者