Etter utgivelsen av iOS 7 (og iOS 8 også) ble animasjon og bevegelseseffekter sentrale for utformingen av apper fra Både Apple og 3.parts utviklere. iOS 7 introduserte en flat, minimal design til apps som uunngåelig resulterte i at noen apps har et lignende BRUKERGRENSESNITT. For å skille appene sine fra andre apper, brukte utviklere slike funksjoner som animasjoner og bevegelseseffekter for å få appene til å skille seg ut.

ikke bare brukes animasjoner For å skille appen fra hverandre, de kan forbedre den generelle brukeropplevelsen av applikasjonen din. For gode eksempler på hvordan animasjoner brukes til å forbedre UX, bør Du se på Hvordan Apple bruker animasjoner i appene sine. Når du for Eksempel velger et bilde fra en samling i Bilder-appen, utvides bildet fra det valgte bildet, og når det lukkes, krymper det tilbake til det valgte bildet. Dette legger til navigasjonen av appen ved at den lar deg vite nøyaktig hvor du var, hvis du surfer på mange bilder.

Facebook Papir benytter også animasjoner vakkert å legge til den generelle brukeropplevelsen av programmet. Du velger en artikkel å lese ved å bla den opp. Denne handlingen, det faktum at artikkelen utvides ut fra miniatyrversjonen, antyder at ved å gjøre det motsatte, dvs. vende artikkelen nedover, ville krympe den tilbake til miniatyrbildet. Her brukes animasjon til å formidle hvordan appen fungerer, og til og med en første gangs bruker av appen vil snart kunne gjøre antagelser om bruken og finne ut navigasjonen uten å trenge en opplæring.

ikke bare legger animasjoner til brukeropplevelsen av appen, men de kan være det som gleder og imponerer brukerne som garanterer gjentatt bruk i stedet for å avinstallere appen for en bedre fra App Store.

det er mange måter å inkludere animasjoner i appene dine, noen av dem er Ved bruk Av Uikit-Dynamikk, laganimasjoner, vis kontrolleroverganger eller ved å bruke et tredjepartsbibliotek som Facebook Pop library eller JNWSpringAnimation framework.

i denne opplæringen skal vi se på enkle visningsanimasjoner. Du kan laste ned starter-prosjektet som er Et Enkeltvisningsprogram med en tabellvisning som viser eksemplene som presenteres i opplæringen. Jeg skal bruke dette når vi kommer til eksempler delen av opplæringen, i stedet for å starte fra scratch.

opplæringen starter med et sammendrag Av Apier som brukes til å animere visninger, og slutter med noen eksempler som viser bruken av Noen Av Apiene i en app.

Grunnleggende Visningsanimasjoner

Å Lage animasjoner på visningene dine handler om å endre egenskaper på dem og la UIKit animere dem automatisk. Egenskapene vi endrer er de som er merket Animatable.

følgende liste viser animerbare egenskaper.

  • senter
  • alfa
  • ramme
  • grenser
  • transform
  • bakgrunnfarge
  • innholdstretch

du vil finne det alle animasjoner innebærer en endring av en eller flere av de ovennevnte egenskapene.

For enkle visningsanimasjoner gir UIKit Følgende Apier som kan brukes til å animere visninger på skjermen.

Den første tar to parametere-en verdi for varigheten i sekunder av animasjonen og en lukning der du angir egenskapene du vil ha endret. UIKit vil ta den opprinnelige tilstanden til visningen og skape en jevn overgang fra den tilstanden til sluttstaten i henhold til det du angav i animasjonens nedleggelse.

de to Andre Apiene ligner på de første, men de tar ekstra parametere som legger til mer konfigurasjon i animasjonen. Den andre tar en fullføringslukking som du kan bruke til å enten angi en annen animasjon du vil ha gjort etter den første, eller du kan gjøre litt opprydding av BRUKERGRENSESNITTET, for eksempel fjerne en visning fra visningshierarkiet når en annen visning er animert på scenen.

den tredje API tar ytterligere to parametere-forsinkelsen, som er på tide å vente før animasjonen starter og alternativer, en uiviewanimationoptions konstant, som angir hvordan du vil utføre animasjonene. Følgende viser alternativene som er tilgjengelige.

Våranimasjoner

