• O Autorovi
• animace při 60FPS
• základní rámce
• UIKit / UIView animace
• animace (withDuration: animace: dokončení)
• animateWithDuration
• UIViewPropertyAnimator
• co je frame?
• animateKeyframes
• CoreAnimation
• UIView + Jádro Animace
• UIKitDynamics
• uikitdynamicanimator
• UIKitDynamicBehavior
• ladění výkonu
• Core Animation Instrument
• Kreslení
• rasterizace
• zabalení

O Autorovi

Saravanan je iOS inženýr a spisovatel na Flexiple a Remote Tools. Pracoval s několika startupy v různých doménách.Více aboutSaravanan↬

byl jsem iOS vývojář pro více než deset let a mají jen zřídka vidět články, které konsolidovat všechny možné způsoby, jak provádět animace v iOS. Tento článek si klade za cíl být primerem animací iOS s úmyslem vyčerpat různé způsoby, jak dělat totéž.

vzhledem k rozsáhlosti tématu bychom každou část stručně pokryli na poměrně vysoké úrovni. Cílem je vzdělávat čtenáře se sadou možností, jak přidat animace do své aplikace pro iOS.

než začneme s tématy souvisejícími s iOS, podívejme se krátce na rychlost animace.

animace při 60FPS

obecně ve videích je každý snímek reprezentován obrázkem a obnovovací frekvence určuje počet snímků převrácených v sekvenci. Toto se nazývá „snímky za sekundu“ nebo FPS.

FPS určuje počet statických snímků se převrátil během sekundy, což doslova znamená, že větší počet snímků/ rámy, další podrobnosti a informace jsou zobrazeny ve videu. To platí i pro animace.

FPS se obvykle používá k určení kvality animací. Tam je populární názor, že dobré animace by měl běžet na 60fps nebo vyšší — nic méně než 60fps by se cítit trochu mimo.

Chcete vidět rozdíl mezi 30FPS a 60FPS? Koukni na tohle!

všimli jste si rozdílu? Lidské oči mohou určitě cítit chvění při nižších fps. Proto je vždy dobré praxe, aby ujistěte se, že žádné animace, kterou vytvoříte, dodržuje základní pravidlo běží na 60FPS nebo vyšší. Díky tomu se cítí realističtější a živější.

když se podíváme na FPS, pojďme se nyní ponořit do různých základních rámců iOS, které nám poskytují způsob provádění animací.

základní rámce

v této části se dotkneme rámců v sadě iOS SDK, které lze použít pro vytváření animací zobrazení. Provedeme rychlou procházku každou z nich a vysvětlíme jejich sadu funkcí relevantním příkladem.

UIKit / UIView animace

UIView je základní třída pro jakékoli zobrazení, které zobrazuje obsah v aplikacích pro iOS.

UIKit rámec, který nám dává UIView, již nám poskytuje některé základní animační funkce, které jsou výhodné pro vývojáře dosáhnout více tím, že dělá méně.

API, UIView.animate, je nejjednodušší způsob, jak animovat pohledy, protože vlastnosti libovolného pohledu lze snadno animovat poskytnutím hodnot vlastností v blokové syntaxi.

v animacích UIKit se doporučuje upravit pouze animovatelné vlastnosti UIVIew, jinak dojde k následkům, kdy by animace mohly způsobit, že pohled skončí v neočekávaném stavu.

animace (withDuration: animace: dokončení)

tato metoda trvá v trvání animace, soubor animovatelných vlastností zobrazení se mění, které je třeba animovat. Blok dokončení dává zpětné volání, když je zobrazení provedeno provedením animace.

téměř jakýkoli druh animace, jako je pohyb, škálování, otáčení, vyblednutí atd. na pohled může být dosaženo s tímto jediným API.

nyní zvažte, že chcete animovat změnu velikosti tlačítka nebo chcete, aby se konkrétní pohled přiblížil na obrazovku. Takto to můžeme udělat pomocí UIView.animate API:

let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3}

Tady je to, co zde děláme,

1. UIView.animate metoda s hodnotou trvání přešel na to, že představuje, jak dlouho animace, popsal uvnitř bloku, by měl běžet.
2. nastavíme nový rámeček tlačítka, který by měl představovat konečný stav animace.
3. nastavíme tlačítko center se středem superview tak, aby zůstalo ve středu obrazovky.

výše uvedený blok animace kódu by měla spustit animace na tlačítko rámu mění od aktuálního snímku:

Width = 0, Height = 0

Ke konečnému rámu:

