efter udgivelsen af iOS 7 (og iOS 8 også) blev animations-og bevægelseseffekter centrale for designet af apps fra både Apple-og 3.parts udviklere. iOS 7 introducerede et fladt, minimalt design til apps, hvilket uundgåeligt resulterede i, at nogle apps havde en lignende brugergrænseflade. For at skelne deres apps fra andre apps anvendte udviklere sådanne funktioner som animationer og bevægelseseffekter for at få deres apps til at skille sig ud.

animationer bruges ikke kun til at adskille din app, de kan forbedre den samlede brugeroplevelse af din applikation. For gode eksempler på, hvordan animationer bruges til at forbedre brugen, skal du se på, hvordan Apple bruger animationer i deres apps. For eksempel i appen Fotos, når du vælger et foto fra en samling, udvides billedet fra det valgte, og når det lukkes, krymper det tilbage til det valgte foto. Dette tilføjer til navigation af app i, at det lader dig vide præcis, hvor du var, hvis du gennemser mange billeder.

Facebook papir anvender også animationer Smukt at tilføje til den samlede brugeroplevelse af app. Du vælger en artikel, der skal læses ved at vende den op. Denne handling, det faktum, at artiklen udvides fra sin miniatureversion, antyder, at ved at gøre det modsatte, dvs.vende artiklen nedad, ville det krympe den tilbage til dens miniaturebillede. Her, animation bruges til at formidle, hvordan appen fungerer, og selv en første gangs bruger af appen ville snart være i stand til at antage antagelser om dens anvendelse og finde ud af dens navigation uden at have brug for en tutorial.

animationer tilføjer ikke kun brugeroplevelsen af appen, men de kan være det, der glæder og imponerer dine brugere, der garanterer gentagen brug i stedet for at afinstallere appen til en bedre fra App Store.

der er mange måder at inkludere animationer i dine apps, nogle af dem er ved hjælp af UIKit Dynamics, layer animationer, se controller overgange eller ved hjælp af en tredjepart bibliotek som Facebook Pop bibliotek eller ramme.

i denne tutorial skal vi se på enkle visningsanimationer. Du kan hente startprojektet, som er et enkelt visningsprogram med en tabelvisning, der viser eksemplerne præsenteret i tutorial tutorial. Jeg vil bruge dette, når vi kommer til eksemplerne del af tutorial, i stedet for at starte fra bunden.

vejledningen starter med en oversigt over API ‘er, der bruges til at animere visninger, og slutter med nogle eksempler, der viser brugen af nogle af API’ erne i en app.

grundlæggende Visningsanimationer

oprettelse af animationer på dine visninger er et spørgsmål om at ændre egenskaber på dem og lade UIKit animere dem automatisk. De egenskaber, vi ændrer, er dem, der er markeret Animatable.

følgende liste viser de animerbare egenskaber.

  • center
  • alpha
  • ramme
  • bounds
  • transform
  • baggrundfarve
  • indholdstrækning

du finder at alle animationer indebærer en ændring af en eller flere af de ovennævnte egenskaber.

for simple visning animationer, UIKit giver følgende API ‘ er, der kan bruges til at animere visninger på skærmen.

den første tager to parametre – en værdi for varigheden i sekunder af animationen og en lukning, hvor du angiver de egenskaber, du vil ændre. UIKit vil tage den oprindelige tilstand af visningen og skabe en jævn overgang fra denne tilstand til sluttilstanden i henhold til det, du har angivet i animations lukningen.

de to andre API ‘ er ligner den første, men de tager ekstra parametre, der tilføjer mere konfiguration til animationen. Den anden tager en afslutning lukning, som du kan bruge til enten at angive en anden animation, som du ønsker gjort efter den første, eller du kan gøre nogle oprydning af UI, for eksempel, fjerne en visning fra visningen hierarki, når en anden visning er animeret på scenen.

den tredje API tager yderligere to parametre – forsinkelsen, som er tiden til at vente, før animationen starter og indstillinger, en Uivievimationoptions konstant, som angiver, hvordan du vil udføre animationerne. Følgende viser de tilgængelige indstillinger.

Forårsanimationer

Forårsanimationer forsøger at modellere opførslen af en virkelig forår, idet den, når en visning flyttes fra et punkt til et andet, vil hoppe/svinge mod slutningen, før den sætter sig ned til position.

