Lottie 4.0 til iOS: Revolutionerende Animationer

I en verden, hvor brugeroplevelsen er altafgørende, spiller animationer en nøglerolle i at skabe intuitive og engagerende applikationer. For iOS-udviklere har værktøjer, der forenkler denne proces, altid været højt værdsat. Lottie er netop sådan et værktøj, og med udgivelsen af Lottie 4.0 til iOS tager animation på mobile enheder et kæmpe skridt fremad. Denne opdatering lover ikke kun smukkere, men også markant mere effektive animationer, hvilket er en game-changer for ydeevnen i dine apps.

Hvad er Lottie? En introduktion til dynamiske animationer

Lottie er et cross-platform bibliotek udviklet af Airbnb, der revolutionerer måden, designere og udviklere integrerer animationer i applikationer. I stedet for at skulle genskabe komplekse animationer manuelt fra bunden, giver Lottie dig mulighed for at indlæse og rendere vektorbaserede animationer og grafik i realtid med et minimum af kode. Forestil dig at kunne tage animationer lavet i After Effects, Sketch eller Haiku og få dem til at køre problemfrit på iOS, macOS, tvOS, visionOS, Android og Web. Det er præcis, hvad Lottie muliggør.

Kernen i Lottie er brugen af Bodymovin JSON-formatet. Dette betyder, at animationerne er ekstremt små i størrelse, men kan være utroligt komplekse i deres design. Fordi de er vektorbaserede, kan de skaleres til enhver opløsning uden tab af kvalitet, hvilket er essentielt for moderne enheder med varierende skærmstørrelser. Lottie-animationer kan afspilles, ændres i størrelse, loopes, accelereres, sænkes, vendes om og endda interaktivt styres. Du kan også vælge at afspille eller loope kun en del af animationen, hvilket giver uendelige muligheder for kreativ kontrol. Endnu mere imponerende er muligheden for at ændre animationer under kørsel – justere farver, positioner eller enhver anden keyframe-værdi dynamisk.

Lottie 4.0 til iOS: Et Kæmpe Skridt Fremad med Core Animation

Den mest betydningsfulde nyhed i Lottie 4.0 til iOS er en komplet omskrivning af rendering-motoren, nu drevet af Core Animation. Denne ændring adresserer et af de mest presserende problemer med tidligere versioner af Lottie: ydeevne på hovedtråden.

Udfordringen med tidligere versioner:

Tidligere versioner af Lottie afspillede animationer på appens hovedtråd ved hjælp af et CADisplayLink. Dette betød, at Lottie en gang pr. frame udførte kode på hovedtråden for at fremme animationens fremskridt og genopfriske dens indhold. Resultatet var, at animationer kunne forbruge 5-20% eller mere af CPU'en under afspilning, hvilket efterlod færre CPU-cyklusser til resten af appen. Dette kunne føre til, at animationer mistede frames eller frøs helt, især når hovedtråden var optaget, hvilket resulterede i en dårlig brugeroplevelse. Disse begrænsninger var iboende i den hovedtrådsbaserede rendering-arkitektur.

Løsningen: Core Animation:

På iOS er den mest ydelsesfulde og strømeffektive måde at afspille animationer på ved at bruge Core Animation. Dette system-framework renderer animationer uden for app-processen med GPU-hardwareacceleration. Afspilning af animationer styres af en separat systemproces kaldet 'render server'. Dette betyder, at Core Animation-drevne animationer ikke bidrager til app-processens egen CPU-forbrug og kan fortsætte, selv når hovedtråden er blokeret eller optaget.

Gennem 2022 har udviklerne arbejdet på en ny rendering-motor implementering for Lottie, bygget oven på Core Animation. For hvert af lagene i animationens JSON-fil bygger den nye motor et CALayer og anvender CAAnimations med keyframes for lagets animerede egenskaber. Lottie sender disse animations-keyframes videre til Core Animation, som tager sig af den faktiske rendering på skærmen og opdaterer animationen for hver frame.

Fordele ved den nye motor:

