efter lanseringen av iOS 7 (och iOS 8 också) blev animations-och rörelseeffekter centrala för utformningen av appar från både Apple och 3rd party-Utvecklare. iOS 7 introducerade en platt, minimal design till appar som oundvikligen resulterade i att vissa appar hade ett liknande användargränssnitt. För att skilja sina appar från andra appar använde Utvecklare funktioner som animationer och rörelseeffekter för att få sina appar att sticka ut.

inte bara är animationer som används för att ställa din app isär, de kan förbättra den totala användarupplevelsen av din ansökan. För bra exempel på hur animationer används för att förbättra UX, bör du titta på hur Apple använder animationer i sina appar. Till exempel i appen Foton, när du väljer ett foto från en samling, expanderar fotot från det valda och när det stängs krymper det tillbaka till det valda fotot. Detta bidrar till navigeringen av appen genom att den låter dig veta exakt var du var, om du surfar många bilder.

Facebook: s papper använder också animationer vackert för att lägga till den övergripande användarupplevelsen av appen. Du väljer en artikel att läsa genom att vända upp den. Denna åtgärd, det faktum att artikeln expanderar ut från sin miniatyrversion, föreslår att genom att göra motsatsen, dvs vända artikeln nedåt, skulle krympa den tillbaka till sin miniatyrbild. Här används animering för att förmedla hur appen fungerar och till och med en första gångsanvändare av appen skulle snart kunna göra antaganden om dess användning och räkna ut dess navigering utan att behöva en handledning.

inte bara animationer lägga till användarupplevelsen av appen, men de kan vara vad läckerheter och imponerar dina användare garanterar upprepad användning i stället för att avinstallera appen för en bättre från App Store.

det finns många sätt att inkludera animationer i dina appar, några av dem är med hjälp av UIKit Dynamics, layer animations, view controller övergångar eller genom att använda ett tredjepartsbibliotek som Facebook Pop library eller jnwspringanimation framework.

i denna handledning kommer vi att titta på enkla visningsanimationer. Du kan ladda ner starter project som är en enda vy ansökan med en tabellvy som listar de exempel som presenteras i handledningen handledning. Jag kommer att använda detta när vi kommer till exempeldelen av handledningen, istället för att börja från början.

handledningen börjar med en sammanfattning av API: er som används för att animera vyer och slutar med några exempel som visar användningen av några av API: erna i en app.

grundläggande Visningsanimationer

att skapa animationer på dina vyer handlar om att ändra egenskaper på dem och låta UIKit animera dem automatiskt. Egenskaperna vi ändrar är de som är markerade Animerbara.

följande lista visar de animerbara egenskaperna.

  • center
  • alpha
  • ram
  • gränser
  • omvandla
  • backgroundColor
  • contentStretch

du kommer att finna att alla animationer innebär en förändring av en eller flera av ovanstående egenskaper.

för enkla visningsanimationer tillhandahåller UIKit följande API: er som kan användas för att animera vyer på skärmen.

den första tar två parametrar-ett värde för varaktigheten i sekunder av animationen och en stängning där du anger de egenskaper du vill ändra. UIKit tar det ursprungliga tillståndet i vyn och skapar en smidig övergång från det tillståndet till slutläget enligt vad du angav i animationsstängningen.

de andra två API: erna liknar den första, men de tar extra parametrar som ger mer konfiguration till animationen. Den andra tar en slutförslutning som du kan använda för att antingen ange en annan animering som du vill ha gjort efter den första eller så kan du göra en del rensning av användargränssnittet, till exempel att ta bort en vy från visningshierarkin när en annan vy är animerad på scenen.

den tredje API tar ytterligare två parametrar-fördröjningen, vilket är dags att vänta innan animeringen startar och alternativ, en uiviewanimationoptions konstant, vilket indikerar hur du vill utföra animationerna. Följande visar de tillgängliga alternativen.

Våranimationer

Våranimationer försöker modellera beteendet hos en verklig vår, genom att när en vy flyttas från en punkt till en annan kommer den att studsa/svänga mot slutet innan den sätter sig ner till position.