nedenfor er den metodeblok, vi bruger til forårsanimationer.

  • Uivvisning.animatemedvarighed (_:, forsinkelse:, usingspringmeddamping:, initialSpringVelocity:, muligheder:, animationer:, færdiggørelse:)

ovenstående svarer til de metoder, vi kiggede på tidligere bortset fra to nye parametre – ved hjælp afspringmeddamping og initialSpringVelocity. Dæmpning er en værdi fra 0 til 1, der bestemmer, hvor meget visningen hopper mod slutningen af animationen. Jo tættere på 1 værdien er, jo mindre hoppende bliver den. initialSpringVelocity som navnet siger, bestemmer animationens indledende hastighed. Dette bestemmer, hvor stærk animationen starter. Hvis du vil have det til at starte kraftigt, skal du indstille en større værdi, hvis du vil have en glat animation, kan du indstille værdien til 0.

Keyframe animationer

Keyframe animationer giver dig mulighed for at indstille forskellige stadier af en animation. Du kan gruppere forskellige animationer sammen, der deler nogle fælles egenskaber, men stadig være i stand til at kontrollere dem separat.

i stedet for en animation, der bare bevæger sig langs en sti, vil UIKit udføre de forskellige stadier af animationen.

Keyframe animation API ‘ erne er som følger.

ovenstående to metoder bruges sammen, den anden bliver indlejret i den første animationer lukning.

den første metode indstiller den samlede konfiguration af animationen, som Hvor lang tid det tager, forsinkelse og dens muligheder. Du definerer derefter en eller flere af den anden metode(rammerne) inde i animations lukningen for at indstille de forskellige stadier af animationen.

den relative starttid og den relative varighed af hver ramme er en værdi mellem 0 og 1, der udtrykker den procentvise tid inden for animationens samlede varighed.

Vis overgange

Vis overgange bruges, når du vil føje en ny visning til dit visningshierarki eller fjerne en visning fra visningshierarkiet.

de API ‘ er, der bruges til at oprette visningsovergange, er

du bruger den første til at introducere en visning til visningshierarkiet. Metoden tager lignende parametre, som vi har set i de andre animationsmetoder.

den anden bruges til at tage en visning fra visningshierarkiet og placere en ny visning på sin plads.

eksempler

vi ser nu på et par eksempler, der bruger nogle af ovenstående API-opkald til at animere visninger i det givne startprojekt.

eksempel i

hvis du kører projektet, får du vist en tabelvisning, der viser de eksempler, vi gennemgår. Vælg eksempel I på listen, og du skal se en loginskærm for en app med felterne Brugernavn og adgangskode og login-knappen.

vi ønsker, at disse skal animeres på skærmen, når Appen starter.

for at komme i gang skjuler vi visningerne fra syne, når visningen først vises. Før automatisk Layout ville dette have været et simpelt spørgsmål om at ændre den specifikke visnings position i kode, men da vi indstiller begrænsninger for automatisk layout på visningerne i storyboard-filen, bliver vi nødt til at ændre begrænsningerne i kode, hvilket vil ændre visningens position.

først skal vi få en henvisning til de begrænsninger, som vi vil ændre. Åbn storyboard-filen. Find følgende begrænsninger i eksempel i-scenen.

Åbn Assistenteditoren, og sørg for, at det er Eksempeletcontroller.Hurtig, der vises ved siden af storyboardet på den delte skærm. Træk fra centerets begrænsning for justering – Vis-brugernavn til klassen Eksempelvisningskontroller. Opret en stikkontakt med navnet centerAlignUsername. Gør det samme for Centerjusterings – Vis – adgangskoden, og indstil dens navn til centeralign-adgangskode. Opret også en stikkontakt til login-knappen ved navn loginButton og en handling for den samme knap og navngiv den login. Sørg for at indstille typen af handlingen til UIButton. Du skal have følgende i kode.

1
2
3
4
5
6
7

@IBOutlet svag var centerAlignUsername: NSLayoutConstraint!
@IBOutlet svag var centeralign adgangskode: NSLayoutConstraint!
@IBOutlet svag var loginButton: UIButton!
@IBAction func login (afsender: UIButton) {
}

i Eksempeletcontroller.hurtig tilføje følgende metode, som kaldes før visningen præsenteres på skærmen.

dette flytter felterne Brugernavn og adgangskode lige ud af syne og indstiller alfa-værdien på knappen til 0, hvilket gør den usynlig.

