[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. image.png Sélectionnez ** Télécharger JSON ** dans le coin supérieur droit et sélectionnez ** Lottie JSON ** pour télécharger le fichier JSON. image.png 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! image.png

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.

Recommended Posts

[Swift5] Comment mettre en œuvre une animation à l'aide de "lottie-ios"
Pour implémenter la publication d'images à l'aide de rails
Comment implémenter UICollectionView avec du code uniquement dans Swift
[Rails] Comment mettre en œuvre le scraping
[Java] Comment implémenter le multithreading
Comment autoriser à l'aide de graphql-ruby
Comment mettre en œuvre facilement les achats intégrés à l'aide d'itemsstore <Implémentation: Android>
[Swift] Comment envoyer une notification
[Java] Essayez de mettre en œuvre à l'aide de génériques
[Rails] Comment mettre en œuvre le classement par étoiles
[Swift] Comment remplacer plusieurs chaînes
Comment créer CloudStack à l'aide de Docker
Comment exécuter un contrat avec web3j
Comment trier une liste à l'aide du comparateur
[swift5] Comment spécifier la couleur en hexadécimal
Comment implémenter la fonctionnalité de recherche dans Rails
Comment implémenter le calcul de la date en Java
Comment implémenter le filtre de Kalman par Java
[Rails] Comment télécharger des images à l'aide de Carrierwave
[Java] Comment calculer l'âge à l'aide de LocalDate
Comment appeler le code Swift 5.3 depuis Objective-C
Comment appliquer les conventions de codage en Java
Comment implémenter TextInputLayout avec la fonction de validation
[Swift5] Comment créer un écran de démarrage
Comment implémenter la fonctionnalité de classement dans Rails
Comment implémenter le traitement asynchrone dans Outsystems
Comment écraser les données Firebase avec Swift
Les débutants rapides ont essayé d'implémenter la logique micro-ondes!
Comment insérer des icônes à l'aide de Font awesome
Comment renvoyer une valeur du modèle au contrôleur en utilisant le protocole [Swift5]
Comment mettre en œuvre un diaporama en utilisant Slick in Rails (un par un et plusieurs par un)
Comment sortir Excel et PDF avec Excella
Comment exécuter une méthode et simuler avec JUnit
[Rails] Comment créer un graphique à l'aide de lazy_high_charts
Comment supprimer un contrôleur, etc. à l'aide d'une commande
[Swift] Comment générer un identifiant pour identifier de manière unique une certaine chose (en utilisant UUID)
Comment jouer de la voix ou de la musique en utilisant javascript
Remarquez comment utiliser Swift Super Basic TableView