Share
Denne iOS Quick Tip vil lære deg hvordan du enkelt kan animere objekter med UIKit. Enten du trenger glidende menyer eller flygende aper, er det lett å få det gjort, og dette tipset vil vise deg hvordan!
Animasjon i mobile applikasjoner kan være en svært viktig funksjon. Fra et praktisk, UX-synspunkt kan det føre til at brukeren vet at noe har blitt endret eller flyttet. Fra et mer underholdende synspunkt kan det flytte spillsprites eller fliser kart rundt skjermen, og drar brukeren til en fullstendig interaktiv opplevelse..
Heldigvis er det veldig enkelt å få UIView-objekter flyttet rundt i IOS-appene dine, og du trenger ikke engang å bekymre deg for å beregne kryptiske geometriske ligninger eller andre slike voodoo!
Før vi kommer inn i selve animasjonen, må vi være kjent med de grunnleggende animasjonsegenskapene til UIView-objekter. Følgende er en liste over alle slike egenskaper som av iOS 5.1:
Vi har ikke nok plass i dette raske tipset for å gå over alle disse egenskapene, men vi vil se på noen av de vanligste: senter, alfa og transformere.
[UIView animateWithDuration: (NSTimeInterval) animasjoner: ^ (void) animasjoner]
I sin mest grunnleggende form er det ovenfor alt du trenger for å animere en UIView. Det er ganske enkelt - pass en varighet (hvor lenge animasjonen varer), og deretter egenskapene som skal animeres (de verdiene du vil at UIViews egenskaper skal ha på slutten av animasjonen).
For et raskt eksempel, hvis vi har en UIView kalt "theView", og vi vil gjøre det visne bort til det er usynlig innen en 5 sekunders varighet, ville vi ringe:
[UIView animateWithDuration: 0.5f animasjoner: ^ [theView setAlpha: 0.0f]; ];
Og vi er ferdige! Varigheten av animasjonen er satt av animateWithDuration: parameter, og en objektiv-C-blokk med spesifikke animasjonshandlinger blir levert til animasjoner: parameter. Det er bare så enkelt!
Ofte vil vi gjøre noe etter at animasjonen er ferdig. Vi tar for eksempel et spill. La oss si at vi vil vise en spiller at de har fullført en handling. Vi gjør dette ved å lage en stjerneflyvning opp i venstre hjørne av skjermen, og deretter blir et poeng lagt til poengsummen. Det er to ting vi vil gjøre når stjernen er ferdig med å fly:
For å gjøre dette, ringer vi animasjonsmetoden med en ferdigstillingsblokk, slik som denne:
[UIView animateWithDuration: (NSTimeInterval) animasjoner: ^ (ugyldig) animasjon ferdigstillelse: ^ (BOOL ferdig) fullføring];
Hvis vi for eksempel har en UIImageView (dvs. en underklasse av UIView) kalt "starImageView", med et bilde av en stjerne, og noen numeriske variabler kalt "poeng", ville vi ringe:
[UIView animateWithDuration: 0.7f animasjoner: ^ [starView setCenter: CGPointMake (0, 0)]; fullføring: ^ (BOOL ferdig) [starView removeFromSuperView]; punkter ++; ];
Det er verdt å merke seg at vi må legge til vår "starView" som et undervisning av vår UIView hvis vi vil kjøre denne animasjonen igjen. Du kan se dette i prøvekoden som er vedlagt som vedlegg til denne Mobiletuts + opplæringen.
Endelig er det en metode som lar oss definere enda større detaljer om animasjonsprosessen, inkludert en forsinkelse før animasjonen går, og setter inn typen "lettelse" for animasjonen vår. Disse "lettelse" -typene kan bli funnet (og beskrevet) i UIView.h headerfilen som enums:
typedef enum UIViewAnimationCurveEaseInOut, // sakte i begynnelsen og slutten UIViewAnimationCurveEaseIn, // sakte i begynnelsen UIViewAnimationCurveEaseOut, // sakte i slutten UIViewAnimationCurveLinear UIViewAnimationCurve;
Jeg vil oppfordre deg til å leke med dem, ved å sette dem inn i parameteren "alternativer" av følgende animasjonsmetode:
[UIView animateWithDuration: (NSTimeInterval) forsinkelse: (NSTimeInterval) alternativer: (UIViewAnimationOptions) animasjoner: ^ (void) animasjoner ferdigstillelse: ^ (BOOL ferdig) fullføring];
Og igjen, ved å bruke våre tidligere eksempler kombinert, forsinker vi animasjonen vår med 0,1 sekunder, så begynner du å flytte den (sakte først, deretter fart og deretter sakte igjen på slutten). Også, mens vi beveger bildet vårt, vil vi fade det til 0% opacity. Til slutt, etter at animasjonen er ferdig, legger vi til et poeng på poengsummen vår, og fjerner bildet fra vår UIView.
[UIView animateWithDuration: 0.6f forsinkelse: 0.1f alternativer: UIViewAnimationCurveEaseInOut animasjoner: ^ [starView setCenter: CGPointMake (0, 0)]; [starView setAlpha: 0.0f]; fullføring: ^ (BOOL ferdig) [starView removeFromSuperview]; punkter ++; ];
Som du kan se, er det veldig enkelt å få dine UIViews animert, så ta litt tid å leke med de forskjellige animasjonsbare UIView-egenskapene, og se hvilke nye ting du kan oppdage!
For ekstra praksis, bruk følgende kommando for å rotere bildet ditt:
[starView setTransform: CGAffineTransformRotate (starView.transform, 90.0f)];
Nå, se hva andre ting er mulige med animasjoner for UIViews! Og husk, det er flere underklasser av UIView som kan animeres med samme metoder og egenskaper, som (men ikke begrenset til):
Stjernebildet som ble brukt i denne opplæringen, ble utgitt med en GNU / GPL-lisens fra FindIcons
Accentsconagua