po vydání iOS 7 (a iOS 8 také) se animace a pohybové efekty staly ústředním bodem návrhu aplikací od vývojářů Apple I 3rd. iOS 7 představil plochý, minimální design aplikací, což nevyhnutelně vedlo k tomu, že některé aplikace mají podobné uživatelské rozhraní. Odlišit své aplikace od ostatních aplikací, vývojáři používali takové funkce, jako jsou animace a pohybové efekty, aby jejich aplikace vynikly.

nejen, že animace slouží k nastavení aplikace od sebe, ale mohou zlepšit celkovou uživatelskou zkušenost vaší aplikace. Pro skvělé příklady toho, jak se animace používají ke zlepšení UX, byste se měli podívat na to, jak Apple používá animace ve svých aplikacích. Například v aplikaci Fotografie, když vyberete fotografii z kolekce, fotografie se rozbalí z vybrané a po jejím uzavření se zmenší zpět na vybranou fotografii. To přispívá k navigaci aplikace v tom, že vám umožní přesně vědět, kde jste byli, pokud procházíte mnoho obrázků.

Facebook papír také využívá animace krásně přidat k celkovému uživatelskému zážitku z aplikace. Vyberete článek, který chcete přečíst, tím, že jej otočíte nahoru. Tato akce, skutečnost, že článek expanduje ze své verze miniatur, naznačuje, že při opaku, tj. převrácení článku dolů, by se zmenšil zpět na jeho miniaturu. Tady, animace se používá k vyjádření toho, jak aplikace funguje, a dokonce i první uživatel aplikace by brzy mohl učinit předpoklady o jejím použití a zjistit její navigaci, aniž by potřeboval tutoriál.

animace nejen přidávají do uživatelského prostředí aplikace, ale mohou to být to, co potěší a zapůsobí na vaše uživatele, kteří zaručují opakované použití namísto odinstalace aplikace pro lepší z App Store.

existuje mnoho způsobů, jak včetně animací ve vašich aplikacích, z nichž některé jsou pomocí UIKit Dynamics, animace vrstev, přechody řadiče zobrazení nebo pomocí knihovny třetích stran, jako je Facebook Pop library nebo jnwspringanimation framework.

v tomto tutoriálu se podíváme na jednoduché animace zobrazení. Zde si můžete stáhnout projekt starter, což je aplikace pro jedno zobrazení s tabulkovým pohledem, který uvádí příklady uvedené v tutoriálu. Budu to používat, když se dostaneme k ukázkové části tutoriálu, místo toho, abychom začali od nuly.

výukový program začíná souhrnem API používaných k animaci pohledů a končí několika příklady, které ukazují použití některých API v aplikaci.

Základní zobrazení animace

vytváření animací na vaše názory je otázkou změny vlastností na nich a nechat UIKit automaticky animovat. Vlastnosti, které měníme, jsou ty označené Animatable.

následující seznam zobrazuje animovatelné vlastnosti.

  • centrum
  • alfa
  • rám
  • hranice
  • transformace
  • backgroundColor
  • contentStretch

zjistíte, že všechny animace zahrnují změnu jedné nebo více výše uvedených vlastností.

pro jednoduché animace zobrazení poskytuje UIKit následující rozhraní API, která lze použít k animaci zobrazení na obrazovce.

první z nich má dva parametry-hodnotu pro dobu trvání animace v sekundách a uzavření, kde určíte vlastnosti, které chcete změnit. UIKit vezme původní stav pohledu a vytvoří hladký přechod z tohoto stavu do koncového stavu podle toho, co jste zadali v uzavření animací.

další dvě API jsou podobná prvnímu, ale berou další parametry, které přidávají další konfiguraci animace. Druhý má uzavření Dokončení, které můžete použít buď zadat jinou animaci, kterou chcete udělat po prvním, nebo můžete provést nějaké vyčištění uživatelského rozhraní, například odstranění pohledu z hierarchie zobrazení, jakmile je na scénu animován jiný pohled.

třetí API má další dva parametry-zpoždění, což je čas čekat před spuštěním animace a možnosti, konstanta uiviewanimationoptions, která označuje, jak chcete animace provádět. Následující ukazuje dostupné možnosti.

jarní animace

jarní animace se snaží modelovat chování pružiny v reálném životě v tom, že když je pohled přesunut z jednoho bodu do druhého, odrazí se/osciluje směrem ke konci, než se usadí na pozici.