• Eliminering af CPU-overhead: Den nye motor eliminerer CPU-forbruget fra afspilning af en Lottie-animation i app-processen.
• Garanteret jævn afspilning: Animationer vil nu afspille problemfrit ved 60 eller 120 fps uanset appens CPU-belastning. Dette er en enorm forbedring for brugeroplevelsen.
• Mere tilgængelige ressourcer: Da animationer renderet af den nye motor ikke udfører kode på appens hovedtråd, har apps nu flere ressourcer tilgængelige for anden funktionalitet. Dette er især værdifuldt ved kørsel af opgaver med høj CPU-belastning. Et eksempel er Airbnb-appen, der viser en Lottie-animation ved første opstart. Ved at skifte til den nye rendering-motor reduceredes appens samlede opstartstid, samtidig med at frame-raten og brugeroplevelsen af opstartsanimationen blev forbedret.

Den nye Core Animation rendering-motor blev først introduceret i Lottie 3.4.0 som en opt-in funktion. Efter omfattende test og feedback fra tidlige brugere, er den nu standard i Lottie 4.0, hvilket betyder, at udviklere automatisk får disse forbedringer uden yderligere arbejde eller migration.

Andre væsentlige forbedringer i Lottie 4.0:

Udover den banebrydende Core Animation-motor inkluderer Lottie 4.0 til iOS også flere andre væsentlige forbedringer, der er bidraget af medlemmer af fællesskabet:

• Understøttelse af dotLottie-animationsfiler: Disse filer er markant mindre i størrelse end standard JSON-filer, hvilket reducerer app-størrelse og downloadtider.
• Hurtigere animationsdekodning: En ny implementering af animationsdekodning, der er cirka 2x hurtigere end den tidligere Codable-baserede implementering, hvilket yderligere forbedrer opstartstid og ydeevne.

Disse forbedringer understreger Lotties engagement i at levere en førsteklasses animationsløsning, der er både kraftfuld og effektiv.

Sådan installeres Lottie i dit iOS-projekt

Lottie er designet til at være let at integrere i dit iOS-udviklingsmiljø. Du har flere installationsmuligheder, afhængigt af din foretrukne pakkehåndtering:

1. Swift Package Manager (SPM):

Dette er den anbefalede metode.

• I Xcode skal du vælge 'File' → 'Add Packages...'.
• Indtast URL'en for Lottie-SPM-repoet: https://github.com/airbnb/lottie-spm.git.
• Alternativt kan du tilføje følgende afhængighed til din Package.swift-fil:

  .package(url: "https://github.com/airbnb/lottie-spm.git", from: "4.5.2") 

Det anbefales at bruge lottie-spm-repoet, da det er meget mindre (mindre end 500kb) og kun indeholder en pointer til det forkompilerede XCFramework (typisk ~8MB), hvilket resulterer i langt hurtigere downloads sammenlignet med det fulde lottie-ios-repo (300+ MB). Hvis du foretrækker at inkludere Lottie-kildekoden direkte i dit projekt, kan du afhænge direkte af https://github.com/airbnb/lottie-ios.git.

2. CocoaPods:

• Tilføj følgende linje til din Podfile:

  pod 'lottie-ios' 

• Kør derefter: pod install.
• Efter installationen skal du importere Lottie i dine filer med: import Lottie.

3. Carthage:

• Tilføj Lottie til din Cartfile:

  github "airbnb/lottie-ios" "master" 

• Kør derefter: carthage update.
• I din applikations targets 'General'-fane under 'Linked Frameworks and Libraries'-sektionen skal du trække og slippe lottie-ios.framework fra Carthage/Build/iOS-mappen, som carthage update producerede.

Lottie understøtter Swift/Xcode-versioner tilbage til den minimumsversion, der er tilladt af Apple for indsendelser til App Store.

Sådan bruges Lottie i Swift/SwiftUI: Trin-for-trin guide

Når Lottie er installeret, er det overraskende ligetil at integrere animationer i dine iOS-apps, især med SwiftUI. Her er en trin-for-trin guide:

Trin 1: Tilføj dine animationsfiler

Sørg for at tilføje dine Lottie-animationsfiler (i JSON-format) til dit Xcode-projekt. Træk og slip blot .json-filerne ind i din Project Navigator. Disse filer indeholder dataene for dine animationer.

Trin 2: Opret en SwiftUI Wrapper til Lottie

Da Lottie er et UIKit-baseret bibliotek, skal vi oprette en SwiftUI-wrapper ved hjæng af UIViewRepresentable for at bruge det i SwiftUI-visninger.

