Základní animace v Xamarin.iOS

Tento článek zkoumá základní animační architekturu, která ukazuje, jak umožňuje vysoký výkon, fluidní animace v UIKitu a jak ji používat přímo pro ovládací prvek animace nižší úrovně.

iOS obsahuje základní animaci , která poskytuje podporu animací pro zobrazení ve vaší aplikaci. Všechny ultrahlazené animace v iOSu, jako je posouvání tabulek a potáhnutí mezi různými zobrazeními, fungují stejně jako ty, protože se spoléhají na základní animaci interně.

Základní animační a základní grafické architektury můžou spolupracovat na vytváření krásných a animovaných 2D grafik. Ve skutečnosti základní animace může dokonce transformovat 2D grafiku v prostorech 3D a vytvářet úžasné, kinotické zážitky. Pokud ale chcete vytvořit skutečnou 3D grafiku, musíte použít něco jako OpenGL ES nebo pro hry obrátit se na rozhraní API, jako je MonoGame, i když 3D je nad rámec tohoto článku.

Core Animation

IOS používá základní animační architekturu k vytváření animačních efektů, jako je přechod mezi zobrazeními, posuvnými nabídkami a posouváním efektů, které můžete pojmenovat několik. Animace se dá pracovat dvěma způsoby:

Použití animace UIKitu

UIKit nabízí několik funkcí, které usnadňují přidávání animací do aplikace. I když používá základní animaci interně, abstrahuje ji, takže pracuje jenom se zobrazeními a kontrolery.

Tato část popisuje animační funkce UIKitu, mezi které patří:

  • Přechody mezi kontrolery
  • Přechody mezi zobrazeními
  • Zobrazit animaci vlastností

Přechody kontrolerů zobrazení

UIViewController poskytuje integrovanou podporu pro přechod mezi kontrolery zobrazení prostřednictvím PresentViewController metody. Při použití PresentViewControllermůže být přechod na druhý kontroler volitelně animovaný.

Představte si například aplikaci se dvěma ovladači, kde se při prvním volání PresentViewController kontroleru dotknete tlačítka, které zobrazí druhý kontroler. Pokud chcete určit, jaká animace přechodu se používá k zobrazení druhého kontroleru, jednoduše nastavte jeho ModalTransitionStyle vlastnost, jak je znázorněno níže:

SecondViewController vc2 = new SecondViewController {
  ModalTransitionStyle = UIModalTransitionStyle.PartialCurl
};

V tomto případě PartialCurl se použije animace, i když je k dispozici několik dalších, včetně:

  • CoverVertical – Snímky nahoru ze spodní části obrazovky
  • CrossDissolve – Staré zobrazení zeslábne & v novém zobrazení
  • FlipHorizontal - Vodorovný překlopení zprava doleva. Při zavření přechodu překlopíte zleva doprava.

Pokud chcete přechod animovat, předejte true jako druhý argument PresentViewController:

PresentViewController (vc2, true, null);

Následující snímek obrazovky ukazuje, jak vypadá přechod pro tento PartialCurl případ:

This screenshot shows the PartialCurl transition

Zobrazit přechody

Kromě přechodů mezi řadiči podporuje UIKit také animace přechodů mezi zobrazeními, aby se jedno zobrazení prohodilo za druhé.

Řekněme například, že jste měli kontroler s UIImageView, kde by se poklepáním na obrázek měl zobrazit sekundu UIImageView. Pokud chcete animovat superview zobrazení obrázku pro přechod na druhé zobrazení obrázku, je stejně jednoduché jako volání UIView.Transition, předat ho toView a fromView jak je znázorněno níže:

UIView.Transition (
  fromView: view1,
  toView: view2,
  duration: 2,
  options: UIViewAnimationOptions.TransitionFlipFromTop |
    UIViewAnimationOptions.CurveEaseInOut,
  completion: () => { Console.WriteLine ("transition complete"); });

UIView.Transition Přebírá duration také parametr, který určuje, jak dlouho se animace spouští, a options také určuje, co se má animace použít, a funkci usnadnění. Kromě toho můžete zadat obslužnou rutinu dokončení, která bude volána po dokončení animace.

