[Swift5] Comment mettre en œuvre une animation à l'aide de "lottie-ios"

Qu'est-ce que lottie-ios?

** Lottie ** est une bibliothèque d'animations pour iOS, Android et React Native qui est apparue depuis Airbnb. Vous pouvez rendre les animations qui peuvent être affichées dans Adobe After Effects en temps réel et créer des animations avec des mouvements intéressants aussi facilement que de créer du contenu statique dans une application native.

▼ Cliquez ici pour plus de détails https://ferret-plus.com/6214

▼ Cliquez ici pour la page officielle https://airbnb.design/lottie/

Environnement de montage

macOS Catalina 10.15.7 Xcode 12.1 Apple Swift version 5.3

Cette fois, nous allons l'implémenter dans un projet appelé ** TestApp **.

Flux d'introduction

① Installer et importer des CocoaPods ② Téléchargez le fichier JSON ③ Lisez le fichier téléchargé et écrivez le code

① Installer et importer des CocoaPods

Les pods dont vous avez besoin sont «pod'lottie-ios».

Podfile.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'TestApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

pod 'IBMWatsonToneAnalyzerV3', '~> 3.6.0'

  # Pods for TestApp

  target 'TestAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'TestAppUITests' do
    # Pods for testing
  end
  
  //Installez ici
  pod 'lottie-ios'

end

Lorsque l'installation du pod est terminée, importez-la dans votre projet.

② Téléchargez le fichier JSON

Allez maintenant sur la page de recherche d'animations de Lottie et téléchargez vos animations préférées.

▼ Page de recherche https://lottiefiles.com/featured?page=1

Une fois que vous avez choisi votre animation préférée, cliquez dessus pour ouvrir une page comme celle ci-dessous. Sélectionnez ** Télécharger JSON ** dans le coin supérieur droit et sélectionnez ** Lottie JSON ** pour télécharger le fichier JSON. Une fois le téléchargement terminé, faites-le glisser et déposez-le pour ajouter le fichier de projet. L'endroit à faire glisser est OK en haut de info.plist.

③ Lisez le fichier téléchargé et écrivez le code

Ensuite, il est finalement mis en œuvre.

ViewController.swift

import UIKit
import Lottie //Importé en ①

class ViewController: UIViewController {
    
    //Déclaration d'AnimationView
    var animationView = AnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()

        //Animation d'appel
        addAnimationView()
    }
    
    //Préparation à l'animation
    func addAnimationView() {
        
        //Spécifiez le fichier d'animation
        animationView = AnimationView(name: "38280-man-chilling-on-electric-scooter") //Saisissez ici le nom du fichier que vous avez téléchargé précédemment (aucune extension requise)
        
        //Spécifier la position de l'animation (centre de l'écran)
        animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        
        //Spécifiez le rapport hauteur / largeur de l'animation et commencez par une boucle
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        //Placé dans ViewController
        view.addSubview(animationView)
    }

Contrôle de fonctionnement

Après avoir écrit le code, vérifiez l'opération. Si l'animation est affichée au centre de l'écran comme le montre l'image ci-dessous, c'est réussi!

finalement

Comme nous l'avons fait cette fois, Lottie vous permet d'implémenter des animations de haute qualité en code court. Il existe de nombreuses autres animations à la mode, vous voudrez peut-être les essayer une fois!

Merci d'avoir regardé jusqu'à la fin! J'espère que vous le trouverez utile.