níže je blok metod, který používáme pro jarní animace.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, options:, animace:, dokončení:)

výše uvedené je podobné metodám, na které jsme se podívali dříve, s výjimkou dvou nových parametrů-usingSpringWithDamping a initialSpringVelocity. Tlumení je hodnota od 0 do 1, která určuje, jak moc se pohled odrazí ke konci animace. Čím blíže je hodnota 1, tím méně bude skákací. initialSpringVelocity jak název napovídá, určuje počáteční rychlost animace. To určuje, jak silná animace začíná. Pokud chcete, aby začala energicky, nastavte větší hodnotu, pokud chcete hladkou animaci, můžete nastavit hodnotu na 0.

animace klíčových snímků

animace klíčových snímků umožňují nastavit různé fáze animace. Můžete seskupovat různé animace dohromady, které sdílejí některé společné vlastnosti, ale stále je můžete ovládat samostatně.

namísto animace, která se právě pohybuje po cestě, UIKit provede různé fáze animace.

API animace klíčových snímků jsou následující.

výše uvedené dvě metody se používají společně, druhá se vnoří do uzavření prvních animací.

první metoda nastavuje celkovou konfiguraci animace, například jak dlouho trvá, zpoždění a jeho možnosti. Poté definujete jednu nebo více z druhé metody (rámců) uvnitř uzavření animací a nastavíte různé fáze animace.

relativní čas zahájení a relativní doba trvání každého snímku je hodnota mezi 0 a 1, která vyjadřuje procentuální čas v rámci celkové doby trvání animace.

přechody zobrazení

přechody zobrazení se používají, pokud chcete přidat nový pohled do hierarchie zobrazení nebo odebrat pohled z hierarchie zobrazení.

API, která se používají k vytváření přechodů zobrazení, jsou

první použijete k zavedení zobrazení do hierarchie zobrazení. Metoda má podobné parametry, jaké jsme viděli v jiných metodách animace.

druhý slouží k převzetí jednoho pohledu z hierarchie zobrazení a umístění nového pohledu na jeho místo.

příklady

nyní se podíváme na několik příkladů, které používají některé z výše uvedených volání API k animaci pohledů v daném starter projektu.

příklad i

pokud spustíte projekt, zobrazí se zobrazení tabulky, které uvádí příklady, kterými budeme pracovat. V seznamu vyberte příklad I a měli byste vidět přihlašovací obrazovku aplikace s poli Uživatelské jméno a heslo a tlačítkem přihlášení.

chceme, aby byly animovány na obrazovce při spuštění aplikace.

Chcete-li začít, skryjeme pohledy z dohledu, když se poprvé objeví pohled. Před automatickým rozvržením by to byla jednoduchá záležitost změny pozice konkrétního pohledu v kódu, ale protože jsme nastavili omezení automatického rozvržení na pohledy v souboru storyboard, budeme muset změnit omezení v kódu,což změní polohu pohledu.

nejprve musíme získat odkaz na omezení, která změníme. Otevřete soubor scénáře. Vyhledejte následující omezení ve scéně příkladu I.

otevřete asistent Editor, a ujistěte se, že je ExampleIViewController.swift, který se objeví vedle scénáře na rozdělené obrazovce. Přetáhněte z omezení Center X Alignment – View – Username do třídy ExampleIViewController. Vytvořte zásuvku s názvem centerAlignUsername. Udělejte to samé pro centrum X Alignment-View-Password a nastavte jeho název na centerAlignPassword. Vytvořte také zásuvku pro přihlašovací tlačítko s názvem loginButton a akci pro stejné tlačítko a pojmenujte jej login. Ujistěte se, že jste nastavili typ akce na UIButton. V kódu byste měli mít následující.

1
2
3
4
5
6
7

@IBOutlet slabý var centerAlignUsername: NSLayoutConstraint!
@IBOutlet slabý var centerAlignPassword: NSLayoutConstraint!
@IBOutlet slabý var loginButton: UIButton!
@IBAction func login (odesílatel: UIButton) {
}

v ukázkovém přehledu.swift přidejte následující metodu, která se nazývá před zobrazením na obrazovce.

tím se pole uživatelského jména a hesla přesune z pohledu a nastaví hodnotu alfa tlačítka na 0, což je neviditelné.

přidejte následující metodu, která se při zobrazení zobrazí.