Následující snímek obrazovky znázorňuje animovaný přechod mezi zobrazeními obrázků při TransitionFlipFromTop použití:

This screenshot shows the animated transition between the image views when TransitionFlipFromTop is used

Zobrazení animací vlastností

UIKit podporuje bezplatné animování různých vlastností třídy UIView , včetně:

  • Rámec
  • Hranice
  • Střed
  • Alfa
  • Transformace
  • Barva

K těmto animacím dochází implicitně zadáním změn vlastností delegáta NSAction předaného statické UIView.Animate metodě. Například následující kód animuje středový bod UIImageView:

pt = imgView.Center;

UIView.Animate (
  duration: 2, 
  delay: 0, 
  options: UIViewAnimationOptions.CurveEaseInOut | 
    UIViewAnimationOptions.Autoreverse,
  animation: () => {
    imgView.Center = new CGPoint (View.Bounds.GetMaxX () 
      - imgView.Frame.Width / 2, pt.Y);},
  completion: () => {
    imgView.Center = pt; }
);

Výsledkem je animace obrázku v horní části obrazovky, jak je znázorněno níže:

An image animating back and forth across the top of the screen as the output

Stejně jako u Transition této metody Animate umožňuje nastavit dobu trvání spolu se easing funkcí. Tento příklad také použil UIViewAnimationOptions.Autoreverse možnost, která způsobí, že animace se animuje z hodnoty zpět na počáteční. Kód ale také nastaví Center zpět na počáteční hodnotu v obslužné rutině dokončení. Zatímco animace interpoluje hodnoty vlastností v průběhu času, skutečná hodnota modelu vlastnosti je vždy konečná hodnota, která byla nastavena. V tomto příkladu je hodnota bodem poblíž pravé strany superview. Bez nastavení Center na počáteční bod, kde se animace dokončí kvůli Autoreverse nastavení, by se obrázek po dokončení animace přichytil zpět k pravé straně, jak je znázorněno níže:

Without setting the Center to the initial point, the image would snap back to the right side after the animation completes

Použití základní animace

UIView animace umožňují spoustu funkcí a měly by být použity, pokud je to možné kvůli snadné implementaci. Jak už bylo zmíněno dříve, animace UIView používají základní animační architekturu. Některé věci ale nelze provést pomocí UIView animací, například animování dalších vlastností, které nelze animovat pomocí zobrazení nebo interpolace podél nelineární cesty. V takových případech, kdy potřebujete jemně ovládat, lze základní animaci použít přímo i přímo.

Vrstvy

Při práci se základní animací probíhá animace prostřednictvím vrstev, které jsou typu CALayer. Vrstva se koncepčně podobá zobrazení v tom, že existuje hierarchie vrstev, podobně jako hierarchie zobrazení. Ve skutečnosti vrstvy zpět zobrazení s přidáním podpory pro interakci uživatele. K vrstvě libovolného zobrazení můžete přistupovat prostřednictvím vlastnosti zobrazení Layer . Ve skutečnosti je kontext použitý v Draw metodě UIView vytvořen z vrstvy. Vrstva, která zálohuje vrstvu UIView , má svůj delegát nastavený na samotné zobrazení, což je to, co volá Draw. Takže při kreslení na , UIViewjste ve skutečnosti výkres na jeho vrstvu.

Animace vrstev můžou být implicitní nebo explicitní. Implicitní animace jsou deklarativní. Jednoduše deklarujete, které vlastnosti vrstvy se mají změnit a animace prostě funguje. Explicitní animace na druhé straně se vytvářejí prostřednictvím třídy animace, která je přidána do vrstvy. Explicitní animace umožňují kontrolu nad tím, jak se animace vytváří. Následující části se podrobněji ponoří do implicitních a explicitních animací.

Implicitní animace

Jedním ze způsobů, jak animovat vlastnosti vrstvy, je implicitní animace. UIView animace vytvářejí implicitní animace. Implicitní animace ale můžete vytvářet přímo na vrstvě.

Například následující kód nastaví vrstvu Contents z obrázku, nastaví šířku a barvu ohraničení a přidá vrstvu jako dílčí vrstvu zobrazení:

