az iOS 7 (és az iOS 8 is) megjelenését követően az animáció és a mozgáshatások központi szerepet játszottak az Apple és a 3rd party fejlesztők alkalmazásainak tervezésében. az iOS 7 egy lapos, minimális kialakítást vezetett be az alkalmazásokhoz, ami elkerülhetetlenül azt eredményezte, hogy egyes alkalmazások hasonló felhasználói felülettel rendelkeznek. Hogy megkülönböztessék alkalmazásaikat a többi alkalmazástól, a fejlesztők olyan funkciókat alkalmaztak, mint az animációk és a mozgáshatások, hogy alkalmazásaik kiemelkedjenek.

az animációk nemcsak az alkalmazás megkülönböztetésére szolgálnak, hanem javíthatják az alkalmazás általános felhasználói élményét. Nagyszerű példák arra, hogy az animációkat hogyan használják az UX javítására, meg kell vizsgálnia, hogy az Apple hogyan használja az animációkat az alkalmazásaikban. Például a Fotók alkalmazásban, amikor kiválaszt egy fényképet egy gyűjteményből, a fénykép kibővül a kiválasztottból, majd bezárásakor vissza zsugorodik a kiválasztott fényképre. Ez növeli az alkalmazás navigációját, mivel lehetővé teszi, hogy pontosan tudja, hol volt, ha sok képet böngészett.

a Facebook papírja gyönyörűen animációkat is alkalmaz, Hogy növelje az alkalmazás általános felhasználói élményét. Válasszon ki egy cikket olvasni essek fel. Ez a művelet, az a tény, hogy a cikk kibővül a miniatűr verziójából, azt sugallja, hogy az ellenkezőjét, azaz a cikk lefelé fordítását, visszahúzza az indexképére. Itt az animációt arra használják, hogy közvetítsék az alkalmazás működését, és még az alkalmazás első felhasználója is hamarosan feltételezéseket tehet a használatáról és kitalálhatja a navigációt anélkül, hogy oktatóanyagra lenne szüksége.

az animációk nem csak növelik az alkalmazás felhasználói élményét, hanem gyönyörködtethetik és lenyűgözhetik a felhasználókat, garantálva az ismételt felhasználást ahelyett, hogy eltávolítanák az alkalmazást egy jobb alkalmazásért az App Store-ból.

számos módon többek között animációk az alkalmazások, amelyek közül néhány, hogy a használata UIKit Dynamics, réteg animációk, nézet vezérlő átmenetek vagy egy harmadik fél könyvtár, mint a Facebook Pop könyvtár vagy JNWSpringAnimation keretrendszer.

ebben az oktatóanyagban egyszerű nézet animációkat fogunk megnézni. Letöltheti a starter projektet, amely egyetlen nézet alkalmazás egy táblázatos nézettel, amely felsorolja a bemutató oktatóanyagban bemutatott példákat. Ezt fogom használni, amikor eljutunk az oktatóanyag példák részéhez, ahelyett, hogy a semmiből indulnánk.

az oktatóanyag a nézetek animálásához használt API-k összefoglalásával kezdődik, és néhány példával zárul, amelyek bemutatják néhány API használatát egy alkalmazásban.

alapvető nézet animációk

az animációk létrehozása a nézeteken a tulajdonságok megváltoztatásának kérdése, és hagyja, hogy az UIKit automatikusan animálja őket. Azok a tulajdonságok, amelyeket megváltoztatunk, animálhatóak.

az alábbi lista az animálható tulajdonságokat mutatja.

  • központ
  • alpha
  • keret
  • határokat
  • transform
  • háttérszín
  • tartalomstretch

meg fogja találni hogy minden animáció magában foglalja a fenti tulajdonságok közül egy vagy több megváltoztatását.

az egyszerű nézet animációkhoz az UIKit a következő API-kat biztosítja, amelyek felhasználhatók a képernyőn megjelenő nézetek animálására.

