iOS 7: n (ja myös iOS 8: n) julkaisun jälkeen animaatiosta ja liikeefekteistä tuli keskeisiä sekä Applen että 3rd party-kehittäjien sovellusten suunnittelussa. iOS 7 esitteli Tasainen, minimaalinen muotoilu sovelluksia, joka väistämättä johti joitakin sovelluksia, joilla on samanlainen UI. Erottaakseen sovelluksensa muista sovelluksista kehittäjät käyttivät sellaisia ominaisuuksia kuin animaatioita ja liikeefektejä, jotta heidän sovelluksensa erottuisivat muista.

sovelluksen erottamiseen ei käytetä pelkästään animaatioita, vaan ne voivat parantaa sovelluksen yleistä käyttökokemusta. Hyviä esimerkkejä siitä, miten animaatioita käytetään UX: n parantamiseen, kannattaa katsoa, miten Apple käyttää animaatioita sovelluksissaan. Esimerkiksi kuvat-sovelluksessa, kun valitset kuvan kokoelmasta, kuva laajenee valitusta ja sulkeutuessaan se kutistuu takaisin valittuun kuvaan. Tämä lisää navigointia sovelluksen, että se antaa sinun tietää tarkalleen, missä olit, jos selaat monia kuvia.

Facebook-paperi työllistää animaatiot myös kauniisti lisäämään sovelluksen yleistä käyttökokemusta. Valitset luettavan artikkelin kääntämällä sitä ylöspäin. Tämä toimenpide, se, että artikkeli laajenee pienoiskuvaversiostaan, viittaa siihen, että päinvastaisella tavalla, toisin sanoen kääntämällä artikkelia alaspäin, se kutistuisi takaisin pienoiskuvakseen. Tässä, animaatio käytetään välittää miten sovellus toimii ja jopa ensimmäistä kertaa käyttäjä sovellus voisi pian tehdä oletuksia sen käytöstä ja selvittää sen navigointi tarvitsematta opetusohjelma.

animaatiot eivät ainoastaan lisää sovelluksen käyttäjäkokemusta, vaan ne voivat olla mitä ihastuttaa ja tehdä vaikutuksen käyttäjiisi takaamalla toistuvan käytön sen sijaan, että poistaisit sovelluksen paremman sovelluksen App Storesta.

sovelluksissasi on lukuisia tapoja sisällyttää animaatioita, joista osa on UIKit Dynamics, layer animations, view controller transitions tai käyttämällä kolmannen osapuolen kirjastoa, kuten Facebook Pop library tai JNWSpringAnimation framework.

tässä tutoriaalissa käydään läpi yksinkertaisia näkymäanimaatioita. Voit ladata starter-projektin, joka on yhden näkymän sovellus, jossa on Taulukkonäkymä, joka listaa opetusohjelman esimerkit. Aion käyttää tätä, kun saamme esimerkkejä osa opetusohjelma, sijaan alkaa tyhjästä.

opetusohjelma alkaa yhteenvedolla näkymien animointiin käytetyistä sovellusliittymistä ja päättyy muutamiin esimerkkeihin, jotka osoittavat joidenkin sovellusliittymien käytön sovelluksessa.

perusnäkymän animaatiot

animaatioiden luominen näkymiin edellyttää niiden ominaisuuksien muuttamista ja UIKit saavat animoida ne automaattisesti. Muuttamamme ominaisuudet on merkitty Animoitaviksi.

seuraavassa luettelossa on esitetty animoitavat ominaisuudet.

  • center
  • alpha
  • frame
  • bounds
  • transford
  • backgroundColor
  • contentStretch

löydät että kaikki animaatiot sisältävät yhden tai useamman edellä mainitun ominaisuuden muutoksen.

yksinkertaisille näkymäanimaatioille UIKit tarjoavat seuraavat sovellusliittymät, joita voi käyttää näkymien animointiin näytöllä.

ensimmäinen vaatii kaksi parametria-arvon animaation kestolle sekunteina ja sulkemisen, jossa määritellään haluamasi ominaisuudet. UIKit ottavat näkymän alkuperäisen tilan ja luovat sujuvan siirtymisen kyseisestä tilasta lopputilaan sen mukaan, mitä määritit animaatioiden sulkemisessa.

