WP8.1 the program to generate GIF Animation example tutorial

GIF file Encoding method

Let's briefly introduce the coding method.

1, Calling the Bitmapencoder.createasync static method instantiate the encoder, to create the GIF encoder, you can specify the GUID that represents the GIF encoder when calling the method, because accessing the Bitmapencoder.gifencoderid static property Can get.

2, call the Setpixeldata method to set the current frame of the image data. Note that the Encoder object is in the first frame after the instance is created, so you can call the Setpixeldata method directly when you set the data for the first picture.

3, starting from the second frame, you need to call the Gotonextframeasync method to move a frame backward before calling the Setpixeldata method to set the data. When you finish setting the last frame, you don't have to call Gotonextframeasync, because there is no later, and an exception is thrown if you call Gotonextframeasync to create a new frame without writing the data.

4, close the related stream.

For example, the following examples:

Bitmapencoder encoder= await Bitmapencoder.createasync (Bitmapencoder.gifencoderid, OutStream);

......

Encoder. Setpixeldata (decoder. Bitmappixelformat, decoder. Bitmapalphamode, decoder. Pixelwidth, decoder. Pixelheight, decoder. Dpix, decoder. DPIY, data);
......
If (not last frame)
{
Await encoder. Gotonextframeasync ();
}

Set time interval

If you want the GIF to animate, you have to set the delay time, that is, the time interval. To be implemented by writing the image metadata.

The metadata path that represents the time interval is:

Bitmapproperties PV = encoder. Bitmapproperties;
dictionary<string, bitmaptypedvalue> props = new dictionary<string, bitmaptypedvalue> ();
......

Delay represents the time interval for each frame, in 1/100 seconds
Props. ADD ("/grctlext/delay", New Bitmaptypedvalue (propertytype.uint16));
Await PV. Setpropertiesasync (props); Write meta data

The metadata can be manipulated using a dictionary data structure, the key is the path of the field, and value is the value of the metadata, which encapsulates the metadata value by the Bitmaptypedvalue class. This is instantiated by using the following constructor.

Public Bitmaptypedvalue (object value, PropertyType type);

Value is the values of the metadata, type object, can be compatible with various values, the type parameter specifies the data type of the metadata, and is regulated by the PropertyType enumeration under the Windows.foundation namespace.

The value of the delay is 1/100 seconds, or 0.01 seconds, and if set to 50, it means that each frame of the animation has an interval of 50 * 10 = 500 milliseconds.

The GIF file that you saved after you set up the delay has been animated, but it only plays once and it stops. In most cases, we all want the GIF animation to play indefinitely, which is to set other metadata values.

Infinite loop Playback

To allow the GIF to loop, you need to specify two values:

The first value is/appext/application, which is required and fixed, is the byte representation of the string "NETSCAPE2.0", note that the byte representation, do not set the string directly, the string is converted to a byte array of 11 bytes. Netscape has a browser, I believe many people know that I was in the win 98 often use this browser, OH, has been used to win me still use.

The second value is/appext/data. In C + +, this value generally includes 5 bytes, but we have no problem with 4 bytes in C # (in fact, the fifth byte is ", that is, NULL, the end). To achieve infinite loop playback, simply write the following byte array to/appext/data.

3, 1, 0, 0.

The first byte is 3, which indicates the number of bytes immediately following it, because the following 1, 0, and 0 are 3 bytes, so its value is 3.

The second byte must be 1, which indicates that GIF animation is enabled.

The third byte represents the number of times the loop plays. 0 represents an infinite loop, and if you want the animation to play 5 times, stop it, set it to 5. It's usually 0, because we all like dead loops.

The fourth byte is a valid high bit of iterative statistics, I do not know what to use, anyway, set to 0 on the line.

In fact, if you want to allow animation infinite loop, as long as remember 3, 1, 0, 4 value is good, directly back down also does not matter, anyway very good to remember.

To generate an example of an animated GIF

This example combines 5 JPG images into a GIF file and has an animated effect. To save the nonsense, I only post the core code to create the GIF.

Storagefolder photofolder = knownfolders.pictureslibrary;
Storagefile NewFile = await Photofolder.createfileasync ("Newfile.gif", creationcollisionoption.replaceexisting);
Irandomaccessstream OutStream = await newfile.openasync (fileaccessmode.readwrite);
Bitmapencoder encoder= await Bitmapencoder.createasync (Bitmapencoder.gifencoderid, OutStream);
Meta data

/*
* The value of the/appext/application is fixed, "NETSCAPE2.0", 11 bytes
*/appext/data Set loop playback, if not set this field, play only once.
* The value of data is a set of bytes, because the first byte is set to 3, the second byte is set to 1 to achieve the loop playback effect.
* Other characters can be 0;
* 3-Indicates a subsequent byte block size, followed by a 1,0,0 of three bytes, so 3;
* 1-to indicate that GIF uses animations;
* 0-cycle times, 0 for infinite loops
*/

Bitmapproperties PV = encoder. Bitmapproperties;
dictionary<string, bitmaptypedvalue> props = new dictionary<string, bitmaptypedvalue> ();
byte[] buffer = System.Text.Encoding.UTF8.GetBytes ("NETSCAPE2.0");
This field must be
Props. ADD ("/appext/application", new Bitmaptypedvalue (buffer, propertytype.uint8array));
Indicates loop playback
Props. ADD ("/appext/data", New Bitmaptypedvalue (new byte[] {3, 1, 0, 0}, Propertytype.uint8array));

Delay represents the time interval for each frame, in 1/100 seconds
Props. ADD ("/grctlext/delay", New Bitmaptypedvalue (propertytype.uint16));
Await PV. Setpropertiesasync (props); Write meta data

for (short i = 1; I <= 5; i++)
{
Uri uri = new Uri ("ms-appx:///assets/" + i.tostring () + ". jpg");
Storagefile InFile = await storagefile.getfilefromapplicationuriasync (URI);
Irandomaccessstream instream = await infile.openreadasync ();
Decoding
Bitmapdecoder decoder = await Bitmapdecoder.createasync (Bitmapdecoder.jpegdecoderid, instream);
Get Pixel data
Pixeldataprovider Pxprovider = await decoder. Getpixeldataasync ();
byte[] data = Pxprovider.detachpixeldata ();
Coding
Encoder. Setpixeldata (decoder. Bitmappixelformat, decoder. Bitmapalphamode, decoder. Pixelwidth, decoder. Pixelheight, decoder. Dpix, decoder. DPIY, data);
Instream.dispose ();
if (I < 5)
{
Await encoder. Gotonextframeasync ();
}
}

Await encoder. Flushasync ();
Outstream.dispose ();

The following GIF image is created with the example above to appreciate it.

How is it? Are these hibiscus flowers beautiful?

===============================================

Amendment:

Perhaps you have found that the GIF animation generated a little problem, that is, the last frame of the picture will overlap with the previous frame, and sometimes we want each frame picture independent display. So when you set the metadata, you can set the value of/grctlext/disposal to 2, which means that the previous frame image is cleared.

Props. ADD ("/grctlext/disposal", New Bitmaptypedvalue ((byte) 2, propertytype.uint8));

Then look at the pictures that were generated by this modification.

Now, each frame of the picture will not overlap.