az első két paramétert vesz fel – egy értéket az animáció másodpercben megadott időtartamára, valamint egy lezárást, ahol megadhatja a módosítani kívánt tulajdonságokat. Az UIKit átveszi a nézet eredeti állapotát, és zökkenőmentes átmenetet hoz létre ebből az állapotból a végállapotba az animációk bezárásában megadott adatok szerint.

a másik két API hasonló az elsőhöz, de extra paramétereket vesznek fel, amelyek további konfigurációt adnak az animációhoz. A második egy befejezési lezárást végez, amellyel megadhat egy másik animációt, amelyet az első után szeretne elvégezni, vagy elvégezheti a felhasználói felület tisztítását, például eltávolíthat egy nézetet a nézethierarchiából, ha egy másik nézetet animál a jelenetre.

a harmadik API további két paramétert vesz igénybe – a késleltetést, amely az animáció elindulása előtti várakozási idő, valamint az opciókat, Egy UIViewAnimationOptions állandót, amely jelzi az animációk végrehajtásának módját. Az alábbi ábrán a rendelkezésre álló lehetőségek.

tavaszi animációk

a tavaszi animációk megpróbálják modellezni egy valós rugó viselkedését, abban az esetben, ha egy nézetet egyik pontról a másikra mozgatnak, akkor a vége felé ugrál/oszcillál, mielőtt letelepedne a pozícióba.

az alábbiakban bemutatjuk a tavaszi animációkhoz használt módszerblokkot.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, opciók:, animációk:, Befejezés:)

a fentiek hasonlóak a korábban megvizsgált módszerekhez, kivéve két új paramétert – usingSpringWithDamping és initialSpringVelocity. A csillapítás 0-tól 1-ig terjedő érték, amely meghatározza, hogy a nézet mennyire pattog az animáció vége felé. Minél közelebb van az 1-hez az érték, annál kevésbé lesz goromba. initialSpringVelocity ahogy a neve is mondja, meghatározza az animáció kezdeti sebességét. Ez határozza meg, hogy az animáció milyen erősen indul. Ha azt szeretné, hogy erőteljesen induljon, akkor állítson be nagyobb értéket, ha sima animációt szeretne, akkor beállíthatja az értéket 0-ra.

Keyframe animációk

Keyframe animációk lehetővé teszik az animáció különböző szakaszainak beállítását. Csoportosíthat különböző animációkat, amelyek közös tulajdonságokkal rendelkeznek, de mégis képesek külön-külön vezérelni őket.

ahelyett, hogy egy animáció, hogy csak mozog egy utat, UIKit végrehajtja a különböző szakaszaiban az animáció.

a Keyframe animációs API-k a következők.

a fenti két módszert együtt használják, a második beágyazódik az első animációiba.

az első módszer beállítja az animáció általános konfigurációját, például azt, hogy mennyi ideig tart, késleltetés és annak beállításai. Ezután meg egy vagy több a második módszer(a keretek) belsejében animációk bezárása beállítani a különböző szakaszaiban az animáció.

az egyes képkockák relatív kezdési ideje és relatív időtartama egy 0 és 1 közötti érték, amely az animáció teljes időtartamán belüli százalékos időt fejezi ki.

Nézetátmenetek

a Nézetátmenetek akkor használatosak, ha új nézetet kíván hozzáadni a nézethierarchiához, vagy el szeretne távolítani egy nézetet a nézethierarchiából.

a nézetátmenetek létrehozásához használt API-k

az elsőt használja a nézet hierarchiába történő bevezetéséhez. A módszer hasonló paramétereket vesz fel, mint a többi animációs módszernél láttuk.

a második arra szolgál, hogy egy nézetet vegyen fel a nézethierarchiából, és új nézetet helyezzen a helyére.

példák

most megnézünk néhány példát, amelyek a fenti API-hívások némelyikét használják az adott kezdő projekt nézeteinek animálására.

I. példa

ha futtatja a projektet, megjelenik egy táblázat nézet, amely felsorolja azokat a példákat, amelyeket át fogunk dolgozni. Válassza az I. példát a listában, és látnia kell egy alkalmazás bejelentkezési képernyőjét a felhasználónév és jelszó mezőkkel és a Bejelentkezés gombbal.