våranimasjoner prøver å modellere oppførselen til en ekte vår, ved at når en visning flyttes fra ett punkt til et annet, vil den hoppe/svinge mot slutten før den settes ned til posisjon.

Nedenfor er metodeblokken vi bruker til våranimasjoner.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, alternativer:, animasjoner:, ferdigstillelse:)

ovennevnte er lik metodene vi så på tidligere bortsett fra to nye parametere-usingSpringWithDamping og initialSpringVelocity. Demping er en verdi fra 0 til 1 som bestemmer hvor mye visningen spretter mot slutten av animasjonen. Jo nærmere 1 verdien er, jo mindre bouncy blir det. initialSpringVelocity som navnet sier, bestemmer den innledende hastigheten til animasjonen. Dette bestemmer hvor sterk animasjonen starter. Hvis du vil at den skal starte kraftig, sett deretter en større verdi, hvis du vil ha en jevn animasjon, kan du sette verdien til 0.

Keyframe-Animasjoner

Keyframe-animasjoner gjør Det mulig å angi ulike stadier av en animasjon. Du kan gruppere forskjellige animasjoner sammen som deler noen vanlige egenskaper, men fortsatt kunne kontrollere dem separat.

I Stedet For en animasjon som bare beveger seg langs en bane, vil UIKit utføre de forskjellige stadiene av animasjonen.

Keyframe animasjon Apier er som følger.

de to ovennevnte metodene brukes sammen, den andre blir nestet i den første animasjonens lukking.

den første metoden angir den generelle konfigurasjonen av animasjonen, som hvor lang tid det tar, forsinkelse og dens alternativer. Deretter definerer du en eller flere av den andre metoden(rammene) inne i animasjonsavslutningen for å angi de forskjellige stadiene av animasjonen.

det relative starttidspunktet og den relative varigheten til hvert bilde er en verdi mellom 0 og 1 som uttrykker den prosentvise tiden innenfor animasjonens totale varighet.

Vis Overganger

Vis overganger brukes når du vil legge til en ny visning i visningshierarkiet eller fjerne en visning fra visningshierarkiet.

Api-Ene som brukes til å opprette visningsoverganger, er

du bruker den første til å introdusere en visning i visningshierarkiet. Metoden tar lignende parametere som vi har sett i de andre animasjonsmetodene.

den andre brukes til å ta en visning fra visningshierarkiet og plassere en ny visning i stedet.

Eksempler

Vi skal nå se på noen eksempler som bruker NOEN AV API-kallene ovenfor for å animere visninger i det gitte startprosjektet.

Eksempel i

hvis du kjører prosjektet, ser du en tabellvisning som viser eksemplene vi skal jobbe gjennom. Velg Eksempel I i listen, og du bør se En Påloggingsskjerm for en app med brukernavn og passordfeltene og påloggingsknappen.

vi vil at disse skal animeres på skjermen når appen starter.

for å komme i gang skjuler vi visningene fra synet når visningen først vises. Før Auto Layout, ville dette ha vært et enkelt spørsmål om å endre den spesifikke visningens posisjon i kode, men siden vi setter automatisk layoutbegrensninger på visningene i storyboard-filen, må vi endre begrensningene i kode, noe som vil endre visningens posisjon.

Først må Vi få en referanse til begrensningene som vi vil endre. Åpne storyboard-filen. Finn følgende begrensninger i Eksempel I-Scenen.

Åpne Assistentredigering, og sørg for At Det Er ExampleIViewController.swift som vises ved siden av storyboardet på delt skjerm. Dra fra Midten x Justering – Visning – Brukernavn begrensning Til ExampleIViewController klassen. Opprett et uttak som heter centerAlignUsername. Gjør Det samme For Center X Alignment-View-Passord og sett navnet til centerAlignPassword. Opprett også et uttak for innloggingsknappen loginButton og en handling for samme knapp og navn det logg inn. Pass på at du setter typen av handlingen Til UIButton. Du bør ha følgende i koden.

1
2
3
4
5
6
7

@IBOutlet svak var centerAlignUsername: NSLayoutConstraint!
@ IBOutlet svak var centerAlignPassword: NSLayoutConstraint!
@ IBOutlet svak var loginButton: UIButton!
@IBAction func login(sender: UIButton) {
}

I ExampleIViewController.swift legge til følgende metode som kalles før visningen presenteres på skjermen.

