[Swift5] So implementieren Sie Animationen mit "lottie-ios"

Was ist Lottie-Ios?

** Lottie ** ist eine Animationsbibliothek für iOS, Android und React Native, die von Airbnb veröffentlicht wurde. Sie können die Animationen, die in Adobe After Effects angezeigt werden können, in Echtzeit rendern und Animationen mit interessanten Bewegungen so einfach erstellen wie statische Inhalte in einer nativen App.

▼ Klicken Sie hier für Details https://ferret-plus.com/6214

▼ Klicken Sie hier für die offizielle Seite https://airbnb.design/lottie/

Montageumgebung

macOS Catalina 10.15.7 Xcode 12.1 Apple Swift version 5.3

Dieses Mal werden wir es in einem Projekt namens ** TestApp ** implementieren.

Einführungsablauf

① Installieren und importieren Sie CocoaPods ② Laden Sie die JSON-Datei herunter ③ Lesen Sie die heruntergeladene Datei und schreiben Sie den Code

① Installieren und importieren Sie CocoaPods

Die Pods, die Sie benötigen, sind "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
  
  //Hier installieren
  pod 'lottie-ios'

end

Wenn die Pod-Installation abgeschlossen ist, importieren Sie sie in Ihr Projekt.

② Laden Sie die JSON-Datei herunter

Gehen Sie jetzt zu Lotties Animationssuchseite und laden Sie Ihre Lieblingsanimationen herunter.

▼ Suchseite https://lottiefiles.com/featured?page=1

Wenn Sie sich für Ihre Lieblingsanimation entschieden haben, klicken Sie darauf, um eine Seite wie die folgende zu öffnen. Wählen Sie in der oberen rechten Ecke ** JSON herunterladen ** und anschließend ** Lottie JSON **, um die JSON-Datei herunterzuladen. Wenn der Download abgeschlossen ist, ziehen Sie ihn per Drag & Drop, um die Projektdatei hinzuzufügen. Die Stelle zum Ziehen ist oben in "info.plist" in Ordnung.

③ Lesen Sie die heruntergeladene Datei und schreiben Sie den Code

Dann ist es endlich implementiert.

ViewController.swift

import UIKit
import Lottie //Importiert in ①

class ViewController: UIViewController {
    
    //AnimationView-Erklärung
    var animationView = AnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()

        //Animation aufrufen
        addAnimationView()
    }
    
    //Vorbereitung für die Animation
    func addAnimationView() {
        
        //Geben Sie die Animationsdatei an
        animationView = AnimationView(name: "38280-man-chilling-on-electric-scooter") //Geben Sie hier den Namen der zuvor heruntergeladenen Datei ein (keine Erweiterung erforderlich).
        
        //Festlegen der Position der Animation (Bildschirmmitte)
        animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        
        //Geben Sie das Seitenverhältnis der Animation an und beginnen Sie mit einer Schleife
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        //In ViewController platziert
        view.addSubview(animationView)
    }

Funktionsprüfung

Überprüfen Sie nach dem Schreiben des Codes den Vorgang. Wenn die Animation in der Mitte des Bildschirms angezeigt wird (siehe Abbildung unten), ist sie erfolgreich!

Schließlich

Wie diesmal können Sie mit Lottie hochwertige Animationen in Kurzcode implementieren. Es gibt viele andere modische Animationen, also möchten Sie sie vielleicht einmal ausprobieren!

Danke, dass du bis zum Ende zugesehen hast! Ich hoffe, Sie finden es hilfreich.