kaksi muuta sovellusliittymää ovat samanlaisia kuin ensimmäinen, mutta ne ottavat ylimääräisiä parametreja, jotka lisäävät animaation konfiguraatiota. Toinen vie loppuun sulkemisen, jonka avulla voit joko määrittää toisen animaation, jonka haluat tehtävän ensimmäisen jälkeen, tai voit tehdä jonkin käyttöliittymän puhdistamisen, esimerkiksi poistamalla näkymän näkymähierarkiasta, kun toinen näkymä on animoitu kohtaukseen.

kolmas API ottaa kaksi lisäparametria-viive, joka on aika odottaa ennen animaation alkua ja vaihtoehdot, UIViewAnimationOptions-vakio, joka ilmaisee, miten haluat suorittaa animaatiot. Seuraavassa esitetään käytettävissä olevat vaihtoehdot.

Kevätanimaatiot

Kevätanimaatiot yrittävät mallintaa tosielämän kevään käyttäytymistä siten, että kun näkymää siirretään pisteestä toiseen, se pomppii/värähtelee loppua kohti ennen kuin asettuu paikoilleen.

alla on menetelmälohko, jota käytämme kevätanimaatioissa.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, vaihtoehdot:, animations:, completion:)

edellä on samanlainen menetelmiä tarkastelimme aiemmin lukuun ottamatta kahta uutta muuttujaa-usingSpringWithDamping ja initialSpringVelocity. Vaimennus on arvo 0: sta 1: een, joka määrittää, kuinka paljon näkymä pomppii animaation loppua kohti. Mitä lähempänä arvoa 1 on, sitä vähemmän se pomppii. initialSpringVelocity kuten nimi sanoo, määrittää alkunopeus animaation. Tämä määrittää, kuinka vahva animaatio alkaa. Jos haluat sen käynnistyvän voimakkaasti, aseta suurempi arvo, jos haluat sujuvan animaation, voit asettaa arvoksi 0.

Avainkehysanimaatiot

Avainkehysanimaatiot mahdollistavat animaation eri vaiheiden asettamisen. Voit ryhmitellä erilaisia animaatioita yhteen, joilla on yhteisiä ominaisuuksia, mutta silti hallita niitä erikseen.

UIKit toteuttavat animaation eri vaiheet pelkän polkua pitkin liikkuvan animaation sijaan.

Avainkehysanimaation sovellusliittymät ovat seuraavat.

edellä mainittuja kahta menetelmää käytetään yhdessä, toinen saa pesän ensimmäisen animaatiosulkuun.

ensimmäinen menetelmä määrittää animaation kokonaiskokoonpanon, kuten kuinka kauan se kestää, viiveen ja sen vaihtoehdot. Tämän jälkeen voit määrittää yhden tai useamman toisen menetelmän(kehykset) sisällä animaatioita sulkeminen asettaa eri vaiheissa animaation.

kunkin kehyksen suhteellinen alkamisaika ja suhteellinen kesto on arvo 0: n ja 1: n välillä, joka ilmaisee prosenttiosuuden animaation kokonaiskestosta.

Näytä siirtymät

Näytä siirtymät käytetään, kun haluat lisätä uuden näkymän näkymähierarkiaan tai poistaa näkymän näkymähierarkiasta.

sovellusliittymät, joita käytetään näkymien siirtymien luomiseen, ovat

käytät ensimmäistä näkymää näkymien hierarkiaan. Menetelmä vie samanlaisia parametreja kuin olemme nähneet muissa animaatio menetelmiä.

toista käytetään ottamaan yksi näkymä näköhierarkiasta ja asettamaan uusi näkymä sen tilalle.

esimerkkejä

tarkastelemme nyt muutamia esimerkkejä, jotka käyttävät yllä olevia API-kutsuja näkymien animointiin annetussa aloitusprojektissa.

esimerkki i

jos suoritat projektin, näet taulukkonäkymän, joka listaa esimerkit, joita käymme läpi. Valitse listasta esimerkki I ja sinun pitäisi nähdä sovelluksen kirjautumisnäyttö, jossa on käyttäjätunnus-ja salasanakentät sekä kirjautumispainike.