public override void ViewDidLoad ()
{
  base.ViewDidLoad ();

  layer = new CALayer ();
  layer.Bounds = new CGRect (0, 0, 50, 50);
  layer.Position = new CGPoint (50, 50);
  layer.Contents = UIImage.FromFile ("monkey2.png").CGImage;
  layer.ContentsGravity = CALayer.GravityResize;
  layer.BorderWidth = 1.5f;
  layer.BorderColor = UIColor.Green.CGColor;

  View.Layer.AddSublayer (layer);
}

Pokud chcete přidat implicitní animaci vrstvy, jednoduše zabalte změny vlastností do CATransaction. To umožňuje animaci vlastností, které by nebyly animovatelné pomocí animace zobrazení, například BorderWidth a BorderColor jak je znázorněno níže:

public override void ViewDidAppear (bool animated)
{
  base.ViewDidAppear (animated);

  CATransaction.Begin ();
  CATransaction.AnimationDuration = 10;
  layer.Position = new CGPoint (50, 400);
  layer.BorderWidth = 5.0f;
  layer.BorderColor = UIColor.Red.CGColor;
  CATransaction.Commit ();
}

Tento kód také animuje vrstvu Position, což je umístění ukotveného bodu vrstvy měřeného od levého horního rohu souřadnic superlayeru. Bod ukotvení vrstvy je normalizovaný bod v souřadnicovém systému vrstvy.

Následující obrázek znázorňuje pozici a bod ukotvení:

This figure shows the position and anchor point

Když se příklad spustí, animace PositionBorderWidth a BorderColor animace, jak je znázorněno na následujících snímcích obrazovky:

When the example is run, the Position, BorderWidth and BorderColor animate as shown

Explicitní animace

Kromě implicitních animací obsahuje základní animace celou řadu tříd, které dědí z CAAnimation toho, které umožňují zapouzdření animací, které se pak explicitně přidají do vrstvy. Umožňují jemně odstupňovanou kontrolu nad animacemi, například úpravou počáteční hodnoty animace, seskupování animací a určením klíčových snímků tak, aby umožňovaly nelineární cesty.

Následující kód ukazuje příklad explicitní animace pomocí CAKeyframeAnimation vrstvy zobrazené výše (v části Implicitní animace):

public override void ViewDidAppear (bool animated)
{
  base.ViewDidAppear (animated);
  
  // get the initial value to start the animation from
  CGPoint fromPt = layer.Position;
  
  /* set the position to coincide with the final animation value
  to prevent it from snapping back to the starting position
  after the animation completes*/
  layer.Position = new CGPoint (200, 300);
  
  // create a path for the animation to follow
  CGPath path = new CGPath ();
  path.AddLines (new CGPoint[] { fromPt, new CGPoint (50, 300), new CGPoint (200, 50), new CGPoint (200, 300) });
  
  // create a keyframe animation for the position using the path
  CAKeyFrameAnimation animPosition = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
  animPosition.Path = path;
  animPosition.Duration = 2;
  
  // add the animation to the layer.
  /* the "position" key is used to overwrite the implicit animation created
  when the layer positino is set above*/
  layer.AddAnimation (animPosition, "position");
}

Tento kód změní Position vrstvu vytvořením cesty, která se pak použije k definování animace klíčového rámce. Všimněte si, že vrstva Position je nastavená na konečnou hodnotu Position animace. Bez toho by se vrstva náhle vrátila k její Position před animaci, protože animace změní pouze hodnotu prezentace a ne skutečnou hodnotu modelu. Nastavením hodnoty modelu na konečnou hodnotu z animace zůstane vrstva na konci animace.

Následující snímky obrazovky ukazují vrstvu obsahující animaci obrázku přes zadanou cestu:

This screenshot shows the layer containing the image animating through the specified path

Souhrn

V tomto článku jsme se podívali na možnosti animace poskytované prostřednictvím základních animačních architektur. Prozkoumali jsme základní animaci, která ukazuje, jak umožňuje animace v UIKitu a jak ji lze použít přímo pro ovládací prvek animace nižší úrovně.