IOS GIF animation effect implementation

Before formally analyzing the code, let’s take a look at the file structure of the entire project, as shown in figure 1.

The source file is plane.gif. The viewDidLoad() method in the viewController.swift file contains all the code for splitting a GIF into a single frame and saving it locally. Here’s how to do this with “GIF decomposing into single frames”.

Function module 1: read GIF files and convert them to NSdata type.

let gifPath:NSString = Bundle.main.path(forResource: "plane", ofType: "gif")! as NSString
let gifData:Data = try! Data(contentsOf: URL(fileURLWithPath: gifPath as String))
Copy the code

The first line of code uses the path method to get the address of a file named plane in GIF format. Line 2 gets the file information and loads it into the gifData (NSData type) variable. The first part of the process has been completed.

Function module two: use ImageIO framework, traverse all GIF sub frames. It is important to note that when using ImageIO, you must convert the NSdata read to the data type that ImageIO can process. Here, CGImageSourceRef is used. The processing flow of corresponding functional modules is shown as follows.

1 let gifDataSource:CGImageSource = CGImageSourceCreateWithData(gifData as CFData, nil)! 2 let gifImageCount:Int = CGImageSourceGetCount(gifDataSource) 3 for i in 0... gifImageCount-1{ let imageref:CGImage? = CGImageSourceCreateImageAtIndex(gifDataSource, i, nil) let image:UIImage = UIImage(cgImage: imageref! , scale:UIScreen.main.scale, orientation:UIImageOrientation.up ) }Copy the code

Below is the GIF data processing process in ImageIO part of the function description. Line 1 converts the GIF raw data type NSdata to a data type CGImageSourceRef that ImageIO can handle directly. Line 2 gets the number of frames for the current GIF image. We know that GIFs are made up of frames, so this line is to get the number of frames that make up the GIF. Line 3 iterates the CGImageSource data by image sequence number and converts the iterated result to UIImage using the UIImage system method.

Here are two methods to focus on.

CGImageSourceCreateImageAtIndex method is used to return one frame image in GIF CGImage type data. This method takes three parameters, parameter 1 is the raw GIF data, parameter 2 is the ordinal number in the GIF subframe (the ordinal number starts at 0), and parameter 3 is some selection parameters for GIF data extraction, which is set to nil because it is not very common here.

public func CGImageSourceCreateImageAtIndex(_ isrc: CGImageSource, _ index: Int, _ options: CFDictionary?) -> CGImage?
Copy the code

The following is a method of the UIImage class that instantiates the UIImage instance object. This method has three parameters: parameter 1 is the content required to build UIImage. Note that the content here is of CGImage type; parameter 2 is the conversion coefficient between the physical pixel of the mobile phone and the display resolution of the mobile phone; parameter 3 indicates the image direction of the constructed UIImage. Using this method, you can build an image with a given orientation at a certain phone resolution, of course the image type is UIImage.

public init(CGImage cgImage: CGImage, scale: CGFloat, orientation: UIImageOrientation)
Copy the code

UIImage has been obtained through the above two steps. However, UIImage is not the usual image format we see. The biggest feature of this image format is that it cannot be stored as a locally viewable image format, so if you need to save the image locally, You need to convert the OBTAINED UIImage data type to PNG or JPG image data before you can store the image locally.

Here is the complete GIF image decomposition save code:

override func viewDidLoad() { super.viewDidLoad() let gifPath:NSString = Bundle.main.path(forResource: "plane", ofType: "gif")! as NSString let gifData:Data = try! Data(contentsOf: URL(fileURLWithPath: gifPath as String)) let gifDataSource:CGImageSource = CGImageSourceCreateWithData(gifData as CFData, nil)! let gifImageCount:Int = CGImageSourceGetCount(gifDataSource) for i in 0... gifImageCount-1{ let imageref:CGImage? = CGImageSourceCreateImageAtIndex( gifDataSource, i, nil) let image:UIImage = UIImage(cgImage: imageref! , scale:UIScreen.main.scale, orientation:UIImageOrientation.up ) let imageData:Data = UIImagePNGRepresentation(image)! var docs=NSSearchPathForDirectoriesInDomains( .documentDirectory, .userDomainMask, true) let documentsDirectory = docs[0] as String let imagePath = documentsDirectory+"/\(i)"+".png" try? imageData .write(to: URL(fileURLWithPath: imagePath), options: [.atomic]) print("\(imagePath)") } }Copy the code