dette flytter brukernavn og passord felt bare ut av syne og setter alfa verdien av knappen til 0 som gjør det usynlig.

Legg til følgende metode som kalles høyre når visningen vises.

her bruker Vi UIView.animateWithDuration () metode som vi så tidligere. Vi inkluderer UIViewAnimationOptions.CurveEaseOut alternativ som gjør animasjonen starte fort så tregere på slutten. Du kan eksperimentere med forskjellige alternativer her. Kommando-klikk På UIViewAnimationOptions for å se alle tilgjengelige alternativer.

animasjonen varer i 0,5 sekunder og starter umiddelbart. Du har frihet over varigheten, men du bør ikke sette et så stort antall som å irritere brukerne når animasjoner på appen din ser ut til å ta for lang tid. Normalt er varigheten satt mellom 0,5 og 0,7 sekunder, men som sagt er dette ikke satt i stein, og du har frihet til å sette den til det som føles riktig for deg.

animasjonen gjør det motsatte av det vi gjorde i viewWillAppear (). layoutIfNeeded () brukes til a legge ut visningene umiddelbart de endres. Hvis du ikke inkluderer det, vil du ikke se dem bli animert på skjermen, i stedet vil de bare bli vist i sin endelige posisjon. Kjør appen, og du bør se følgende.

ovennevnte ser mer interessant ut enn en statisk presentasjon, men visningene blir animert samtidig, skaper ikke den store effekten. Endre metoden som vist nedenfor.

Kjør appen, og den resulterende animasjonen har visningene som animerer på skjermen til forskjellige tider. Når du ser på koden, kan du se at etter den første animasjonsblokken setter vi en forsinkelse på etterfølgende.

i innloggingsskjermbilder, når innlogging mislykkes, er det vanligvis en animasjon som indikerer at påloggingen har mislyktes. Dette gjøres noen ganger som en riste av tekstfeltene eller påloggingsknappen, og en melding som lar brukeren vite at innlogging har mislyktes. Vi legger til en slik effekt på påloggingsknappen ved hjelp av fjærer. Endre login () – funksjonen som vist.

ovennevnte endrer størrelsen på påloggingsknappen når den trykkes og animerer handlingen med en fjæranimasjon som vil føre til at knappens bredde utvides og spretter litt på slutten før den settes opp.

Lek litt med dempingsverdien. Hvis du setter den til 1, vil knappen utvides, uten å hoppe på slutten. Du kan også bruke samme metode i feltene brukernavn og passord. I stedet for å få dem til å komme på skjermen og bare stoppe på plass på slutten, må de være vårlignende og sprette litt før de legger seg ned.

Eksempel II

i appen må du kanskje erstatte bakgrunnsbildet i en visning automatisk når noe skjer. Du kan gjøre det på en måte der et bilde umiddelbart erstatter et annet på visningen, eller du kan sakte falme det inn for å skape en fin overgang. Vi skaper denne effekten her. Åpne ExampleIIViewController.swift og legge til følgende.

her lager vi en bildevisning og legger den til hovedvisningen. Vi kaller da imageFadeIn () som skaper en annen visning med et annet bilde. Vi legger til denne visningen over den første bildevisningen og setter alfa til 0. I animasjonsblokken animerer vi alfa-verdien, slik at den blir synlig. Vi bruker deretter en avsluttende lukking for å sette bildevisningens bilde til det andre bildet, og vi fjerner den andre bildevisningen fra visningshierarkiet siden det ikke lenger er nødvendig. Jeg har lagt til en lang forsinkelse slik at animasjonen ikke skjer akkurat for øyeblikket vi velger Eksempel II fra tabellvisningen. Varigheten er også litt lang, så vi kan se hva som skjer i demoen.

følgende er effekten.

Eksempel III

Neste ser Vi på keyframe animasjoner. Åpne ExampleIIIViewController.swift og legge til følgende variabel og funksjoner i filen. Jeg har kommentert koden for å forklare hvert trinn.

i viewDidLoad() kaller du createView () – funksjonen. Legg til følgende nederst i viewDidLoad().

1
createView()

når du kjører appen og velger Eksempel III fra tabellvisningen, bør du se en rød visning med en bildevisning øverst og en knapp i midten.