import SwiftUI import Lottie struct LottieView: UIViewRepresentable { var filename: String var loopMode: LottieLoopMode = .loop // Tilføjet loopMode som parameter func makeUIView(context: Context) -> UIView { let view = UIView(frame: .zero) let animationView = LottieAnimationView(name: filename) animationView.contentMode = .scaleAspectFit animationView.loopMode = loopMode // Brug loopMode parameter animationView.play() animationView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(animationView) NSLayoutConstraint.activate([ animationView.widthAnchor.constraint(equalTo: view.widthAnchor), animationView.heightAnchor.constraint(equalTo: view.heightAnchor) ]) return view } func updateUIView(_ uiView: UIView, context: Context) { // Opdater visningen om nødvendigt. // For simple afspilning er der ofte ikke behov for opdatering her. } } 

Kommentarer til tilpasning:

• filename: Dette er navnet på din Lottie-animationsfil (uden .json-udvidelsen), som du tilføjede i Trin 1.
• loopMode: Du kan styre, hvordan animationen looper. Standard er .loop, men du kan også bruge .playOnce, .repeat(count), osv.

Trin 3: Brug Lottie-animationer i din SwiftUI-visning

Nu hvor du har din LottieView sat op, kan du bruge den i enhver af dine SwiftUI-visninger.

import SwiftUI struct AnimationExampleView: View { var body: some View { VStack { Text("Indlæser...") .font(.largeTitle) .padding() LottieView(filename: "loading_animation", loopMode: .loop) .frame(width: 200, height: 200) // Sætter størrelsen på animationen .background(Color.clear) // Sørg for gennemsigtig baggrund, hvis animationen har det Spacer() Text("Velkommen til appen!") .font(.title2) .padding() } .navigationTitle("Lottie Animationseksempel") } } 

Kommentarer til tilpasning:

• LottieView(filename: "loading_animation", loopMode: .loop): Erstat "loading_animation" med navnet på din faktiske JSON-fil.
• .frame(width: 200, height: 200): Juster disse værdier for at passe til dit design. Animationen vil automatisk skaleres inden for denne ramme.

Med disse trin kan du nemt integrere rige, dynamiske animationer, der forbedrer brugeroplevelsen i dine iOS-apps, alt sammen understøttet af den nye, optimerede rendering-motor i Lottie 4.0.

Sikkerhed og Privatliv i Lottie

Et vigtigt aspekt ved ethvert bibliotek er dets håndtering af sikkerhed og privatliv. Lottie er designet med brugernes privatliv for øje:

• Ingen dataindsamling: Lottie indsamler ingen data. Dette er en afgørende faktor for at udfylde App Privacy Details i App Store Connect.
• Privacy Manifest: Biblioteket leveres med et privatlivsmanifest, som kan inkluderes i din app for at give gennemsigtighed om databrug.
• Kodesignatur: Fra Lottie 4.4.0 og nyere distribueres XCFramework-bundter med en kodesignatur, hvilket giver en ekstra sikkerhedsforanstaltning og mulighed for at verificere ægtheden af biblioteket.

Bidrag til Lottie-fællesskabet

Lottie er et open source-projekt, og fællesskabsbidrag er altid velkomne. Hvis du ønsker at bidrage med nye funktioner eller fejlrettelser, der påvirker, hvordan animationer renderes, opfordres du til at inkludere snapshot-testcases, der validerer ændringerne. Projektet følger Airbnb Swift Style Guide, og der er værktøjer som SwiftFormat og SwiftLint til automatisk formatering af koden.

Ofte Stillede Spørgsmål om Lottie 4.0 og Animationer

Her er svar på nogle af de mest almindelige spørgsmål vedrørende Lottie 4.0 og generel brug af Lottie:

Konklusion

Lottie 4.0 til iOS repræsenterer en milepæl inden for mobil animation. Ved at udnytte kraften i Core Animation og introducere forbedringer som dotLottie-understøttelse og hurtigere dekodning, sætter Lottie en ny standard for ydeevne og effektivitet. For udviklere betyder det muligheden for at skabe rigere, mere flydende og engagerende brugeroplevelser uden at gå på kompromis med appens ydeevne. Hvis du endnu ikke har udforsket Lottie, er der aldrig et bedre tidspunkt at komme i gang og bringe dine iOS-apps til live med fantastiske animationer.

Hvis du vil læse andre artikler, der ligner Lottie 4.0 til iOS: Revolutionerende Animationer, kan du besøge kategorien Teknologi.