haluamme, että nämä animoidaan ruudulle, kun sovellus käynnistyy.

aloittaaksemme piilotamme näkymän näkyviltä, kun näkymä ilmestyy ensimmäisen kerran. Ennen automaattista asettelua tämä olisi ollut yksinkertainen asia muuttaa tietyn näkymän sijaintia koodissa, mutta koska asetamme automaattisen asettelun rajoitteet kuvakäsikirjoitustiedoston näkymille, meidän on muutettava koodin rajoitteita, mikä muuttaa näkymän sijaintia.

ensin on saatava viittaus rajoitteisiin, joita muutamme. Avaa kuvakäsikirjoituksen tiedosto. Etsi seuraavat rajoitteet esimerkissä I kohtaus.

avaa Assistant Editor, ja varmista, että se on ExampleIViewController.swift, joka näkyy kuvakäsikirjoituksen vieressä jaetussa näytössä. Vedä keskustasta X kohdistus-näkymä-käyttäjätunnus rajoite ExampleIViewController Luokka. Luo pistorasia nimeltä centerAlignUsername. Tee sama Center X kohdistus-näkymä-salasana ja aseta sen nimi centerAlignPassword. Luo myös ulostulo loginbutton-nimiselle kirjautumispainikkeelle ja toiminto samalle painikkeelle ja nimeä se kirjautuminen. Varmista, että asetat uibuttonin toiminnan tyypin. Sinun pitäisi olla seuraavat koodina.

1
2
3
4
5
6
7

@IBOutlet heikko var centerAlignUsername: NSLayoutConstraint!
@IBOutlet heikko var centerAlignPassword: NSLayoutConstraint!
@IBOutlet heikko var loginButton: UIButton!
@IBAction func-kirjautuminen (lähettäjä: UIButton) {
}

Esimerkissälehdenviewcontroller.swift lisää seuraavan menetelmän, jota kutsutaan ennen näkymän esittämistä näytöllä.

tämä siirtää käyttäjätunnus-ja salasanakentät vain pois näkyvistä ja asettaa painikkeen alfa-arvoksi 0, mikä tekee siitä näkymättömän.

lisätään seuraava menetelmä, jota kutsutaan oikein näkymän ilmestyessä.

tässä käytetään Uivikuvaa.animateWithDuration () – menetelmä, jonka näimme aiemmin. Olemme mukana Uiviewanimation options.Curveeeaseout vaihtoehto, joka tekee animaatio alkaa nopeasti sitten hidastaa lopussa. Voit kokeilla eri vaihtoehtoja täällä. Komento-klikkaa UIViewAnimationOptions nähdäksesi kaikki käytettävissä olevat vaihtoehdot.

animaatio kestää 0,5 sekuntia ja alkaa heti. Sinulla on vapaus yli keston, mutta sinun ei pitäisi asettaa niin suuri määrä, että ärsyttää käyttäjiä, kun animaatiot sovelluksen näyttävät kestää liian kauan. Normaalisti kesto on 0,5-0,7 sekuntia, mutta kuten sanoin, tämä ei ole kiveen hakattu ja sinulla on vapaus asettaa se, mikä sinusta tuntuu oikealta.

animaatio tekee täysin päinvastoin kuin viewWillAppear(). layoutIfNeeded () käytetään asetella näkemyksiä välittömästi ne muuttuvat. Jos et sisällytä sitä, et näe heitä animoitavan näytölle, vaan he vain näkyvät lopullisessa asemassaan. Suorita sovellus, ja sinun pitäisi nähdä seuraavat.

yllä näyttää mielenkiintoisempaa kuin staattinen esitys, mutta näkymät saada animoitu samaan aikaan, ei luo niin suuri vaikutus. Muokkaa menetelmää alla esitetyllä tavalla.

Suorita sovellus ja tuloksena olevassa animaatiossa ruudulle animoituvat näkymät eri aikoina. Kun katsot koodia, näet, että ensimmäisen animaatiolohkon jälkeen asetamme viiveen seuraaville.

