Parempia iOS-animaatioita CATransaction-toiminnolla

Core Animation, Cocoa-kehys, joka vastaa useimmista iOS- ja macOS-animaatioista, on monimutkainen järjestelmä, jossa on paljon piilotettuja ja vähemmän tunnettuja toimintoja.

Core Animation käsittelee animaatiosi kulissien takana, ja kun tiedämme hiukan enemmän sen toimivuudesta, voimme hyödyntää sitä täysimääräisesti ja luoda hienosäädettyjä animaatioita.

Animaatiot ovat helppoja. Paitsi silloin, kun he eivät ole.
BetterAnimations.playground

Animaatiot ovat paras tapa näyttää muutos käyttäjälle. Applen UIKit (tai AppKit for macOS) tekee animaatioihin hyppäämisestä helppoa. Olet todennäköisesti käyttänyt UIKit-ohjelmaa useimmissa animaatio-kohtaamisissasi, ja koodi näyttää todennäköisesti noin:

Se on puhdas ja helppo käyttää. Korkeamman tason UIKit / AppKit -kehykset (jotka sijaitsevat ydinanimaation yläpuolella) tekevät hienoa työtä animaatioiden tekemiseksi helpoksi. On kuitenkin joitain sudenkuoppia, kun haluat monimutkaisempia liikkeitä.

Esimerkki animaatio

Harkitse tätä: sinulla on UIB-painike, UIView-jälkeläinen, ja haluat tehdä siitä pyöreän näkymän, ja kun sitä napautetaan, se muuttaa kuvan kokoa.

Kuulostaa suoraan eteenpäin. Voimme animoida styledButton.layer.cornerRadius ja asettaa sen puoleen leveyteen kehyksen muuttuessa. Mutta odota ... on ongelma. UIView.animate (...) käsittelee vain ominaisuusanimaatioita, ei kerrosominaisuuksien animaatioita. Jos yritimme muuttaa styledButton-kehystä ja styledButton cornerRadius-kuvaa alla olevassa animaatiolohkossa, saamme tahattoman vaikutuksen:

Koodisegmentin tulos

Kehys animoi oikein, mutta cornerRadius hyppää suoraan uuteen arvoonsa animoimatta. Myöhemmin puhumme CATransactionista ja siitä, kuinka se ratkaisee asian. Mutta ensin on hyvä tietää, mitä animaatiomme takana tapahtuu ja miksi näin tapahtuu.

Core-animaation sisällä

UIView-ilmentymillä (samoin kuin kerrostatuilla NSView-ilmentymillä) on CALayer-ominaisuus, nimeltään kerros, jossa animaatiot toimivat. Näkymä delegoi niiden kerrosten renderoinnin Core Animation -sovellukselle. Kun animaatioita lisätään tasoon, kerroksen ominaisuuksia ei kuitenkaan muokata suoraan.

Core Animaatio sisältää kaksi rinnakkaista puuhierarkiaa: mallikerrospuun ja esityskerroksen puun. Nämä näkyvät CALayerin esityskerroksen ja mallin kerrosominaisuuksissa. Esityskerros on vastuussa kaikkien muutosten näyttämisestä animaation aikana. Jos animoit kerroksen borderWidth-ominaisuutta ja tarkkailet arvoa animaation aikana, borderWidth-arvo muuttuu vain esityskerroksen puussa animaation aikana.

CABasicAnimationin avulla voimme animoida kerroksen ominaisuuksia. Mutta älä anna sanan ”Basic” lannistaa sinua - tämä on yksi tehokkaimmista animaatiotyökaluista animaatioiden hienosäätöön.

Käytännöllinen huomautus: On hyvä animointikäytäntö asettaa animoitava arvo uudelle arvolle ennen animaation lisäämistä. On tavallista, että fillMode-ominaisuuden arvoksi on asetettu kCAFillModeForwards ja isRemovedOnCompletion asetettu väärään. Se, mitä tämä tekee, on kuitenkin keskeyttänyt esityskerrosmme animaation lopussa. On hyvä käytäntö pitää malli- ja esityskerrokset synkronoituna ja asettamalla arvo ennen animaation lisäämistä voimme tehdä tämän.

CATransaction - Animaatioiden tasoittamiseksi

Ok. Takaisin UIButton-esimerkkiimme aikaisemmasta. Haluamme animoida tason nurkkaRadius-ominaisuuden ja animoida näkymän kehyksen ominaisuuden samanaikaisesti ja varmistaa, että ne pysyvät täydellisessä synkronoinnissa parhaan animaation saavuttamiseksi.

CATtoimi pelastamiseen!

CATransaction on useimpien kehittäjien usein huomaamaton luokka. CATransactionin tehtävä on ryhmitellä useita animaatioon liittyviä toimintoja yhteen. Se varmistaa, että halutut animaatiomuutokset sitoutuvat samanaikaisesti ydinanimaation kanssa.

Tässä aloitamme tapahtuman ja voimme muuttaa kaikkia Core Animaatio -ominaisuuksia, jotka animoidaan toistensa rinnalla, kun ne on sitoutunut.

Kokoa kaikki yhdessä

Joten haluamme animoida kerrosta ja tarkastella ominaisuuksia samanaikaisesti. Tämä on täydellinen käyttö CATransactioniin. Voimme jopa hyödyntää olemassa olevaa UIView.animate () - ja CABasicAnimation -koodiamme!

Tuloksena oleva animaatio

Tässä esimerkissä käytän sekä UIView-animaatiota että CABasicAnimationia tämän tehtävän suorittamiseen. Kaikki CATransactionin koordinoima siirtyy muihin animaatioihin. Esimerkiksi setAnimationDuration (dur: CFTimeInterval) -toimintoa sovelletaan CABasicAnimationiin, joten meidän ei tarvitse määritellä mitään kestoa. Koska UIView.animate () saa meidät kuitenkin määrittämään keston, voimme yksinkertaisesti asettaa keston samaan, joka määritetään CATransactionin setAnimationDuration -kohdassa.

Mukautetut avainruudun animaatiot

Toinen siisti käyttö on käyttää CATransactionin ajoitustoimintoa määrittämään oma bezier-animaatiokäyräsi. Käärettäessäsi UIView.animate () CATransaction-sovelluksen sisälle, saat tarkan hallinnan animaatiokäyrältä:

Lopullinen animaatio ajastintoiminnolla

Yhteenveto

CATransaction on tehokas koordinaattori animaatioillesi ja säästää paljon aikaa, samalla kun animaatioitasi hallitaan tarkasti. Plussana ei ole joukko sisäkkäisiä lohkoja - mikä on aina luettavuus plus.

Täysi Swift 3 -leikkikenttäprojekti, joka käyttää CATransactionia UIKitin ja CABasicAnimation rinnalla, löytyy täältä:

Kiitos lukemisesta! Jos sinulla on kysymyksiä tai ehdotuksia - ota rohkeasti yhteyttä!