azt akarjuk, hogy ezek animált rá a képernyőn, amikor az alkalmazás elindul.

a kezdéshez elrejtjük a nézeteket a szem elől, amikor a nézet először megjelenik. Az Automatikus elrendezés előtt ez egyszerű kérdés lett volna az adott nézet pozíciójának megváltoztatása a kódban, de mivel a storyboard fájl nézeteinek automatikus elrendezési korlátozásait állítottuk be, meg kell változtatnunk a kód korlátozásait, ami megváltoztatja a nézet helyzetét.

először is meg kell kapnunk egy hivatkozást a korlátokról, amelyeket megváltoztatunk. Nyissa meg a storyboard fájlt. Keresse meg a következő korlátozásokat az I. példa jelenetben.

nyissa meg a segédszerkesztőt, és győződjön meg róla, hogy ez a Példaiviewcontroller.swift, amely a forgatókönyv mellett jelenik meg az osztott képernyőn. Húzza a középső X Igazítás-nézet-felhasználónév kényszerből az ExampleIViewController osztályba. Hozzon létre egy centeralignusername nevű üzletet. Ugyanezt tegye a Center X Alignment – View – Password esetében is, és állítsa a nevét centerAlignPassword értékre. Hozzon létre egy kimenetet a loginButton nevű bejelentkezési gombhoz és egy műveletet ugyanahhoz a gombhoz, és nevezze el a login nevet. Győződjön meg róla, hogy a művelet típusát uibutton értékre állította. A következő kóddal kell rendelkeznie.

1
2
3
4
5
6
7

@iboutlet gyenge var centerAlignUsername: NSLayoutConstraint!
@iboutlet gyenge var centerAlignPassword: NSLayoutConstraint!
@IBOutlet gyenge var loginButton: UIButton!
@IBAction func bejelentkezés (feladó: UIButton) {
}

a Példábaniviewcontroller.swift adja hozzá a következő módszert, amelyet a nézet képernyőn történő bemutatása előtt hívnak meg.

ez a felhasználónév és jelszó mezőket egyszerűen nem látja, és a gomb alfa értékét 0-ra állítja, ami láthatatlanná teszi.

adja hozzá a következő módszert, amelyet a nézet megjelenésekor jobbra hív.

itt az UIView-t használjuk.animateWithDuration () módszer, amelyet korábban láttunk. Mi is a UIViewAnimationOptions.CurveEaseOut opció, amely az animáció indul gyorsan, majd lassítani a végén. Itt különböző lehetőségekkel kísérletezhet. Parancs-kattintson az UIViewAnimationOptions elemre az összes rendelkezésre álló lehetőség megtekintéséhez.

az animáció 0,5 másodpercig tart, és azonnal elindul. Szabadságod van az időtartam alatt, de nem szabad olyan nagy számot beállítani, hogy bosszantsa a felhasználókat, amikor az alkalmazás animációi túl sokáig tartanak. Általában az időtartam 0,5 és 0,7 másodperc között van beállítva, de mint mondtam, ez nincs kőbe vésve,és szabadon beállíthatja azt, amit jónak érez.

az animáció nem az ellenkezője annak, amit tettünk viewWillAppear(). a layoutifneeded() a nézetek azonnali megváltoztatására szolgál. Ha nem tartalmazza, akkor nem fogja látni őket animált a képernyőre, ehelyett csak a végső helyzetükben jelennek meg. Futtassa az alkalmazást, és a következőket kell látnia.

a fentiek érdekesebbnek tűnnek, mint egy statikus prezentáció, de az egyszerre animált nézetek nem hoznak létre olyan nagy hatást. Módosítsa a módszert az alábbiak szerint.

futtassa az alkalmazást, és az eredményül kapott animáció különböző időpontokban animálja a képernyőn megjelenő nézeteket. A kódot tekintve láthatja, hogy az első animációs blokk után késleltetést állítunk be a későbbiekre.