Vi vil ha visningen (som jeg vil referere til som alertView fra nå av) for å krympe i størrelse og falle nedover ute av syne.

da vi opprettet knappen, la vi til en lytter til den. Når knappen er tappet, kalles disealert (). Endre funksjonen som vist.

i koden ovenfor lager vi rammer som representerer det vi ønsker for de to stadiene av å animere visningen. smallFrame krymper til halvparten av alertView, opprettholder midtpunktet og finalFrame har en posisjon nederst på skjermen, ute av syne.

Vi bruker En Keyframe-animasjon med to keyframes. Den første setter alertviews ramme til smallFrame og den andre til finalFrame. Resultatet blir at alertView vil krympe til halvparten av størrelsen og deretter falle ut av syne. Legg merke til at jeg har satt et så stort antall for varigheten-4 sekunder. Du kan endre dette, jeg ville bare animasjonen kjører i slow-motion for demoen. Kjør appen OG velg Eksempel III.

animasjonen er ikke helt hva vi forventet. Du kan se den røde alertView animere som forventet, men omfanget av sine barn endres ikke. Endre foreldrenes ramme, endrer ikke automatisk barnas rammer.

Vi bruker en funksjon introdusert i iOS 7 kalt UIView snapshots for å fikse animasjonen. Dette gjør at du kan ta et øyeblikksbilde av En UIView sammen med sitt hierarki og gjøre det til en ny UIView.

legg til følgende rett før Keyframe-animasjonskoden i dismalert ().

1
2
3
4

la snapshot = alertView.snapshotViewAfterScreenUpdates (false)
stillbilde.ramme = alertView.ramme
visning.addSubview (øyeblikksbilde)
alertView.removeFromSuperview()

Her lager vi en stillbildevisning og legger den til hovedvisningen. Vi fjerner deretter alertView fra visning, da stillbildet erstatter det.

Erstatt Keyframe-animasjonen med følgende.

Kjør programmet og ved å Trykke På Avvis, bør visningen (øyeblikksbilde, virkelig) animere som forventet.

Eksempel IV

Vi har sett på hvordan du kan animere enkle visninger. I dette eksemplet ser vi på hvordan du kan animere en tabellvisning.

hvis Du velger Eksempel IV fra tabellvisningen, finner du en annen tabellvisning med en liste over elementer i den. Når tabellvisningen presenteres, er listeelementene allerede plassert på tabellen. Vi ønsker å animere dem på visningen for å skape en mer interessant effekt.

Åpne ExampleIVViewController.swift og legge til 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

overstyr func viewWillAppear (animert: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
la celler = tableView.visibleCells ()
la tableHeight: CGFloat = tableView.bundet.størrelse.høyde
for jeg i celler {
la celle: UITableViewCell = jeg Som UITableViewCell
celle.transform = CGAffineTransformMakeTranslation (0, tableHeight)
}
var index = 0
for a i celler {
la celle: UITableViewCell = a Som UITableViewCell
UIView.animateWithDuration(1.5, forsinkelse: 0.05 * Dobbel (indeks), brukspringwithdamping: 0.8, initialSpringVelocity: 0, alternativer: null, animasjoner: {
celle .transform = CGAffineTransformMakeTranslation(0, 0);
}, fullføring: null)
indeks += 1
}
}

Her, når visningen vises, kalles animateTable () – funksjonen. Vi laster inn tabellvisningsdataene og går gjennom cellene som er synlige på skjermen, og flytter hver av dem til bunnen av skjermen. Vi itererer over alle cellene som vi flyttet til bunnen av skjermen og animerer dem tilbake til posisjon med en våranimasjon.

Kjør appen, og du bør se følgende.

Konklusjon

Vi har sett på Ulike Apier som du kan bruke til å legge til animasjoner i appens visninger. Dette er ikke en uttømmende guide til animasjon i iOS, men ved å bruke de enkle Apiene vi har sett på, kan du lage forskjellige animasjoner i appene dine. For å dykke videre inn i iOS-animasjoner, kan du se På Uikit-Dynamikk, laganimasjoner, se kontrolleroverganger og til og med bevegelseseffekter. Du kan også se på tredjepartsbiblioteker Som Facebook Pop og JNWSpringAnimation framework som kan hjelpe deg med å bygge intrikate animasjoner lettere.

du kan laste ned det ferdige prosjektet her.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.