zde používáme UIView.metoda animateWithDuration (), kterou jsme viděli dříve. Zahrnujeme Možnosti UIViewAnimationOptions.CurveEaseOut možnost, která dělá animace začít rychle a pak zpomalit na konci. Zde můžete experimentovat s různými možnostmi. Příkaz-kliknutím na UIViewAnimationOptions zobrazíte všechny Dostupné možnosti.

animace trvá 0,5 sekundy a spustí se okamžitě. Máte svobodu po celou dobu trvání, ale neměli byste nastavit tak velké množství, aby obtěžovalo uživatele, když se zdá, že animace ve vaší aplikaci trvají příliš dlouho. Obvykle je doba trvání nastavena mezi 0, 5 A 0, 7 sekundy, ale jak jsem řekl, Toto není vytesáno do kamene a máte svobodu nastavit to, co vám připadá správné.

animace dělá přesný opak toho, co jsme udělali v viewWillAppear(). layoutIfNeeded() se používá k rozložení názorů okamžitě jsou změněny. Pokud ji nezahrnete, neuvidíte, jak se animují na obrazovce, místo toho se zobrazí pouze ve své konečné poloze. Spusťte aplikaci a měli byste vidět následující.

výše uvedené vypadá zajímavěji než statická prezentace, ale pohledy, které se zároveň animují, nevytvářejí tak velký efekt. Upravte metodu, jak je uvedeno níže.

Spusťte aplikaci a výsledná animace má zobrazení animující na obrazovce v různých časech. Při pohledu na kód můžete vidět, že po prvním bloku animace jsme nastavili zpoždění na následující.

na přihlašovacích obrazovkách, když se přihlášení nezdaří, je obvykle animace, která uživateli indikuje, že přihlášení selhalo. To se někdy provádí jako chvění textových polí nebo tlačítka přihlášení a zpráva, která uživateli informuje, že přihlášení selhalo. Takový efekt přidáme na přihlašovací tlačítko pomocí pružin. Upravte funkci přihlášení (), jak je znázorněno.

výše uvedené změní velikost tlačítka přihlášení po stisknutí a oživí akci pružinovou animací, která způsobí, že se šířka tlačítka na konci před usazením trochu rozšíří a odrazí.

Pohrajte si s hodnotou tlumení. Pokud jej nastavíte na hodnotu 1, tlačítko se rozbalí, aniž by se na konci odrazilo. Stejnou metodu můžete použít také v polích uživatelské jméno a heslo. Místo toho, aby se dostali na obrazovku a na konci se zastavili na místě, nechte je být jarní a trochu se odrazit, než se usadíte.

příklad II

v aplikaci budete možná muset automaticky nahradit obrázek na pozadí zobrazení, když dojde k nějaké akci. Dalo by se to udělat způsobem, kdy obraz okamžitě nahradí jiný v pohledu, nebo byste ho mohli pomalu vyblednout a vytvořit tak pěkný přechod. Tento efekt vytvoříme zde. Otevřete ExampleIIViewController.swift a přidejte následující.

zde vytvoříme zobrazení obrázku a přidáme jej do hlavního zobrazení. Poté zavoláme imageFadeIn (), který vytvoří druhý pohled s jiným obrázkem. Tento pohled přidáme nad první zobrazení obrázku a nastavíme jeho alfa na 0. V bloku animace animujeme jeho alfa hodnotu a zviditelníme ji. Poté pomocí uzavření Dokončení nastavíme obrázek zobrazení obrázku na druhý obrázek a odstraníme druhý pohled z hierarchie zobrazení, protože již není potřeba. Přidal jsem dlouhé zpoždění, aby se animace nestala právě v okamžiku, kdy vybereme příklad II z pohledu tabulky. Doba trvání je také trochu dlouhá, takže můžeme vidět, co se děje v demu.

následující je účinek.

příklad III

dále se podíváme na animace klíčových snímků. Otevřete ExampleIIIViewController.swift a přidejte do souboru následující proměnnou a funkce. Komentoval jsem kód, abych vysvětlil každý krok.

v viewDidLoad () zavolejte funkci createView (). Přidejte následující do dolní části viewDidLoad().

1
createView()

při spuštění aplikace a výběru příkladu III z pohledu tabulky byste měli vidět červené zobrazení s zobrazením obrázku nahoře a tlačítkem uprostřed.

chceme, aby se pohled (který budu od nynějška označovat jako alertView) zmenšil a spadl dolů z pohledu.

