Windows Phone实用开发技巧（40）：使用NGif创建GIF图片

NGif是.net 中用来创建gif图片的类库，可以迁移到windows phone中来，在windows phone中创建gif图片。

Gif动画就是在一定时间间隔内，将图片依次显示，将多幅图像保存为一个图像文件，从而形成动画。

把NGif迁移到windows phone有两种不同的方式

1. 在原始的NGif中采用image对象表示当前帧的图像，windows phone中也有image对象，直接使用，只要修改部分不兼容的代码即可

2. 使用WriteableBitmap代替image，用来表示当前帧的图像。

在文字末尾的示例demo中两种方式都有源代码提供。

方式一：

在NGif中，使用了GDI技术，我们可以使用WriteableBitmap的扩展方法去替换。

Image temp =
new Bitmap(width, height);
Graphics g = Graphics.FromImage(temp);
g.DrawImage(image, 0, 0);
image = temp;
g.Dispose();

可以写为

WriteableBitmap temp = new WriteableBitmap(image,null);
temp.Resize(width, height, WriteableBitmapExtensions.Interpolation.NearestNeighbor);
image = new Image { Source = temp };

至于其他的迁移代码可以在源代码中查看。

本文将会使用迁移后的NGif从相册中选择图片，制作GIF图片以及最后在程序中显示制作的图片。首页运行效果如下：





图片选择的模板如下：

<DataTemplate x:Key="DT_Image">
<Grid>
<Button Click="Button_Click">
<Button.Template>
<ControlTemplate>
<Image Source="{Binding Thumbnail}" Height="100" Width="100" Margin="5" />
</ControlTemplate>
</Button.Template>
</Button>
<Image Source="selected.png"
Height="32" Width="32"
Visibility="{Binding IsSelectedVisibility}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
</Grid>
</DataTemplate>

ListBox代码如下：

<ListBox x:Name="lbDefault" Margin="7,-10,0,0"
ItemTemplate="{StaticResource DT_Image}"
ItemsSource="{Binding DefaultImages}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

至于从相册中加载图片可以查看程序源代码。

看一下制作GIF的代码

private void btn2_Click(object sender, RoutedEventArgs e)
{
List<PhotoCell> list = new List<PhotoCell>();
foreach (var item in defaultImages)
{
if (item.IsSelectedVisibility == System.Windows.Visibility.Visible)
{
list.Add(item);
}
}
if (list.Count == 0)
{
MessageBox.Show("请选择图片");
return;
}

String outputFilePath = "test2.gif";
GifLib2.AnimatedGifEncoder maker = new GifLib2.AnimatedGifEncoder();
maker.Start(outputFilePath);
maker.SetDelay(500);
//-1:no repeat,0:always repeat
maker.SetRepeat(0);

foreach (var item in list)
{
maker.AddFrame(item.Image.Resize(320, 320, WriteableBitmapExtensions.Interpolation.NearestNeighbor));
}
maker.Finish();
MessageBox.Show("done, find it in iso named :" + outputFilePath);
NavigationService.Navigate(new Uri("/DisplayGifPage.xaml?name=" + outputFilePath, UriKind.Relative));
}

首先实例化AnimatedGifEncoder对象，设置其输出路径，间隔时间，以及重复次数，然后将要制作的图片添加到其帧中就可以了。

制作Gif完成后，我们会在程序中显示制作的Gif，此时就要用到GifDecoder了，将Gif解码为一张张图片。

private void LoadGif(string name)
{
GifDecoder decoder = new GifDecoder();
using (var store = IsolatedStorageFile.GetUserStoreForApplication())
{
if (!store.FileExists(name))
{
MessageBox.Show("gif image 不存在");
return;
}
using (var stream = store.OpenFile(name, System.IO.FileMode.Open, System.IO.FileAccess.Read))
{
decoder.Read(stream);

//get frame size to set image size
Size size = decoder.GetFrameSize();
image.Width = size.Width;
image.Height = size.Height;

int delay = decoder.GetDelay(1);

//0 stand for loop forever, otherwise is the real count
int loopCount = decoder.GetLoopCount();
//decoder.GetLoopCount
int imagecount = decoder.GetFrameCount();
for (int i = 0; i < imagecount; i++)
{
imageList.Add(decoder.GetFrame(i));
}
DisplayGif(delay, loopCount);
}
}
}

从独立存储空间中加载Gif，并且获取他的一些属性：重复次数，帧数，以及每一帧对应的图像，然后使用一个Timer将其显示即可：

private void DisplayGif(int delay, int loopCount)
{
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(delay);
int index = 0;
int loopedCount = 0;//已经循环的次数
timer.Tick += (sender, e) =>
{
//如果是永远循环
if (loopCount == 0)
{
if (index == imageList.Count - 1)
{
index = 0;
}
}
else
{
if (loopCount == loopedCount)
{
timer.Stop();
}
loopedCount++;
}
image.Source = imageList[index];
index++;
};
timer.Start();
}

本文仅仅讲述了如何在windows phone中制作Gif，并且解码并显示Gif，其中很多代码可以优化，大家可以酌情使用本示例中的代码。

源代码可以在这里找到。