kirjautumisnäytöissä, kun kirjautuminen epäonnistuu, on yleensä animaatio, joka ilmoittaa käyttäjälle, että kirjautuminen on epäonnistunut. Tämä tehdään joskus tekstikenttien tai kirjautumispainikkeen ravistuksena ja viestinä, joka kertoo käyttäjälle kirjautumisen epäonnistuneen. Lisäämme tällaisen vaikutuksen sisäänkirjautumispainikkeeseen jousien avulla. Muokkaa login () – toimintoa kuvan mukaisesti.

yllä oleva muuttaa kirjautumispainikkeen kokoa painettaessa ja animoi toiminnon jousianimaatiolla, joka saa painikkeen leveyden laajenemaan ja pomppimaan hieman lopussa ennen asettumista.

leikittele vaimennusarvolla. Jos asetat sen arvoon 1, painike laajenee, eikä se pompi lopussa. Voit käyttää samaa menetelmää myös käyttäjätunnus-ja salasanakentissä. Sen sijaan, että ne tulevat näytölle ja vain pysähtyvät paikalleen lopussa, pyydä niitä olemaan keväisiä ja pomppimaan hieman ennen asettumista.

esimerkki II

sovelluksessasi saatat joutua vaihtamaan näkymän taustakuvan automaattisesti, kun jokin toiminto tapahtuu. Voit tehdä sen tavalla, jossa kuva välittömästi korvaa toisen näkymässä, tai voit hitaasti häivyttää sen luoda mukava siirtyminen. Luomme tämän efektin täällä. Avoin Esimerkki Leiviewcontroller.swift ja lisää seuraavat.

tässä luodaan kuvanäkymä ja lisätään se päänäkymään. Tällöin kutsutaan imagefadeiniksi (), joka luo toisen näkymän erilaisella kuvalla. Lisäämme tämän näkymän ensimmäisen kuvan yläpuolelle ja asetamme sen alfaksi 0. Animaatiolohkossa animoimme sen alfa-arvon, jolloin se näkyy. Tämän jälkeen asetamme kuvanäkymän kuvan toiseen kuvaan täydennyssulkimella ja poistamme toisen kuvan näkymän näkymähierarkiasta, koska sitä ei enää tarvita. Olen lisännyt pitkän viiveen, jotta animaatio ei tapahdu juuri sillä hetkellä, kun valitsemme taulukon näkymästä esimerkin II. Kesto on myös hieman pitkä, joten näemme, mitä demossa tapahtuu.

vaikutus on seuraava.

esimerkki III

seuraavaksi katsotaan keyframe-animaatioita. Avoin Esimerkkitapaus.swift ja lisää seuraavat muuttuja ja toiminnot tiedostoon. Olen kommentoinut koodia selittämään jokaisen vaiheen.

Viewdidloadissa() kutsutaan createview () – funktiota. Lisää viewDidLoad () – sivun alaosaan seuraava.

1
createView()

kun käytät sovellusta ja valitset taulukon näkymästä esimerkin III, sinun pitäisi nähdä punainen näkymä, jonka yläosassa on kuvanäkymä ja keskellä painike.

haluamme, että näkymä(jota kutsun tästä eteenpäin alertview ’ ksi) kutistuu ja putoaa alaspäin pois näkyvistä.

kun loimme nappulan, lisäsimme siihen kuuntelijan. Kun nappia napautetaan, kutsutaan hylkäysalertiksi (). Muokkaa toimintoa kuten näkyy.

yllä olevassa koodissa luomme kehykset, jotka edustavat sitä, mitä haluamme näkymän animoinnin kahdelle vaiheelle. smallFrame kutistuu puoleen alertView ’ n koosta, säilyttäen keskipiste ja finalFrame on sijainti näytön alareunassa, poissa näkyvistä.

käytämme Avainkehysanimaatiota, jossa on kaksi avainkehystä. Ensimmäinen asettaa alertView ’ n kehyksen smallframelle ja toinen finalframelle. Seurauksena on, että alertview kutistuu puoleen koosta ja sitten putoaa pois näkyvistä. Huomaa olen laittanut niin suuri määrä kesto-4 sekuntia. Voit muuttaa tämän, halusin vain animaation käynnissä hidastettuna demo. Suorita sovellus ja valitse esimerkki III.