The first line of the code uses the UIImagePNGRepresentation method to store the UIImage data type as a PNG data type, the second and third lines get the Document directory of the application, and the fourth line calls the write method to write the image to a local file. If you want to see the effect of the final write, you can add print information in the last line, the file write path to print out, observe whether the image write successfully.

The following code is written according to the three main steps of GIF building. The first part of the code reads 67 PNG images into the NSMutableArray array. The first line of the code initializes the mutable array, the second line iterates through 67 local images, the third line constructs 67 image names according to the naming rules of images, and the fourth line loads local images. The last line loads the read images in turn into the images mutable array.

Let images:NSMutableArray = NSMutableArray() for I in 0... Let imagePath = "\(I).png" // Build imagename :UIImage = UIImage(named: imagePath)! // images.addobject (image)// Add the image to the array}Copy the code

The function of the second part of the code is to build the GIF file path in the Document directory. The specific implementation is shown as follows.

/ / range: in the Document directory to create GIF file var docs = NSSearchPathForDirectoriesInDomains (. DocumentDirectory,. UserDomainMask, true) let documentsDirectory = docs[0] as String let gifPath = documentsDirectory+"/plane.gif" print("\(gifPath)") let url = CFURLCreateWithFileSystemPath( kCFAllocatorDefault, gifPath as CFString! , CFURLPathStyle.cfurlposixPathStyle, false) let destion = CGImageDestinationCreateWithURL(url! , kUTTypeGIF, images.count, nil)Copy the code

Code 1 line and the second line to obtain the Document path address, the third line of code through string splicing to form a complete Document path under the plane.gif file path. To make it easy to see where the GIF file is, line 4 prints out the GIF file path. Line 5 converts the plane. GIF file path from string to URL. The last line of code is a very important way to build GIF images in ImageIO, we focus on analyzing the role and function of this method.

public func CGImageDestinationCreateWithURL(_ url: CFURL, _ type: CFString, _ count: Int, _ options: CFDictionary?) -> CGImageDestination?
Copy the code

CGImageDestinationCreateWithURL method is used to create an image of the target object, in order to facilitate everybody understanding, here the image target compared to a collection.

IOS native does not support the direct display of GIF images, which is composed of a single frame from the previous analysis, so as long as the decomposition of GIF images, the next is the problem of multiple groups of images display. This article introduces another image presentation form, that is, displaying GIF multi-frame images based on UIImageView.

After the analysis of GIF image display ideas, it can be known that there are two steps to display GIF images in iOS: the first step is to decompose GIF images into single frame images, and the second step is to display multi-frame images in iOS. UIImageView is a UI component that displays images, but it also has some animation properties that you can animate frame by frame.

Considering that the GIF image was decomposed in the first step, the decomposed 67 images are loaded in first.

UIImageView multi-frame image display concrete implementation code is as follows. Var images:[UIImage] = [] for I in 0… 66{// Let imagePath = “(I).png” // Build image name let image:UIImage = UIImage(named: imagePath)! Image.append (image)// Add the image to the array} let imageView = UIImageView() imageView.frame = self.view.bounds imageView.contentMode = UIViewContentMode.Center self.view.addSubview(imageView) imageView.animationImages = images imageView.animationDuration = 5 imageView.animationRepeatCount = 1 imageView.startAnimating()

Line 1 of this code initializes an array object whose child elements are of type UIImage. Lines 2 through 5 load the 67 images in sequence into the current array through a for loop. Line 6 instantiates a UIImageView instance object. Lines 7 and 8 set the frame position property of the UIImageView instance object and how the image is stretched, which is centered. Line 9 adds UIImageView to the self.view layer. Line 10 adds the initially-loaded 67 images to the animationImages of the UIImageView instance, setting the contents of the UIImageView. Line 11 sets the playback period of the UIImageView image animation. Line 12 sets the number of animation repeats. The last line launches the UIImageView multi-frame image display animation.