Swift Academy · Lektion

Implicitte og eksplicitte animationer

Animér layer-egenskaber med CABasicAnimation.

Lektion 2 af 413 trin

Implicitte og eksplicitte animationer er en gratis Swift Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Swift Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Swift Academy-kurset indeholder 4 lektioner i alt.

To måder at animere lag på

Core Animation tilbyder implicitte animationer (automatiske ved ændring af en egenskab) og eksplicitte animationer (du opretter selv et animationsobjekt).

At kende begge former og deres samspil er afgørende for jævne bevægelser.

Implicitte animationer

Hvis du ændrer en animerbar egenskab på et selvstændigt lag, udløses en implicit animation med en standardkurve på 0,25 s—du behøver ikke noget animationsobjekt.

let layer = CALayer()
// Later, this animates automatically:
layer.opacity = 0.0

Animerbare egenskaber

Mange lagegenskaber kan animeres: opacity, position, bounds, backgroundColor, transform, cornerRadius og flere.

layer.cornerRadius = 20 // animates implicitly
layer.backgroundColor = UIColor.systemGreen.cgColor

Handlinger og handlingsmekanismen

Implicitte animationer styres af handlinger. Når en egenskab ændres, slår laget en CAAction op, som skal køres. Du kan tilpasse eller deaktivere disse handlinger.

Visningstilknyttede lag deaktiverer implicitte animationer

Lag, der er knyttet til en UIView, har implicitte animationer slået fra. Du animerer dem i stedet via UIView.animate eller med eksplicitte animationer.

UIView.animate(withDuration: 0.3) {
    view.alpha = 0
}

CABasicAnimation

CABasicAnimation animerer én egenskab mellem en fromValue og en toValue. Føj den til laget med en key path, der svarer til egenskaben.

let anim = CABasicAnimation(keyPath: "opacity")
anim.fromValue = 1.0
anim.toValue = 0.0
anim.duration = 0.5
layer.add(anim, forKey: "fade")

Præsentation kontra model

En eksplicit animation ændrer kun præsentationsværdierne (værdierne på skærmen); lagets modelværdi springer tilbage, når animationen slutter.

Hvis ændringen skal fastholdes, skal du også indstille modelværdien.

layer.opacity = 0.0 // set model value so it persists
layer.add(anim, forKey: "fade")

Nøglebilledeanimationer

CAKeyframeAnimation animerer gennem flere values over keyTimes eller langs en path—ideelt til hop eller bevægelser langs kurver.

let move = CAKeyframeAnimation(keyPath: "position")
move.values = [
    NSValue(cgPoint: CGPoint(x: 0, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
move.duration = 1.0
layer.add(move, forKey: "path")

Tidsfunktioner

Styr accelerationen med timingFunction: indfasning, udfasning, lineær eller en brugerdefineret kubisk Bézier-kurve.

anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

Gruppering og transaktioner

Saml flere ændringer i en CATransaction for at dele varighed og tidsindstilling eller for at deaktivere implicitte animationer helt.

CATransaction.begin()
CATransaction.setDisableActions(true)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()

Animationsdelegerede og afslutning

Indstil CATransaction.setCompletionBlock eller en animationsdelegeret for at køre kode, når bevægelsen er færdig—oprydning, kædning eller tilstandsopdateringer.

CATransaction.begin()
CATransaction.setCompletionBlock { print("done") }
layer.add(anim, forKey: "fade")
CATransaction.commit()

Hurtig test: animationer

Test din forståelse af implicitte og eksplicitte animationer.

Opsummering: implicitte og eksplicitte animationer

Selvstændige lag animeres implicit via handlinger, når animerbare egenskaber ændres; visningstilknyttede lag deaktiverer dette og bruger UIView.animate. Eksplicitte CABasicAnimation- og CAKeyframeAnimation-animationer animerer præsentationsværdien, så du skal opdatere modelværdien for at fastholde resultatet.

Finjustér bevægelser med tidsfunktioner, saml ændringer i CATransaction, og brug afslutningsblokke til efterfølgende arbejde.

Gratis at komme i gang

Lær Swift med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
122
Lektioner
409

Ofte stillede spørgsmål

Er lektionen “Implicitte og eksplicitte animationer” gratis?

Ja — alle 3 lektioner i læringssporet Swift Academy, inklusive “Implicitte og eksplicitte animationer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Swift Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Implicitte og eksplicitte animationer”?

Animér layer-egenskaber med CABasicAnimation. Du øver dig i Swift Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Swift Academy?

Der kræves ingen tidligere erfaring. Swift Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Implicitte og eksplicitte animationer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Swift Academy-lektion?

Ja. Alle Swift Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Grundlæggende CALayer
  2. Implicitte og eksplicitte animationer
  3. Transformationer og 3D-effekter
  4. Brugerdefineret tegning med Core Graphics
← Tilbage til Swift Academy