animaatio ei ole aivan sitä, mitä odotimme. Red alertView animoituu odotetusti, mutta sen lasten mittakaava ei muutu. Vanhemman kehysten muuttaminen ei automaattisesti muuta lasten kehyksiä.

käytämme iOS 7: ssä esitettyä ominaisuutta nimeltä UIView snapshots animaation korjaamiseen. Näin voit ottaa kuvan UIView yhdessä sen hierarkia ja tehdä sen Uusi UIView.

in disappealert () lisää seuraava kohta ennen Keyframe-animaatiokoodia.

1
2
3
4

Let snapshot = alertView.snapshotViewAfterScreenUpdates (false)
snapshot.frame = alertView.frame
view.addSubview (snapshot)
alertView.removalefromsuperview()

tässä luomme tilannekuvan ja lisäämme sen päänäkymään. Sitten poistamme alertView näkyvistä, koska tilannekuva korvaa sen.

korvaa Keyframe-animaatio seuraavalla.

Suorita hakemus ja naputtelemalla hylkää, näkymän (snapshot, todella) pitäisi animoitua odotetusti.

esimerkki IV

olemme tarkastelleet, miten voit animoida yksinkertaisia näkymiä. Tässä esimerkissä tarkastelemme, miten voit animoida taulukkonäkymän.

jos valitset Taulukkonäkymästä esimerkin IV, löydät toisen taulukkonäkymän, jossa on asialuettelo. Kun Taulukkonäkymä esitetään, luettelon kohteet on jo sijoitettu pöydälle. Haluamme animoida ne näkymän päälle, jotta saadaan aikaan mielenkiintoisempi efekti.

Avoin Esimerkki Leivviewcontroller.swift ja lisää seuraavat menetelmät.

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

ohitus func viewWillAppear(animaatio: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
Let cells = tablewiew.visibleCells ()
let tableHeight: CGFloat = tableView.rajat.koko.korkeus
I soluissa {
let cell: UITableViewCell = i kuten UITableViewCell
solu.transform = Cgaffinetransformmaketranslaatio (0, pöytäkorkeus)
}
var-indeksi = 0
a soluissa {
let cell: UITableViewCell = a as UITableViewCell
UIView.animateWithDuration(1,5, delay: 0,05 * Double (index), usingSpringWithDamping: 0,8, initialSpringVelocity: 0, options: nil, animations: {
cell.transform = Cgaffinetransformmaketranslaatio(0, 0);
}, loppuun saattaminen: nolla)
Hakemisto += 1
}
}

tässä näkymän ilmestyessä kutsutaan animateTable () – funktiota. Lataamme taulukkonäkymän TIEDOT uudelleen ja kierrämme ruudulla tällä hetkellä näkyvien solujen läpi ja siirrämme jokaisen niistä näytön alareunaan. Sitten toistamme kaikki solut, jotka siirsimme näytön alareunaan, ja animoimme ne takaisin asentoon jousianimaatiolla.

Suorita sovellus ja sinun tulisi nähdä seuraava.

johtopäätös

olemme tarkastelleet erilaisia sovellusliittymiä, joiden avulla voit lisätä animaatioita sovelluksesi näkymiin. Tämä ei ole kattava opas animaatiosta iOS: ssä, mutta käyttämällä yksinkertaisia sovellusliittymiä, joita olemme tarkastelleet, voit luoda erilaisia animaatioita sovelluksissasi. Jos haluat sukeltaa syvemmälle iOS-animaatioihin, voit tarkastella UIKit dynamiikkaa, kerrosanimaatioita, näkymäohjaimen siirtymiä ja jopa liikeefektejä. Voit myös tarkastella kolmannen osapuolen kirjastoja, kuten Facebook Pop ja JNWSpringAnimation framework, joka voisi auttaa sinua rakentamaan monimutkaisia animaatioita helpommin.

voit ladata valmiin projektin täältä.

Vastaa

Sähköpostiosoitettasi ei julkaista.