Share
Denna iOS Quick Tip lär dig hur du enkelt kan animera objekt med UIKit. Oavsett om du behöver glidande menyer eller flygande apor, är det lätt att få det gjort, och det här tipset visar dig hur!
Animering i mobila applikationer kan vara en mycket viktig funktion. Från en praktisk UX-ståndpunkt kan den låta användaren veta att något har ändrats eller flyttats. Från en mer underhållande synvinkel kan den flytta sprite eller kakelplattor runt skärmen och dra användaren till en helt interaktiv upplevelse.
Lyckligtvis är det väldigt lätt att få UIView-objekt att flytta runt i dina iOS-appar och du behöver inte ens oroa sig för att beräkna kryptiska geometriska ekvationer eller annan sådan voodoo!
Innan vi kommer in i själva animationen måste vi vara bekanta med grundläggande animeringsegenskaper för UIView-objekt. Nedan följer en lista över alla sådana egenskaper som iOS 5.1:
Vi har inte tillräckligt med utrymme i detta snabba tips för att gå över alla dessa egenskaper, men vi kommer att titta på några av de vanligaste: center, alpha och transform.
[UIView animateWithDuration: (NSTimeInterval) animeringar: ^ (void) animationer]
I sin mest grundläggande form är ovanstående allt du behöver för att animera en UIView. Det är ganska enkelt - ge en varaktighet (hur länge animationen kommer att vara) och sedan de egenskaper som ska animeras (de värden som du vill att UIViews egenskaper ska ha i slutet av animationen).
För ett snabbt exempel, om vi har en UIView som heter "theView", och vi vill göra det tona bort tills det är osynligt inom en sekund på 5 sekunder, skulle vi ringa:
[UIView animateWithDuration: 0.5f animeringar: ^ [theView setAlpha: 0.0f]; ];
Och vi är klara! Animationens varaktighet ställs in av animateWithDuration: parameter och ett Objektiv-C-block med specifika animeringsåtgärder levereras till animationer: parameter. Det är bara så enkelt!
Ofta vill vi göra något efter att animeringen avslutats. Vi tar ett spel till exempel. Låt oss säga att vi vill visa en spelare som de har lyckats genomföra en åtgärd. Vi gör det genom att göra en stjärnflyga upp i skärmens vänstra hörn, och sedan läggs en poäng till deras poäng. Det finns två saker vi ska göra när stjärnan är färdig att flyga:
För att göra detta ska vi ringa vår animationsmetod med ett färdigställningsblock, så här:
[UIView animateWithDuration: (NSTimeInterval) animeringar: ^ (void) animeringar slutförd: ^ (BOOL slutfört) slutförandet];
Om vi till exempel har en UIImageView (dvs. en underklass av UIView) som kallas "starImageView", med en bild av en stjärna och en viss numerisk variabel som heter "poäng", skulle vi ringa:
[UIView animateWithDuration: 0.7f animeringar: ^ [starView setCenter: CGPointMake (0, 0)]; slutförd: ^ (BOOL slutförd) [starView removeFromSuperView]; poäng ++; ];
Det är värt att notera att vi måste lägga till vår "starView" som en undervy av vår UIView om vi vill köra den här animationen igen. Du kan se detta i provkoden som bifogas denna Mobiletuts + handledning.
Slutligen finns det en metod som låter oss definiera ännu mer detaljerad information om vår animationsprocess, inklusive en fördröjning innan animationen körs och sätter in typen av "lättnad" för vår animering. Dessa "lättnader" -typer kan hittas (och beskrivas) i UIView.h-huvudfilen som enums:
typedef enum UIViewAnimationCurveEaseInOut, // långsamt i början och slutet UIViewAnimationCurveEaseIn, // långsamt i början UIViewAnimationCurveEaseOut, // långsamt i slutet UIViewAnimationCurveLinear UIViewAnimationCurve;
Jag skulle vilja uppmuntra dig att leka med dem genom att lägga dem i parametern "alternativ" med följande animeringsmetod:
[UIView animateWithDuration: (NSTimeInterval) fördröjning: (NSTimeInterval) alternativ: (UIViewAnimationOptions) animeringar: ^ (void) animeringar slutförd: ^ (BOOL slutfört) slutförandet];
Och än en gång, med hjälp av våra tidigare exempel kombineras, försenar vi vår animation med 0,1 sekunder och börjar sedan flytta den (långsamt först, sedan påskynda och sedan gå långsamt igen i slutet). Även när vi flyttar vår bild, vi blir blekare till 0% opacitet. Slutligen, efter att animeringen avslutats, lägger vi till en poäng på vår poäng och tar bort bilden från vår UIView.
[UIView animateWithDuration: 0,6f fördröjning: 0.1f alternativ: UIViewAnimationCurveEaseInOut animeringar: ^ [starView setCenter: CGPointMake (0, 0)]; [starView setAlpha: 0.0f]; slutförd: ^ (BOOL slutförd) [starView removeFromSuperview]; poäng ++; ];
Som du kan se är det väldigt enkelt att få dina UIViews animerade, så ta dig tid att leka med de olika animerbara UIView-egenskaperna och se vilka nya saker du kan upptäcka!
För extra övning, använd följande kommando för att rotera din bild:
[starView setTransform: CGAffineTransformRotate (starView.transform, 90.0f)];
Nu, se vad andra saker är möjliga med animeringar för UIViews! Och kom ihåg att det finns flera underklasser av UIView som kan animeras med samma metoder och egenskaper, som (men inte begränsat till):
Stjärnbilden som användes i denna handledning släpptes med en GNU / GPL-licens från FindIcons
Accentsconagua