a bejelentkezési képernyőkön, amikor a bejelentkezés sikertelen, általában van egy animáció, amely jelzi a felhasználónak, hogy a bejelentkezés sikertelen. Ez néha a szövegmezők vagy a bejelentkezés gomb rázásaként történik, valamint egy üzenet, amely tudatja a felhasználóval, hogy a bejelentkezés sikertelen. Hozzáadunk egy ilyen hatást a bejelentkezési gombra rugók segítségével. Módosítsa a login () függvényt az ábrán látható módon.

a fentiek megváltoztatják a bejelentkezés gomb méretét, amikor megnyomják, és egy tavaszi animációval animálják a műveletet, ami a gomb szélességét kitágítja és kissé visszapattan a végén, mielőtt letelepedne.

játsszon a csillapítási értékkel. Ha 1-re állítja, a gomb kibővül, a végén nem pattog. Ugyanezt a módszert használhatja a felhasználónév és jelszó mezőkben is. Ahelyett, hogy a képernyőre kerülnének, és csak megállnának a helyükön a végén, legyenek rugószerűek és ugráljanak egy kicsit, mielőtt letelepednének.

II.példa

az alkalmazásban előfordulhat, hogy valamilyen művelet esetén automatikusan ki kell cserélnie egy nézet háttérképét. Megteheti úgy, hogy egy kép azonnal helyettesíti a másikat a nézetben, vagy lassan elhalványíthatja, hogy szép átmenetet hozzon létre. Itt fogjuk létrehozni ezt a hatást. Nyissa Meg Az Exampleiiviewcontrollert.swift és add hozzá a következőket.

itt létrehozunk egy kép nézetet, és hozzáadjuk a fő nézethez. Ezután hívjuk imageFadeIn () amely létrehoz egy második nézetet egy másik képpel. Ezt a nézetet az első képnézet fölé adjuk, és az alfáját 0-ra állítjuk. Az animációs blokkban animáljuk az alfa értékét, láthatóvá téve azt. Ezután egy befejezési zárással állítjuk be a képnézet képét a második képre, majd eltávolítjuk a második képnézetet a nézethierarchiából, mivel már nincs rá szükség. Hozzáadtam egy hosszú késleltetést, hogy az animáció ne történjen meg abban a pillanatban, amikor a II.példát választjuk a táblázat nézetéből. Az időtartam is egy kicsit hosszú, így láthatjuk, mi folyik a demóban.

a következő a hatás.

példa III

következő nézzük keyframe animációk. Nyissa Meg Az Exampleiiiviewcontrollert.swift és adja hozzá a következő változót és függvényeket a fájlhoz. Megjegyeztem a kódot, hogy elmagyarázzam az egyes lépéseket.

a viewDidLoad() függvényben hívja meg a createView() függvényt. Adja hozzá a következőket a viewDidLoad () aljához.

1
createView()

az alkalmazás futtatásakor és a táblázat nézetből a III. példa kiválasztásakor egy piros nézetet kell látnia, felül egy képnézettel, középen pedig egy gombbal.

azt akarjuk, hogy a nézet (amelyet mostantól alertView-nak fogok nevezni) mérete csökkenjen, és lefelé essen a látószögből.

amikor létrehoztuk a gombot, hozzáadtunk egy hallgatót. Amikor megérinti a gombot, a rendszer meghívja az insissalert() függvényt. Módosítsa a funkciót az ábrán látható módon.

a fenti kódban olyan kereteket hozunk létre, amelyek képviselik azt, amit akarunk a nézet animálásának két szakaszában. a smallFrame az alertView méretének felére csökken, megtartva a középpontot, a finalFrame pedig a képernyő alján található, látótávolságon kívül.

két kulcsképpel rendelkező kulcskép animációt használunk. Az első az alertView keretét smallFrame-re állítja, a második pedig a finalFrame-re. Ennek eredményeként az alertView méretének felére csökken, majd kiesik a nézetből. Figyeljük meg, hogy ilyen nagy számot tettem az időtartamra-4 másodperc. Meg lehet változtatni ezt, csak azt akartam, hogy az animáció fut lassított a demo. Futtassa az alkalmazást, majd válassza a III. példát.

