Graner opp iOS-appene dine med enkle animasjoner: Del 1

Ingenting sier "klasse" som en app som har stor visuell appell. Gode ​​kunstverk er selvfølgelig veldig viktig, men å legge til selv de enkleste animasjonene kan gi appen din den ekstra dosen "wow." Det beste av alt er at det er veldig enkelt å oppnå. I del 1 skal vi bygge et prosjekt for å lære en enkel teknikk som du kan bruke for å gi appen din et mer polert utseende og preg ved å vise hvordan du kan visne inn og ut. I del 2 bruker vi bevegelse for å gjenskape en vanlig iPhone-visuell effekt.

Nytt prosjekt

Åpne Xcode, og velg Ny fra Fil- menyen og deretter Ny prosjekt. Et nytt arbeidsområdevindu vises, og du vil bli presentert med flere applikasjonsmaler du kan velge mellom. På applikasjonen til venstre velger du Program fra iOS- delen. Velg program for enkeltvisning og klikk på Neste- knappen. ( Figur A )

Figur A

I neste rute angir du Animasjoner for produktnavnet og com.myappcompany som Firmainformator . (Du må gjerne bytte ut ditt eget produktnavn og firmanavn). La klasseprefikset være som den er. Det skal være blankt - XYZ er bare et hint til et sted. Forsikre deg om at Bruk automatisk referansetelling er merket og fjern merket for de andre. Sett Device Family til iPhone, og klikk Neste. (Figur B)

Figur B

En ny rute vises der du spør hvor du vil lagre prosjektet. XCode oppretter en Animasjons- prosjektmappe i katalogen du velger.

Når prosjektet er opprettet, vil Xcode åpne et arbeidsvindu med det nye prosjektet.

Sette opp brukergrensesnittet

I ruten Filer og grupper klikker du på ViewController.xib. Når det åpnes i Interface Builder, velger du Vis-objektet, klikker på Attributterinspektøren og endrer deretter visningens bakgrunnsfarge til en farge du velger.

Gå deretter til Objektbiblioteket som ligger på nedre høyre side av arbeidsområdet og drar en UIL-etikett til utsikten. Dra håndtakene i størrelse for å gjøre det omtrent to tredjedeler av bredden på visningen, og endre både bakgrunn og tekstfarge. Figur C oppsummerer situasjonen så langt.

Figur C

Deretter klikker du på Assistant Editor øverst til høyre i Xcode-grensesnittet. ( Figur D )

Figur D

Assistent Editor vil vise ViewController.h i en tilstøtende rute som vist i figur E. Klikk på etiketten for å velge den, trykk deretter kontrolltasten og dra fra etiketten til rett under ordet "@ interface" i ViewController.h. Når du slipper fingeren fra musen, vises tilkoblingsdialogen. Skriv inn "myLabel" i feltet Navn og trykk Enter.

Du har nå opprettet et utløp som heter myLabel og koblet det til UIL-etiketten i xib-filen. For mer informasjon om uttak, se Komme i gang med iOS-visninger og visningskontrollere: Del 1. Klikk på Standard Editor-knappen for å fjerne Assistant Editor-vinduet fra skjermen.

Figur E

Bygg og kjør appen. Legg merke til hvor brått utsikten klikker på skjermen. Vårt mål vil være å forbedre denne standardvisuelle oppførselen ved å erstatte den med en fin gradvis fade-in effekt.

Klikk på ViewController.m i Files and Groupes-ruten og legg til koden nedenfor rett under viewDidLoad: -metoden.

 - (void) viewWillAppear: (BOOL) animert 
 { 
 super viewWillAppear: animated; 
 self.view.alpha = 0.0; 
 UIView animateWithDuration: 0.5 
 animasjoner: ^ { 
 self.view.alpha = 1.0; 
 }; 
 } 

Hver UIV-visning har en flytende punkt som heter alfa som kontrollerer visningens gjennomsiktighet. Verdien varierer fra 0, 0 til 1, 0, hvor 0, 0 representerer helt gjennomsiktig og 1.0 representerer helt ugjennomsiktig. Siden viewWillAppear: kalles før visningen tegnes på skjermen, vil alfabetisk verdi på 0.0 effektivt føre til at den blir usynlig før den vises.

Oppfordringen til UIViews innebygde animateWithDuration: -metode er der magien skjer. Endring av verdien av visse egenskaper for visninger kan animeres ved hjelp av denne metoden, og ved å animere alfaendringen kan vi gradvis endre verdien fra 0, 0 til 1, 0 over en definert tidsperiode.

Den første parameteren til animateWithDuration: er tiden i sekunder animasjonen vil vare. Ved å sette dette til 0, 5 vil verdien til alfa nå 1, 0 på et halvt sekund. For å fremskynde eller bremse hvor raskt utsikten kommer til syne, angir vi bare en mindre eller større varighet.

Den rotete syntaks som blir sendt til animasjonene: parameteren kalles en blokk. Det er ganske enkelt et kutt som vi ønsker å ha utført. I dette har vi bare en linje med kode som setter self.view.alpha til 1.0. Enkelt sagt, vi ber UIView om å endre verdien til 1.0, men å gjøre det gradvis over 0, 5 sekunder.

Bygg og kjør appen igjen. Eksperimenter med forskjellige verdier i løpet av varigheten til du finner noe behagelig. Du har uten tvil sett denne effekten flere titalls ganger i andre apper, og nå vet du hvordan det gjøres!

Nå legger du til følgende kode for å viseWillAppear direkte etter koden du skrev inn over.

 UIView animateWithDuration: 1.5 
 animasjoner: ^ { 
 self.myLabel.alpha = 0, 0; 
 } 
 fullføring: ^ (BOOL suksess) { 
 UIView animateWithDuration: 3.0-animasjoner: ^ { 
 self.myLabel.alpha = 1.0; 
 }; 
 }; 

Her bruker vi en annen av UIViews animasjonsmetoder som lar oss kjøre en animasjon, vente på at den skal fullføres og deretter kjøre en andre animasjon. Ved å bruke alfa-egenskapen som vi gjorde med hovedvisningen, får vi etiketten til å forsvinne i løpet av 1, 5 sekunder, og dukker deretter opp igjen i løpet av de neste 3 sekundene.

Bygg og kjør appen og eksperiment med forskjellige varighetsverdier som før. Ingen tvil om at tankene dine allerede er fulle av nye ideer for å bruke denne kule effekten i dine egne apper! Ved å gjenta denne effekten med kort varighet kan du for eksempel lage sakte blinkende tekst for å trekke brukerens oppmerksomhet til noe de har oversett eller lagt inn feil.

I del 2 får vi se hvordan du oppnår en veldig vanlig effekt Apple bruker i sine egne apper ved å animere etiketten til forskjellige posisjoner på skjermen.

Les også:

  • Beste praksis: Utvikle heterogene iOS-apper
  • Kjør flere iOS-appnedlastinger med bedre ikoner
  • Forstå tilstandene og overgangene til en iOS-app
  • Komme i gang med iOS-visninger og visningskontrollere: Del 1

© Copyright 2020 | mobilegn.com