tilføj følgende metode, der kaldes højre, når visningen vises.

her bruger vi UIV-visningen.animatemedvarighed () metode, som vi så tidligere. Vi inkluderer Uivieanimationoptioner.CurveEaseOut mulighed, som gør animationen starter hurtigt derefter bremse i slutningen. Du kan eksperimentere med forskellige muligheder her. Kommando-klik på muligheder for at se alle de tilgængelige muligheder.

animationen varer i 0,5 sekunder og starter med det samme. Du har frihed over varigheden, men du bør ikke indstille et så stort antal, at det irriterer dine brugere, når animationer på din app ser ud til at tage for lang tid. Normalt er varigheden indstillet mellem 0,5 og 0,7 sekunder, men som sagt er dette ikke sat i sten, og du har frihed til at indstille det til det, der føles rigtigt for dig.

animationen gør det nøjagtige modsatte af, hvad vi gjorde i visningenvises(). layoutIfNeeded () bruges til at lægge de synspunkter straks de ændres. Hvis du ikke inkluderer det, vil du ikke se dem blive animeret på skærmen, i stedet vil de bare blive vist i deres endelige position. Kør appen, og du skal se følgende.

ovenstående ser mere interessant ud end en statisk præsentation, men de synspunkter, der bliver animeret på samme tid, skaber ikke den store effekt. Ændre metoden som vist nedenfor.

Kør appen, og den resulterende animation har visningerne, der animerer på skærmen på forskellige tidspunkter. Når man ser på koden, kan man se, at vi efter den første animationsblok sætter en forsinkelse på efterfølgende.

i login-skærme, når login mislykkes, er der normalt en animation, der indikerer for brugeren, at login er mislykket. Dette gøres undertiden som en rystelse af tekstfelterne eller login-knappen og en meddelelse, der lader brugeren vide, at login er mislykket. Vi tilføjer en sådan effekt på login-knappen ved hjælp af fjedre. Rediger login () – funktionen som vist.

ovenstående ændrer størrelsen på login-knappen, når den trykkes, og animerer handlingen med en fjederanimation, som får knappens bredde til at udvide sig og hoppe lidt i slutningen, før den afregnes.

spil rundt med dæmpningsværdien. Hvis du indstiller den til 1, udvides knappen uden at hoppe i slutningen. Du kan også bruge den samme metode i felterne Brugernavn og adgangskode. I stedet for at få dem til at komme på skærmen og bare stoppe på plads i slutningen, skal du få dem til at være fjederlignende og hoppe lidt, før du slår dig ned.

eksempel II

i din app skal du muligvis udskifte baggrundsbilledet for en visning automatisk, når der sker en handling. Du kan gøre det på en måde, hvor et billede straks erstatter et andet på visningen, eller du kan langsomt falme det ind for at skabe en god overgang. Vi skaber denne effekt her. Åben Eksempelcontroller.hurtig og tilføj følgende.

Her opretter vi en billedvisning og tilføjer den til hovedvisningen. Vi kalder derefter imageFadeIn (), som skaber en anden visning med et andet billede. Vi tilføjer Denne visning over den første billedvisning og indstiller dens alfa til 0. I animationsblokken animerer vi dens alfa-værdi, hvilket gør den synlig. Vi bruger derefter en færdiggørelseslukning til at indstille billedvisningens billede til det andet billede, og vi fjerner den anden billedvisning fra visningshierarkiet, da det ikke længere er nødvendigt. Jeg har tilføjet en lang forsinkelse, så animationen ikke sker lige i øjeblikket, vi vælger eksempel II fra tabelvisningen. Varigheden er også lidt lang, så vi kan se, hvad der foregår i demoen.

følgende er effekten.

eksempel III

næste vil vi se på keyframe animationer. Åben Eksempelcontroller.hurtig og tilføj følgende variabel og funktioner til filen. Jeg har kommenteret koden for at forklare hvert trin.

ring til funktionen Opret visning (). Tilføj følgende til bunden af visningendidload().

1
Opret visning()

når du kører appen og vælger eksempel III fra tabelvisningen, skal du se en rød visning med en billedvisning øverst og en knap i midten.

vi vil have visningen (som jeg vil henvise til som alertvisningen fra nu af) for at krympe i størrelse og falde nedad ude af syne.