az animáció nem egészen az, amire számítottunk. Láthatjuk a piros alertView animálni a várt módon, de a skála a gyerekek nem változik. A szülő keretének megváltoztatása nem változtatja meg automatikusan a gyermekek kereteit.

az iOS 7-ben bevezetett UIView snapshots nevű funkciót fogjuk használni az animáció javításához. Ez lehetővé teszi, hogy pillanatfelvételt készítsen egy UIView-ról a hierarchiájával együtt, és egy új UIView-Ba renderelje.

in dississalert() adja hozzá a következőt közvetlenül a kulcskép animációs kódja előtt.

1
2
3
4

hagyja pillanatkép = alertView.snapshotViewAfterScreenUpdates (false)
pillanatkép.frame = alertView.keret
nézet.addSubview (pillanatkép)
alertView.removeFromSuperview()

itt létrehozunk egy pillanatkép nézetet, és hozzáadjuk a fő nézethez. Ezután eltávolítjuk az alertView-t a nézetből, mivel a pillanatkép helyettesíti.

cserélje ki a Keyframe animációt a következőre.

futtassa az alkalmazást, és az Elvetés elemre koppintva a nézetnek(pillanatkép, tényleg) a várt módon kell animálnia.

példa IV

megnéztük, hogyan lehet animálni az egyszerű nézeteket. Ebben a példában megvizsgáljuk, hogyan lehet animálni egy táblázatnézetet.

ha a IV.példát választja ki a táblázat nézetből, akkor egy másik táblázat nézetet talál az elemek listájával. A táblázatnézet megjelenítésekor a listaelemek már a táblára vannak helyezve. Szeretnénk animálni őket a nézetre, hogy érdekesebb hatást hozzunk létre.

Nyissa Meg Az Exampleivviewcontrollert.swift és adja hozzá a következő módszereket.

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

felülbírálása func viewWillAppear (animált: Bool) {
animálható()
}
func animateTable () {
tableView.reloadData()
hagyja sejtek = tableView.visibleCells()
hagyja tableHeight: CGFloat = tableView.határok.méret.magasság
az I cellákban {
hagyja cella: UITableViewCell = i mint UITableViewCell
cella.transform = CGAffineTransformMakeTranslation (0, tableHeight)
}
var index = 0
a cellákban {
hagyja a cellát: UITableViewCell = a mint UITableViewCell
UIView.animateWithDuration(1.5, késleltetés: 0.05 * Dupla(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, opciók: nulla, animációk: {
cella.transform = CGAffineTransformMakeTranslation(0, 0);
}, Befejezés: nulla)
index += 1
}
}

itt, amikor megjelenik a nézet, az animateTable() függvényt hívják. Újratöltjük a táblázatnézet adatait, áthurkoljuk a képernyőn jelenleg látható cellákat, és mindegyiket áthelyezzük a képernyő aljára. Ezután iteráljuk az összes cellát, amelyet a képernyő aljára mozgattunk, és egy tavaszi animációval animáljuk őket vissza a pozícióba.

futtassa az alkalmazást, és a következőket kell látnia.

következtetés

megvizsgáltuk a különböző API-kat, amelyek segítségével animációkat adhat hozzá az alkalmazás nézeteihez. Ez nem kimerítő útmutató az iOS animációjáról, de az általunk megvizsgált egyszerű API-k használatával különféle animációkat hozhat létre alkalmazásaiban. Ha tovább szeretne merülni az iOS animációkba, megnézheti az UIKit dinamikáját, a réteganimációkat, a vezérlő átmeneteinek megtekintését, sőt a mozgáshatásokat is. Azt is nézd meg a harmadik fél könyvtárak, mint a Facebook Pop és JNWSpringAnimation framework, amely segíthet építeni bonyolult animációk könnyebben.

az elkészült projektet itt töltheti le.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.