Width = Height = newButtonWidth

A tady je to, co animace bude vypadat, jako:

animateWithDuration

Tato metoda je jako rozšíření animovat metodou, kde můžete dělat vše, co můžete provádět v předchozím API s některými fyziky chování přidány do zobrazení animace.

například, pokud chcete dosáhnout pružina tlumení efekty animace, které jsme výše, pak je to jak kód by vypadat takto:

let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}), completion: nil)

Tady je sada parametrů, které používáme:

1. duration
   představuje dobu trvání animace určující, jak dlouho má blok kódu běžet.
2. delay
   Představuje počáteční zpoždění, které chceme mít před začátkem animace.
3. SpringWithDamping
   představuje hodnotu pružného efektu, který chceme, aby se pohled choval. Hodnota musí být mezi 0 až 1. Čím nižší je hodnota, tím vyšší je kmitání pružiny.
4. velocity
   představuje rychlost, s jakou má animace začít.
5. options
   typ křivky animace, kterou chcete použít pro animaci zobrazení.
6. konečně blok kódu, kde nastavíme rámeček tlačítka, které je třeba animovat. Je to stejné jako předchozí animace.

A tady je, jak by animace vypadala s výše uvedenou konfigurací animace:

UIViewPropertyAnimator

Pro trochu větší kontrolu nad animací, UIViewPropertyAnimator přijde vhod, kde nám poskytuje způsob, jak pozastavení a pokračování animace. Můžete mít vlastní načasování a nechat animaci interaktivní a přerušitelnou. To je velmi užitečné při provádění animací, které jsou také vzájemně propojitelné s akcemi uživatele.

klasické gesto „Slide to Unlock“ a zobrazení přehrávače dismiss/ expand animace (v hudební aplikaci) jsou příklady interaktivních a přerušitelných animací. Prstem můžete začít pohybovat pohledem, poté jej uvolnit a pohled se vrátí do původní polohy. Případně můžete zachytit pohled během animace a pokračovat v jeho přetahování prstem.

toto je jednoduchý příklad, jak můžeme dosáhnout animace pomocí UIViewPropertyAnimator:

let newButtonWidth: CGFloat = 60let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}animator.startAnimation() //2

Tady je to, co děláme:

1. volámeUIViewProperty API předáním trvání a křivky animace.
2. Na rozdíl od obou výše uvedených UIView.animovat API, animace se nespustí, pokud ji zadat sami, tj. jste plně pod kontrolou celého procesu animace/ toku.

nyní řekněme, že chcete ještě větší kontrolu nad animacemi. Chcete například navrhnout a ovládat každý snímek v animaci. Existuje další API pro to, animateKeyframes. Ale než se do toho ponoříme, pojďme se rychle podívat na to, co je rám, v animaci.

co je frame?

kolekce pohledu je rám změny/ přechody z počátečního stavu do konečného stavu, který je definován jako animation a každou pozici zobrazení během animace je nazýván jako frame.

animateKeyframes

Toto rozhraní API poskytuje způsob, jak navrhnout animace takovým způsobem, že můžete definovat více animací s různými časování a přechody. Zveřejněte toto, API jednoduše integruje všechny animace do jednoho bezproblémového zážitku.

řekněme, že chceme přesunout naše tlačítko na obrazovce náhodným způsobem. Podívejme se, jak k tomu můžeme použít API animace klíčových snímků.

