Paremad iOS-i animatsioonid CATransactioniga

Core Animation, kakaoraamistik, mis vastutab enamiku iOS- ja macOS-animatsioonide eest, on keeruline süsteem, milles on palju peidetud ja vähemtuntud funktsioone.

Core Animation haldab teie animatsioone kulisside taga ja teades veidi rohkem, kuidas see töötab, saame selle täielikult ära kasutada ja luua peenhäälestatud animatsioone.

Animatsioonid on lihtsad. Välja arvatud siis, kui nad seda pole.
BetterAnimations.playground

Animatsioonid on parim viis muutuste kuvamiseks kasutajale. Apple'i UIKit (või AppKit macOS-i jaoks) teeb animatsioonidesse hüppamise imelihtne. Olete tõenäoliselt kasutanud UIKitit enamiku oma animatsioonikohtumiste jaoks ja kood näeb ilmselt välja umbes selline:

See on puhas ja hõlpsasti kasutatav. Kõrgema taseme UIKit / AppKit raamistikud (mis asuvad Core Animation kohal) teevad animatsioonide hõlpsaks tegemise heaks suurepärase töö. Siiski on mõned lüngad, kui soovite keerulisemaid liikumisi.

Näide animatsioonist

Mõelge sellele: teil on UIB-nupp, UIView-järeltulija ja soovite teha sellest ümmarguse vaate ning kui seda koputatakse, muudab see vaate suurust.

Kõlab otse edasi. Saame animeerida stiledButton.layer.cornerRadius ja seada see meie raami muutudes poolele laiusele. Kuid oodake ... siin on probleem. UIView.animate (...) haldab ainult varaanimatsioone, mitte aga kihilisi varaanimatsioone. Kui proovisime muuta stiledButtoni raami ja stiilisButtoni nurgaRadiust allolevas animatsiooniplokis, saame soovimatu efekti:

Koodisegmendi tulemus

Raam animeerib korralikult, kuid cornerRadius hüppab animeerimiseta otse uuele väärtusele. Hiljem räägime CATransactionist ja kuidas see seda probleemi lahendab. Kuid kõigepealt on hea teada, mis meie animatsioonide kapoti all toimub ja miks see juhtub.

Südamiku animatsioon

UIView-eksemplaridel (nagu ka kihiga tagatud NSView-eksemplaridel) on CALayeri omadus, mida nimetatakse kihiks ja millel animatsioonid töötavad. Vaade delegeerib nende kihtide renderdamise südamiku animatsioonile. Kui kihti lisatakse animatsioone, ei muudeta kihi atribuute otseselt.

Core Animation sisaldab kahte paralleelset puuhierarhiat: mudelkihi puu ja esitluskihi puu. Neid saab näha CALayeri omadustest esitluskiht ja mudelKihi. Animatsiooni käigus tehtud muudatuste kuvamise eest vastutab esitluskiht. Kui animeeriksite kihi äärelaiuse atribuuti ja jälgiksite väärtust animatsiooni ajal, muutub borderWidth väärtus esitluse kihi puus ainult animatsiooni ajal.

CABasicAnimationi abil saame kihi omadusi animeerida. Kuid ärge laske sõnadel „Basic” teid heidutada - see on üks võimsamaid animatsioonivahendeid, mis võimaldavad teie animatsioone peenelt kohandada.

Praktiline märkus: animatsiooni hea tava on enne animatsiooni lisamist uuele väärtusele seada animatsioon. Tavaline on, et atribuut fillMode on seatud väärtusele kCAFillModeForwards ja isRemovedOnCompletion on seatud valele. Kuid see tähendab, et sisuliselt peatatakse animatsiooni lõpus meie esitluskiht. Hea tava on mudeli ja esitluskihtide sünkroonis hoida ning väärtuse määramisega enne animatsiooni lisamist saame just seda teha.

CATransaction - animatsioonide silumiseks

Okei. Tagasi meie UIButtoni näite juurde varasemast. Tahame animeerida kihi nurgaRadiuse atribuuti ja animeerida samal ajal ka raami atribuuti ning tagada, et need püsiksid parima animatsiooni jaoks ideaalselt sünkroonis.

CATavaldus päästmiseks!

CATransaction on enamik arendajaid sageli tähelepanuta jäetud klass. CATransactioni ülesanne on grupeerida mitu animatsiooniga seotud toimingut. See tagab, et soovitud animatsioonimuudatused seotakse samaaegselt ka põhianimatsiooniga.

Siin alustame tehingut ja võime muuta mis tahes tuumanimatsiooni võimaldavaid omadusi, mis animeeritakse pärast kinnistamist üksteise kõrval.

Kõike kokku panema

Seega tahame kihti animeerida ja atribuute samal ajal vaadata. See sobib suurepäraselt CATransactioni jaoks. Saame kasutada isegi meie olemasolevat UIView.animate () ja CABasicAnimation koodi!

Tulemuseks animatsioon

Selles näites kasutan selle ülesande täitmiseks nii UIView-animatsiooni kui ka CABasicAnimationi. Kõik, mida CATransaction koordineerib, antakse edasi teistele animatsioonidele. Näiteks rakendub funktsioon setAnimationDuration (dur: CFTimeInterval) CABasicAnimationi jaoks, seega ei pea me kestust määrama. Kuna UIView.animate () paneb meid kestust täpsustama, saame kestuse lihtsalt seada samaks, mis on täpsustatud CATransactioni seadmes setAnimationDuration.

Kohandatud võtmekaadri animatsioonid

Teine otstarbekas kasutus on kasutada CATransactioni timingFunktsiooni oma bezieri animatsioonikõvera määratlemiseks. Kui mähkida UIView.animate () CATransactioni sisse, saate animatsioonikõvera täpse kontrolli:

Lõplik animatsioon ajafunktsiooniga

Kokkuvõte

CATransaction on teie animatsioonide võimas koordinaator ja aitab säästa palju aega, andes samal ajal animatsioonide üle täpse kontrolli. Pluss, mitte hunnik pesastunud plokke - mis on alati loetavuse pluss.

Täielik Swift 3 mänguväljaku projekt, mis kasutab CATransactioni koos UIKiti ja CABasicAnimationiga, leiate siit:

Täname, et lugesite! Kui teil on küsimusi või ettepanekuid - võtke julgesti ühendust!