nedan är metoden blocket vi använder för våren animationer.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, tillval:, animationer:, slutförande:)

ovanstående liknar de metoder vi tittade på tidigare förutom två nya parametrar-usingSpringWithDamping och initialSpringVelocity. Dämpning är ett värde från 0 till 1 som bestämmer hur mycket vyn studsar mot slutet av animeringen. Ju närmare 1 värdet är, desto mindre hopp blir det. initialSpringVelocity som namnet säger, bestämmer initialhastigheten för animationen. Detta bestämmer hur stark animationen börjar. Om du vill att den ska starta kraftigt, ställ sedan in ett större värde, om du vill ha en smidig animering kan du ställa in värdet till 0.

keyframe animeringar

keyframe animeringar kan du ställa in olika stadier av en animation. Du kan gruppera olika animationer tillsammans som delar några vanliga egenskaper, men ändå kunna styra dem separat.

istället för en animering som bara rör sig längs en väg, kommer UIKit att utföra de olika stadierna i animationen.

API: erna för nyckelbildsanimering är följande.

ovanstående två metoder används tillsammans, den andra blir kapslad i den första animationsstängningen.

den första metoden ställer in animationens övergripande konfiguration, som hur lång tid det tar, fördröjning och dess alternativ. Du definierar sedan en eller flera av den andra metoden(ramarna) inuti animationsstängningen för att ställa in de olika stadierna i animeringen.

den relativa starttiden och den relativa varaktigheten för varje bildruta är ett värde mellan 0 och 1 som uttrycker den procentuella tiden inom animeringens totala varaktighet.

Visa övergångar

Visa övergångar används när du vill lägga till en ny vy i din vyhierarki eller ta bort en vy från vyhierarkin.

API: erna som används för att skapa visningsövergångar är

du använder den första för att introducera en vy i visningshierarkin. Metoden tar liknande parametrar som vi har sett i de andra animeringsmetoderna.

den andra används för att ta en vy från vyhierarkin och och placera en ny vy på sin plats.

exempel

vi ska nu titta på några exempel som använder några av ovanstående API-anrop för att animera vyer i det givna startprojektet.

exempel i

om du kör projektet ser du en tabellvy som visar de exempel vi ska arbeta igenom. Välj exempel I i listan och du bör se en inloggningsskärm för en app med användarnamn och lösenordsfält och inloggningsknapp.

vi vill att dessa ska animeras på skärmen när appen startar.

för att komma igång döljer vi vyerna från syn när vyn först visas. Innan automatisk Layout skulle det ha varit en enkel fråga om att ändra den specifika vyens position i kod, men eftersom vi ställer in automatiska layoutbegränsningar på vyerna i storyboard-filen måste vi ändra begränsningarna i kod, vilket kommer att ändra vyens position.

först måste vi få en hänvisning till de begränsningar som vi kommer att ändra. Öppna storyboard-filen. Leta reda på följande begränsningar i exemplet i-scenen.

öppna Assistentredigeraren och se till att det är ExampleIViewController.swift som visas bredvid storyboard på delad skärm. Dra från begränsningen Center X Alignment-View-Username till klassen ExampleIViewController. Skapa ett uttag med namnet centerAlignUsername. Gör detsamma för Center X Alignment-View-Password och ställ in namnet på centerAlignPassword. Skapa också ett uttag för inloggningsknappen loginbutton och en åtgärd för samma knapp och namnge den Logga in. Se till att du ställer in typen av åtgärd till UIButton. Du bör ha följande i kod.

1
2
3
4
5
6
7

@IBOutlet svag var centerAlignUsername: NSLayoutConstraint!
@iboutlet svag var centerAlignPassword: NSLayoutConstraint!
@IBOutlet svag var loginButton: UIButton!
@IBAction func login (avsändare: UIButton) {
}

i ExampleIViewController.swift Lägg till följande metod som kallas innan vyn presenteras på skärmen.

detta flyttar användarnamn och lösenordsfält bara ur sikte och ställer in alfavärdet på knappen till 0 vilket gör det osynligt.