da vi oprettede knappen, tilføjede vi en lytter til den. Når der tappes på knappen, kaldes afskedigelsert (). Ændre funktionen som vist.

i ovenstående kode opretter vi rammer, der repræsenterer det, vi ønsker for de to faser af animering af visningen. smallFrame krymper til halvdelen af størrelsen af alertvisning, vedligeholdelse af midtpunktet og finalFrame har en position nederst på skærmen, ude af syne.

vi bruger en Keyframe-animation med to keyframes. Den første sætter alertvisnings ramme til smallFrame og den anden til finalFrame. Resultatet bliver, at alertvisningen krymper til halvdelen af dens størrelse og derefter falder ud af syne. Bemærk, at jeg har lagt et så stort antal i varigheden – 4 sekunder. Du kan ændre dette, Jeg ville bare animationen kører i langsom bevægelse til demoen. Kør appen og vælg eksempel III.

animationen er ikke helt, hvad vi forventede. Du kan se den røde alertvisning animere som forventet, men omfanget af dets børn ændres ikke. Ændring af forældrenes ramme ændrer ikke automatisk sine børns rammer.

vi bruger en funktion introduceret i iOS 7 kaldet snapshots til at rette animationen. Dette giver dig mulighed for at tage et øjebliksbillede af en Uivvisning sammen med dens hierarki og gøre det til en ny Uivvisning.

i afskedigelsen() tilføj følgende lige før Keyframe-animationskoden.

1
2
3
4

lad snapshot = alertvisning.snapshotvisning skærmopdateringer (falsk)
snapshot.ramme = alertvisning.ramme
udsigt.tilføjundervisning (snapshot)
alertvisning.fjernfraoversigt()

Her opretter vi en snapshot-visning og føjer den til hovedvisningen. Vi fjerner derefter alertvisningen fra visningen, da snapshotet erstatter det.

Udskift Keyframe-animationen med følgende.

kør applikationen, og ved at trykke på Afvis, skal visningen(snapshot, virkelig) animere som forventet.

eksempel IV

vi har set på, hvordan du kan animere enkle visninger. I dette eksempel vil vi se på, hvordan du kan animere en tabelvisning.

hvis du vælger eksempel IV fra tabelvisningen, finder du en anden tabelvisning med en liste over elementer i den. Når tabelvisningen vises, er listeelementerne allerede placeret på bordet. Vi ønsker at animere dem til udsigten for at skabe en mere interessant effekt.

Åben Eksempelivvisevisecontroller.hurtig og tilføj følgende 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

Tilsidesæt func visningvil dukke op (animeret: Bool) {
animateTable()
}
func animateTable () {
tablevisning.reloadData()
lad celler = tabelvisning.visibleCells ()
lad bordhøjde: CGFloat = bordvisning.bundet.størrelse.højde
for jeg i celler {
lad celle: Uitableviscell = jeg som Uitableviscell
celle.transform = CGAffineTransformMakeTranslation (0, bordhøjde)
}
var-indeks = 0
for a i celler {
lad celle: Uitablevisningscelle = A som Uitablevisningscelle
Uivvisning.animatmedvarighed(1,5, forsinkelse: 0,05 * Dobbelt (indeks), brugspringmeddamping: 0,8, initialSpringVelocity: 0, muligheder: nul, animationer: {
celle.transform = CGAffineTransformMakeTranslation(0, 0);
}, afslutning: nul)
indeks += 1
}
}

her, når visningen vises, kaldes funktionen animateTable (). Vi genindlæser tabelvisningsdataene og løber gennem de celler, der i øjeblikket er synlige på skærmen, og flytter hver af dem til bunden af skærmen. Vi gentager derefter over alle de celler, vi flyttede til bunden af skærmen og animerer dem tilbage til position med en fjederanimation.

Kør appen, og du skal se følgende.

konklusion

vi har set på forskellige API ‘ er, som du kan bruge til at tilføje animationer til din apps visninger. Dette er ikke en udtømmende guide til animation i iOS, men ved at bruge de enkle API ‘ er, vi har set på, kan du oprette forskellige animationer i dine apps. For at dykke længere ind i iOS-animationer kan du se på UIKit-dynamik, laganimationer, se controller-overgange og endda bevægelseseffekter. Du kan også se på tredjeparts biblioteker som Facebook Pop og ramme, som kan hjælpe dig med at opbygge indviklede animationer lettere.

du kan hente det færdige projekt her.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.