This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Lottie

In addition to Lottie and image sequence methods, we can also use GIF, video, or even a combination of Bezier paths or UIView animations. But Lottie is a better way to animate than the others.

PNG sequence image

One of the biggest disadvantages of PNG sequence graphics is their considerable size, which makes them somewhat cumbersome to export and manipulate on different interfaces. Lottie files, by contrast, are very small and conveniently sized, so they download quickly and keep your site or application running as smoothly as possible.

The GIF format

While smaller than PNG graphics, GIF is still a very space-intensive format, averaging twice the size of Lottie. Gifs are also usually scaled to a fixed size. This means they cannot be modified to better fit an interface different from the one they were originally created for. Lottie animations can be adjusted to fit screens of all sizes.

video

For simple and short animations, video content often appears. For video content, especially live-action content, you need a lot of resources, including props, actors, and locations. Animation is a relatively simple and inexpensive option that still gets the job done. In terms of coding, handling a video is much more difficult than an animated view (which is as simple as A UIImageView). Not to mention: a good animation keeps your visitors engaged and doesn’t force them to turn it off.

Code animation

Application development teams want to simplify the development process to make it as cost-effective or resource-efficient as possible. Animating in code can be a time – and skill-intensive process, and prone to numerous problems when writing code. Instead of devoting precious resources to outsourcing projects or hiring skilled staff, why not use Lottie instead of an animation tool that is intuitive, scalable, and compatible with multiple platforms?

This is what we want to achieve this time.

First declare an imageView and declare the desired imageView size.

    private let sequenceSize: CGSize = CGSize(width: 100, height: 100)
    private var sequenceImageView: UIImageView!
Copy the code

Create a setupUI method and call it in viewDidLoad. Set the sequenceImageView property in setupUI, then add it as the View subview, and add a backButton to return to the previous page (the previous login animation page).

   private func setupUI() {
        self.view.backgroundColor = .white
           sequenceImageView = UIImageView(frame: CGRect(
             origin: CGPoint(x: view.center.x - sequenceSize.width/2,
                             y: view.center.y - sequenceSize.height/2),
             size: sequenceSize))
           sequenceImageView.contentMode = .scaleToFill
           self.sequenceImageView.image = UIImage(named: "loading_icon")
           view.addSubview(sequenceImageView)

           let backButton = UIButton(frame: CGRect(x: 16,
                                                   y: 40,
                                                   width: 44,
                                                   height: 44))
           backButton.addTarget(self,
                                 action: #selector(userAskToGoBack),
                                 for: .touchUpInside)
           backButton.setImage(UIImage(named: "close_icon"), for: .normal)
           view.addSubview(backButton)
       }
    
    @objc private func userAskToGoBack() {
        self.dismiss(animated: true, completion: nil)
    }
Copy the code

We use the Image Sequence to load the Image animation. Add an animateSequenceImages method to call and call it in viewDidLoad. We use animationImages to accept all the images, then set the animation time to 5s, do not repeat the animation, then start the animation, disappear when the animation is finished and call the closure.

private func animateSequenceImages(completion: @escaping ()->Void) { let imageSetURL = Bundle.main.urls( forResourcesWithExtension: "png", subdirectory: "Sequence")! .sorted(by: { url1, url2 -> Bool in return url1.lastPathComponent < url2.lastPathComponent }) sequenceImageView.animationImages = imageSetURL.map{ UIImage(contentsOfFile: $0.path)! } sequenceImageView.animationDuration = 5 sequenceImageView.animationRepeatCount = 0 sequenceImageView.startAnimating() DispatchQueue. Main. AsyncAfter (deadline: now () + 2.0, the execute: {UIView. The animate (withDuration: 0.35, animations: {self. SequenceImageView. Alpha = 0.0}, completion: {_ in the self. SequenceImageView. Alpha = 0.0}) completion ()})}Copy the code

Reference Lottie, then create an AnimationView;

private var giftView: AnimationView!
Copy the code

Initialize it in setupView, set alpha to 0, hide it, play back and forth and add it as a child view.

   giftView = AnimationView(name: "bird")
        giftView.frame = self.view.frame
        giftView.contentMode = .scaleAspectFit
        giftView.alpha = 0
        giftView.loopMode = .autoReverse
        view.addSubview(giftView)

Copy the code

Add the animateGift method to add the animation to display the AnimationView and start playing after the animation ends, and place the animateGift method inside the animateSequenceImages closure.

Private func animateGift() {uiViet.animate (withDuration: 0.35, animations: {self.giftViet.alpha = 1.0}, completion: { _ in self.giftView.play() }) }Copy the code

At this point a simple Lottie animation is complete. The complete code

import UIKit import Lottie class GiftViewController: UIViewController { private let sequenceSize: CGSize = CGSize(width: 100, height: 100) private var sequenceImageView: UIImageView! private var giftView: AnimationView! override func viewDidLoad() { super.viewDidLoad() setupUI() } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) animateSequenceImages { self.animateGift() } } private func setupUI() { sequenceImageView = UIImageView(frame: CGRect(origin: CGPoint(x: view.center.x - sequenceSize.width/2, y: view.center.y - sequenceSize.height/2), size: sequenceSize)) sequenceImageView.contentMode = .scaleToFill self.sequenceImageView.image = UIImage(named: "loading_icon") view.addSubview(sequenceImageView) giftView = AnimationView(name: "bird") giftView.frame = self.view.frame giftView.contentMode = .scaleAspectFit giftView.alpha = 0 giftView.loopMode = .autoReverse view.addSubview(giftView) let backButton = UIButton(frame: CGRect(x: 16, y: 40, width: 44, height: 44)) backButton.addTarget(self, action: #selector(userAskToGoBack), for: .touchUpInside) backButton.setImage(UIImage(named: "close_icon"), for: .normal) view.addSubview(backButton) } private func animateSequenceImages(completion: @escaping ()->Void) { let imageSetURL = Bundle.main.urls(forResourcesWithExtension: "png", subdirectory: "Sequence")! .sorted(by: { url1, url2 -> Bool in return url1.lastPathComponent < url2.lastPathComponent }) sequenceImageView.animationImages = imageSetURL.map{ UIImage(contentsOfFile: $0.path)! } sequenceImageView.animationDuration = 5 sequenceImageView.animationRepeatCount = 0 sequenceImageView.startAnimating() DispatchQueue. Main. AsyncAfter (deadline: now () + 2.0, the execute: {UIView. The animate (withDuration: 0.35, animations: {self. SequenceImageView. Alpha = 0.0}, completion: {_ in the self. SequenceImageView. Alpha = 0.0}) completion ()})} private func animateGift () {UIView. The animate (withDuration: Animations: {self.giftView.alpha = 1.0}, completion: animations: {self.giftView.alpha = 1.0}, completion: { _ in self.giftView.play() }) } @objc private func userAskToGoBack() { self.dismiss(animated: true, completion: nil) } }Copy the code