UIView.animateKeyframes(withDuration: 5, //1 delay: 0, //2 options: .calculationModeLinear, //3 animations: { //4 UIView.addKeyframe( //5 withRelativeStartTime: 0.25, //6 relativeDuration: 0.25) { //7 self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8 } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { self.button.center = CGPoint(x: self.view.bounds.width, y: start.y) } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { self.button.center = start }})

Zde je rozpis:

1. duration
   Volání API předáním v trvání animace.
2. delay
   počáteční doba zpoždění animace.
3. options
   typ křivky animace, kterou chcete použít pro animaci zobrazení.
4. animations
   Blok, který vezme všechny animace klíčových snímků navržené vývojářem / uživatelem.
5. addKeyFrame
   zavolejte API a navrhněte každou animaci. V našem případě jsme definovali každý pohyb tlačítka. Můžeme mít tolik takových animací, kolik potřebujeme, přidáno do bloku.
6. relativeStartTime
   definuje čas zahájení animace ve sbírce bloku animace.
7. relativeDuration
   definuje celkovou dobu trvání této konkrétní animace.
8. center
   V našem případě, jsme jednoduše změnit centrum majetku tlačítko pro přesun tlačítka po obrazovce.

A to je to, jak finální animace vypadá takto:

CoreAnimation

Žádné UIKit založené animace je interně přeloženy do jádra animace. Základní animační rámec tedy funguje jako podkladová vrstva nebo páteř pro jakoukoli animaci UIKit. Proto, všechny UIKit animace API nejsou nic jiného než zapouzdřené vrstvy jádra animace API v snadno spotřebním nebo pohodlným způsobem.

UIKit animation API neposkytují velkou kontrolu nad animacemi, které byly provedeny nad pohledem, protože se používají většinou pro animovatelné vlastnosti pohledu. Proto v takových případech, kdy máte v úmyslu mít kontrolu nad každým rámcem animace, je lepší použít základní API animace přímo. Alternativně mohou být ve spojení také použity animace UIView i základní animace.

UIView + Jádro Animace

podívejme se, jak můžeme znovu stejné tlačítko změnit animace spolu s uvedením načasování křivky pomocí UIView a Základní Animace rozhraní Api.

můžeme použít CATransactionfunkce časování, které vám umožní určit a ovládat animační křivku.

Pojďme se podívat na příklad tlačítko změna velikosti animace s jeho poloměr rohu s využitím CATransaction‚s načasování, funkce a kombinace UIView animace:

let oldValue = button.frame.width/2let newButtonWidth: CGFloat = 60/* Do Animations */CATransaction.begin() //1CATransaction.setAnimationDuration(2.0) //2CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3// View animations //4UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}// Layer animationslet cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5cornerAnimation.fromValue = oldValue //6cornerAnimation.toValue = newButtonWidth/2 //7button.layer.cornerRadius = newButtonWidth/2 //8button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9CATransaction.commit() //10

Tady je rozpis:

1. begin
   představuje začátek bloku animačního kódu.
2. duration
   celková doba trvání animace.
3. curve
   představuje křivku časování, kterou je třeba použít na animaci.
4. UIView.animate
   Naše první animace pro změnu rámečku tlačítka.
5. CABasicAnimation
   vytvořit CABasicAnimation objekt odkazem cornerRadius tlačítka jako klíčové cesty, protože to je to, co chceme animovat. Podobně, pokud chcete mít granulární kontrolu nad animacemi klíčových snímků, můžete použít třídu CAKeyframeAnimation.
6. fromValue
   Představuje počáteční hodnota animace, tj. počáteční cornerRadius hodnoty tlačítko z, kde animace musí začít.
7. toValue
   Představuje konečná hodnota animace, tj. konečné cornerRadius hodnoty tlačítko, kde animace musí skončit.
8. cornerRadius
   je třeba nastavit cornerRadius vlastnost tlačítko s konečná hodnota animace jiného tlačítka je cornerRadius hodnota se automaticky vrátil na původní hodnotu po animace dokončí.
9. addAnimation
   přikládáme animaci objekt, který obsahuje konfiguraci celého animačního procesu vrstvu po reprezentující klíčové cesty, pro které animace musí být provedena.
10. commit
    představuje konec bloku animačního kódu a spustí animaci.

to je To, jak finální animace bude vypadat takto:

Tento blog je skvělý číst, aby pomohla vytvořit více pokročilé animace, jak je přehledně vás provede většinu Core Animation framework Api s pokyny vedení vás na každém kroku na cestě.

UIKitDynamics

UIKit Dynamics je fyzikální engine pro UIKit, který vám umožní přidat nějaké fyzikální chování, jako je kolize, gravitace, tlak, snap, atd., k UIKit kontroly.

uikitdynamicanimator

Toto je třída admin rámce UIKit Dynamics, která reguluje všechny animace spouštěné jakýmkoli daným ovládáním uživatelského rozhraní.

UIKitDynamicBehavior

To vám umožní přidat libovolný fyzikální chování animátor, který pak umožňuje provádět na pohled k němu připojené.

různé druhy chování pro Uikitdynamiku zahrnují:

• UIAttachmentBehavior
• UICollisionBehavior
• UIFieldBehavior
• UIGravityBehavior
• UIPushBehavior
• UISnapBehavior

architektura UIKitDynamics vypadá nějak takhle. Všimněte si, že položky 1 až 5 lze nahradit jediným pohledem.

použijme nějaké fyzikální chování na naše tlačítko. Uvidíme, jak aplikovat gravitaci na tlačítko tak, aby nám to dalo pocit jednání se skutečným objektem.

var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3

zde je rozpis:

1. UIKitDynamicAnimator
   Jsme vytvořili UIKitDynamicAnimator objekt, který se chová jako orchestrator pro provádění animací. Také jsme prošli dohledem našeho tlačítka jako referenční zobrazení.
2. UIGravityBehavior
   Jsme vytvořili UIGravityBehavior objekt a předat naše tlačítko do prvků pole, na kterém toto chování je injekčně.
3. addBehavior
   přidali jsme gravitační objekt do animátoru.
   To by mělo vytvořit animaci, jak je uvedeno níže:
   

   

   měli bychom říct animátorovi, aby považoval spodní část obrazovky za zem. To je místo, kde UICollisionBehavior přichází do obrázku.

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
   Jsme vytvořili UICollisionBehavior objekt a prošel podél tlačítko tak, že chování je přidán na element.
5. translatesReferenceBoundsIntoBoundary
   povolení této vlastnosti řekne animátorovi, aby vzal hranici referenčních pohledů jako konec, což je v našem případě spodní část obrazovky.
6. addBehavior
   do animátoru jsme přidali kolizní chování.
   Nyní, naše tlačítko by dopadl na zem a v klidu, jak je uvedeno níže:
   

   

   to je docela hezké, ne?
   nyní zkusme přidat skákací efekt, aby se náš objekt cítil reálnější. K tomu použijeme třídu UIDynamicItemBehavior.

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!var bouncingBehavior : UIDynamicItemBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6//Adding the bounce effectbouncingBehavior = UIDynamicItemBehavior(items: ) //7bouncingBehavior.elasticity = 0.75 //8dynamicAnimator.addBehavior(bouncingBehavior) //9

7. UIDynamicItemBehavior
   Jsme vytvořili UIDynamicItemBehavior objekt a předat tlačítko tak, že chování je přidán na element.
8. elasticity
   hodnota musí být mezi 0-1, to představuje pružnost, tj. kolikrát objekt musí odrazit na a ze země, když je zasažen. To je místo, kde se kouzlo děje-vyladěním této vlastnosti můžete rozlišovat mezi různými druhy předmětů, jako jsou koule,lahve, tvrdé předměty a tak dále.
9. addBehavior
   do animátoru jsme přidali kolizní chování.

Nyní, naše tlačítko by se odrazit, když se dotkne země, jak je uvedeno níže:

Tento repozitář je docela užitečné a ukazuje všechny UIKitDynamics chování v akci. Poskytuje také zdrojový kód pro hraní s každým chováním. To by podle mého názoru mělo sloužit jako rozsáhlý seznam způsobů, jak provádět animace iOS na pohledech!

v další části se krátce podíváme na nástroje, které nám pomohou při měření výkonu animací. Také bych vám doporučil podívat se na způsoby, jak optimalizovat sestavení Xcode, protože to ušetří obrovské množství času na vývoj.

ladění výkonu

v této části se podíváme na způsoby měření a ladění výkonu animací iOS. Jako vývojář iOS jste možná již použili nástroje Xcode, jako jsou úniky paměti a alokace pro měření výkonu celkové aplikace. Podobně existují nástroje, které lze použít k měření výkonu animací.

Core Animation Instrument

zkuste Core Animation instrument a měli byste být schopni vidět FPS, které vaše obrazovka aplikace přináší. Je to skvělý způsob, jak měřit výkon/ rychlost jakékoli animace vykreslené ve vaší aplikaci pro iOS.

Kreslení

FPS je výrazně snížena v aplikaci, která zobrazuje těžký obsah, jako jsou obrázky s efekty jako stíny. V takových případech zkuste namísto přiřazení obrázku přímo k obrazové vlastnosti UIImageViewnakreslit obrázek Samostatně v kontextu pomocí rozhraní API Core Graphics. To příliš zkracuje dobu zobrazení obrazu provedením logiky dekomprese obrazu asynchronně, když se provádí v samostatném vlákně místo hlavního vlákna.

rasterizace

rasterizace je proces používaný k ukládání komplexních informací o vrstvách, takže tyto pohledy nejsou překresleny, kdykoli jsou vykresleny. Překreslování názorů je hlavní příčinou snížení FPS, a proto je nejlepší použít rasterizaci na pohledy, které budou několikrát znovu použity.

zabalení

Na závěr jsem také shrnul seznam užitečných zdrojů pro animace iOS. To může být velmi užitečné při práci na animacích iOS. Kromě toho můžete také najít tuto sadu návrhových nástrojů užitečné jako (návrh) krok předtím, než se ponoří do animací.