když jsme tlačítko vytvořili, přidali jsme k němu posluchače. Po klepnutí na tlačítko se volá dissalert (). Upravte funkci podle obrázku.

ve výše uvedeném kódu vytváříme rámce, které představují to, co chceme pro dvě fáze animace pohledu. smallFrame zmenší na polovinu velikosti alertView, udržování středový bod a finalFrame má pozici v dolní části obrazovky, z pohledu.

používáme animaci klíčových snímků se dvěma klíčovými snímky. První nastaví rám alertView na smallFrame a druhý na finalFrame. Výsledkem bude, že alertView se zmenší na polovinu své velikosti a pak vypadne z dohledu. Všimněte si, že jsem dal tak velké číslo na dobu trvání-4 sekundy. Můžete to změnit, jen jsem chtěl animaci běžící ve zpomaleném filmu pro demo. Spusťte aplikaci a vyberte příklad III.

animace není úplně taková, jakou jsme očekávali. Můžete vidět, jak se červený alertView animuje podle očekávání, ale rozsah jeho dětí se nemění. Změna rámečku rodiče automaticky nezmění rámečky svých dětí.

k opravě animace použijeme funkci představenou v systému iOS 7 nazvanou UIView snapshots. To vám umožní pořídit snímek UIView spolu s jeho hierarchií a vykreslit jej do nového UIView.

v dissalert () přidejte následující před kód animace klíčového snímku.

1
2
3
4

let snapshot = alertView.snapshotViewAfterScreenUpdates (false)
snímek.frame = alertView.rám
pohled.addSubview (snapshot)
alertView.removeFromSuperview()

zde vytvoříme snímek a přidáme jej do hlavního zobrazení. Poté odstraníme alertView z pohledu, protože snímek jej nahradí.

nahraďte animaci klíčových snímků následujícím způsobem.

Spusťte aplikaci a při klepnutí na tlačítko Odmítnout by se měl pohled (snímek, opravdu) animovat podle očekávání.

příklad IV

podívali jsme se na to, jak můžete animovat jednoduché pohledy. V tomto příkladu se podíváme na to, jak můžete animovat zobrazení tabulky.

pokud vyberete příklad IV z pohledu tabulky, najdete další zobrazení tabulky se seznamem položek v něm. Když je zobrazeno zobrazení tabulky, položky seznamu jsou již umístěny na stůl. Chceme je animovat do pohledu, abychom vytvořili zajímavější efekt.

Otevřete ExampleIVViewController.swift a přidejte následující metody.

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

override func viewWillAppear (animovaný: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
let cells = tableView.visibleCells ()
nechť tableHeight: CGFloat = tableView.vázané.Velikost.výška
pro i v buňkách {
nechť buňka: UITableViewCell = i jako uitableviewcell
buňka.transform = CGAffineTransformMakeTranslation (0, tableHeight)
}
index var= 0
pro a v buňkách {
let cell: Uitableviewcell = a jako Uitableviewcell
UIView.animateWithDuration (1.5, zpoždění: 0.05 * Double (index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, možnosti: nula, animace: {
cell.transform = CGAffineTransformMakeTranslation(0, 0);
}, dokončení: nula)
rejstřík += 1
}
}

zde, když se zobrazí zobrazení, je volána funkce animateTable (). Znovu načteme data zobrazení tabulky a projdeme buňkami, které jsou aktuálně viditelné na obrazovce, a každou z nich přesuneme do dolní části obrazovky. Poté iterujeme přes všechny buňky, které jsme přesunuli do dolní části obrazovky, a animujeme je zpět na místo pomocí jarní animace.

Spusťte aplikaci a měli byste vidět následující.

závěr

podívali jsme se na různá rozhraní API, která můžete použít k přidání animací do zobrazení aplikace. Toto není vyčerpávající průvodce animací v iOS, ale pomocí jednoduchých API, na které jsme se podívali, můžete ve svých aplikacích vytvářet různé animace. Chcete-li se dále ponořit do animací iOS, můžete se podívat na dynamiku UIKit, animace vrstev, přechody řadiče zobrazení a dokonce i efekty pohybu. Můžete se také podívat na knihovny třetích stran, jako je Facebook Pop a jnwspringanimation framework, které vám mohou pomoci snadněji vytvářet složité animace.

dokončený projekt si můžete stáhnout zde.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.