Lägg till följande metod som kallas rätt när vyn visas.

här använder vi UIView.animateWithDuration () metod som vi såg tidigare. Vi inkluderar UIViewAnimationOptions.CurveEaseOut alternativ som gör animeringen startar snabbt sedan sakta ner i slutet. Du kan experimentera med olika alternativ här. Kommando-klicka på UIViewAnimationOptions för att se alla tillgängliga alternativ.

animeringen varar i 0,5 sekunder och startar omedelbart. Du har frihet under varaktigheten, men du bör inte ställa in ett så stort antal att irritera dina användare när animationer i din app verkar ta för lång tid. Normalt är varaktigheten inställd mellan 0,5 och 0,7 sekunder, men som sagt är det inte i sten och du har frihet att ställa in det som känns rätt för dig.

animationen gör exakt motsatsen till vad vi gjorde i viewWillAppear (). layoutIfNeeded () används för att lägga ut synpunkter omedelbart de ändras. Om du inte inkluderar det ser du inte att de blir animerade på skärmen, istället kommer de bara att visas i sin slutliga position. Kör appen, och du bör se följande.

ovanstående ser mer intressant ut än en statisk presentation, men vyerna blir animerade samtidigt skapar inte den stora effekten. Ändra metoden enligt nedan.

Kör appen och den resulterande animeringen har vyerna animera på skärmen vid olika tidpunkter. Titta på koden kan du se att efter det första animationsblocket ställer vi in en fördröjning på efterföljande.

i inloggningsskärmar, när inloggningen misslyckas, finns det vanligtvis en animering som indikerar för användaren att inloggningen har misslyckats. Detta görs ibland som en skakning av textfälten eller inloggningsknappen och ett meddelande som låter användaren veta att inloggningen har misslyckats. Vi lägger till en sådan effekt på inloggningsknappen med fjädrar. Ändra funktionen login () som visas.

ovanstående ändrar storleken på inloggningsknappen när den trycks in och animerar åtgärden med en fjäderanimering som får knappens bredd att expandera och studsa lite i slutet innan du sätter dig.

leka med dämpningsvärdet. Om du ställer in den till 1, kommer knappen att expandera, utan att studsa i slutet. Du kan också använda samma metod i fälten användarnamn och lösenord. Istället för att få dem att komma på skärmen och bara stanna på plats i slutet, låt dem vara vårliknande och studsa lite innan de slår sig ner.

exempel II

i din app kan du behöva byta ut bakgrundsbilden för en vy automatiskt när någon åtgärd händer. Du kan göra det på ett sätt där en bild omedelbart ersätter en annan på vyn, eller du kan sakta tona in den för att skapa en fin övergång. Vi skapar denna effekt här. Öppna ExampleIIViewController.swift och Lägg till följande.

här skapar vi en bildvy och lägger till den i huvudvyn. Vi kallar sedan imageFadeIn () som skapar en andra vy med en annan bild. Vi lägger till den här vyn ovanför den första bildvyn och ställer in Alfa till 0. I animeringsblocket animerar vi dess alfavärde och gör det synligt. Vi använder sedan en slutförande stängning för att ställa in bildvyns bild till den andra bilden och vi tar bort den andra bildvyn från vyhierarkin eftersom den inte längre behövs. Jag har lagt till en lång fördröjning så att animationen inte händer just nu väljer vi exempel II från tabellvyn. Varaktigheten är också lite lång så vi kan se vad som händer i demo.

följande är effekten.

exempel III

nästa tittar vi på nyckelbildsanimationer. Öppna ExampleIIIViewController.swift och Lägg till följande variabel och funktioner i filen. Jag har kommenterat koden för att förklara varje steg.

i viewDidLoad() anropar funktionen createView (). Lägg till följande längst ner i viewDidLoad ().

1
createView()

när du kör appen och väljer exempel III från tabellvyn bör du se en röd vy med en bildvy längst upp och en knapp i mitten.

vi vill ha utsikten (som jag kommer att hänvisa till som alertView från och med nu) för att krympa i storlek och falla nedåt ur sikte.

när vi skapade knappen lade vi till en lyssnare till den. När knappen trycks, avfärda () kallas. Ändra funktionen som visas.

i ovanstående kod skapar vi ramar som representerar vad vi vill ha för de två stadierna för att animera vyn. smallFrame krymper till halva storleken på alertView, bibehåller mittpunkten och finalFrame har en position längst ner på skärmen, ur sikte.

vi använder en nyckelbildsanimering med två nyckelrutor. Den första sätter alertviews ram till smallFrame och den andra till finalFrame. Resultatet blir att alertView kommer att krympa till hälften av sin storlek och sedan falla ur sikte. Lägg märke till att jag har lagt ett så stort antal under varaktigheten-4 sekunder. Du kan ändra detta, jag ville bara animationen körs i slow-motion för demo. Kör appen och välj exempel III.

animationen är inte riktigt vad vi förväntade oss. Du kan se den röda alertView animera som förväntat, men omfattningen av dess barn ändras inte. Ändra förälderns ram, ändrar inte automatiskt sina barns ramar.

vi använder en funktion som introduceras i iOS 7 som heter UIView snapshots för att fixa animationen. Detta gör att du kan ta en ögonblicksbild av en UIView tillsammans med dess hierarki och göra den till en ny UIView.

i avfärda() lägga till följande rätt innan keyframe animation kod.

1
2
3
4

låt snapshot = alertView.snapshotViewAfterScreenUpdates (false)
snapshot.ram = alertView.ram
visa.addSubview (ögonblicksbild)
alertView.removeFromSuperview()

här skapar vi en ögonblicksbildsvy och lägger till den i huvudvyn. Vi tar sedan bort alertView från view, eftersom ögonblicksbilden kommer att ersätta den.

ersätt nyckelbildsanimationen med följande.

kör programmet och knacka avfärda, vyn(snapshot, verkligen) bör animera som förväntat.

exempel IV

vi har tittat på hur du kan animera enkla vyer. I det här exemplet tittar vi på hur du kan animera en tabellvy.

om du väljer exempel IV från tabellvyn hittar du en annan tabellvy med en lista med objekt i den. När tabellvyn presenteras är listobjekten redan placerade på bordet. Vi vill animera dem på vyn för att skapa en mer intressant effekt.

Öppna Exempelivviewcontroller.swift och Lägg till följande metoder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Åsidosätt func viewWillAppear (animerad: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
låt celler = tableView.visibleCells ()
låt tableHeight: CGFloat = tableView.bunden.storlek.höjd
för i i celler {
låt cell: UITableViewCell = i som UITableViewCell
cell.transformera = CGAffineTransformMakeTranslation (0, tableHeight)
}
var index = 0
för A i celler {
låt cell: UITableViewCell = A som UITableViewCell
UIView.animateWithDuration(1.5, fördröjning: 0.05 * Dubbel (index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, alternativ: noll, animationer: {
cell.transformera = CGAffineTransformMakeTranslation(0, 0);
}, slutförande: noll)
index += 1
}
}

här, när vyn visas, kallas funktionen animateTable (). Vi laddar om tabellvisningsdata och slingrar genom cellerna som för närvarande är synliga på skärmen och flyttar var och en av dem längst ner på skärmen. Vi itererar sedan över alla celler som vi flyttade till botten av skärmen och animerar dem tillbaka till position med en fjäderanimation.

Kör appen och du bör se följande.

slutsats

vi har tittat på olika API: er som du kan använda för att lägga till animationer i appens vyer. Detta är inte en uttömmande guide om animering i iOS men genom att använda de enkla API: erna vi har tittat på kan du skapa olika animationer i dina appar. För att dyka längre in i iOS-animationer kan du titta på UIKit-dynamik, lageranimationer, visa kontrollövergångar och till och med rörelseeffekter. Du kan också titta på tredjepartsbibliotek som Facebook Pop och jnwspringanimation framework som kan hjälpa dig att bygga invecklade animationer lättare.

du kan ladda ner det färdiga projektet här.

Lämna ett svar

Din e-postadress kommer inte publiceras.