Animazione principale in Xamarin.iOS
Questo articolo esamina il framework di animazione principale, che mostra come abilita le prestazioni elevate, le animazioni fluide in UIKit, nonché come usarlo direttamente per il controllo di animazione di livello inferiore.
iOS include l'animazione principale per fornire supporto per le animazioni per le visualizzazioni nell'applicazione. Tutte le animazioni ultra uniformi in iOS, ad esempio lo scorrimento delle tabelle e lo scorrimento rapido tra visualizzazioni diverse, funzionano anche perché si basano internamente sull'animazione core.
I framework Core Animation e Core Graphics possono collaborare per creare grafica 2D accattivante e animata. Infatti, l'animazione core può anche trasformare grafica 2D nello spazio 3D, creando esperienze cinematografiche incredibili. Tuttavia, per creare una grafica 3D vera, è necessario usare qualcosa come OpenGL ES o per i giochi passare a un'API come MonoGame, anche se 3D non rientra nell'ambito di questo articolo.
Core Animation
iOS usa il framework Core Animation per creare effetti di animazione come la transizione tra visualizzazioni, menu scorrevoli ed effetti di scorrimento per citarne alcuni. Esistono due modi per usare l'animazione:
- Tramite UIKit, che include animazioni basate sulla visualizzazione e transizioni animate tra controller.
- Tramite l'animazione core, che consente direttamente il controllo con granularità più fine.
Uso dell'animazione UIKit
UIKit offre diverse funzionalità che semplificano l'aggiunta di animazioni a un'applicazione. Anche se usa l'animazione core internamente, lo astrae in modo da lavorare solo con visualizzazioni e controller.
Questa sezione illustra le funzionalità di animazione UIKit, tra cui:
- Transizioni tra controller
- Transizioni tra visualizzazioni
- Visualizzare l'animazione delle proprietà
Transizioni dei controller di visualizzazione
UIViewController fornisce il supporto predefinito per la transizione tra controller di visualizzazione tramite il PresentViewController metodo . Quando si usa PresentViewController, la transizione al secondo controller può essere facoltativamente animata.
Si consideri, ad esempio, un'applicazione con due controller, in cui toccare un pulsante nella prima chiamata PresentViewController del controller per visualizzare un secondo controller. Per controllare l'animazione di transizione usata per mostrare il secondo controller, è sufficiente impostarne la ModalTransitionStyle proprietà come illustrato di seguito:
SecondViewController vc2 = new SecondViewController {
ModalTransitionStyle = UIModalTransitionStyle.PartialCurl
};
In questo caso viene usata un'animazione PartialCurl , anche se sono disponibili diverse altre, tra cui:
CoverVertical– Scorre verso l'alto dalla parte inferiore della schermataCrossDissolve– La vecchia vista si dissolve e la nuova vista si dissolve inFlipHorizontal- Capovolgimento orizzontale da destra a sinistra. In caso di chiusura, la transizione capovolge da sinistra a destra.
Per animare la transizione, passare true come secondo argomento a PresentViewController:
PresentViewController (vc2, true, null);
Lo screenshot seguente mostra l'aspetto della transizione nel PartialCurl caso:
Visualizzare le transizioni
Oltre alle transizioni tra controller, UIKit supporta anche le transizioni di animazione tra le visualizzazioni per scambiare una visualizzazione per un'altra.
Si supponga, ad esempio, di avere un controller con UIImageView, dove toccando l'immagine dovrebbe essere visualizzato un secondo UIImageView. Per animare la superview della visualizzazione immagini per passare alla seconda visualizzazione immagine è semplice come chiamare UIView.Transition, passandolo toView e fromView come illustrato di seguito:
UIView.Transition (
fromView: view1,
toView: view2,
duration: 2,
options: UIViewAnimationOptions.TransitionFlipFromTop |
UIViewAnimationOptions.CurveEaseInOut,
completion: () => { Console.WriteLine ("transition complete"); });
UIView.Transition accetta anche un duration parametro che controlla per quanto tempo viene eseguita l'animazione, nonché options per specificare elementi come l'animazione da usare e la funzione di interpolazione. Inoltre, puoi specificare un gestore di completamento che verrà chiamato al termine dell'animazione.
Lo screenshot seguente mostra la transizione animata tra le visualizzazioni immagine quando TransitionFlipFromTop viene usata:
Visualizza animazioni delle proprietà
UIKit supporta l'animazione di un'ampia gamma di proprietà nella UIView classe gratuitamente, tra cui:
- Frame
- Bounds
- Centro
- Alfa
- Trasformazione
- Color
Queste animazioni vengono eseguite in modo implicito specificando le modifiche delle proprietà in un NSAction delegato passato al metodo statico UIView.Animate . Ad esempio, il codice seguente anima il punto centrale di un UIImageViewoggetto :
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; }
);
Ciò comporta un'animazione di immagini all'indietro e all'indietro nella parte superiore dello schermo, come illustrato di seguito:
Come per il Transition metodo , Animate consente di impostare la durata, insieme alla funzione di interpolazione. In questo esempio è stata usata anche l'opzione UIViewAnimationOptions.Autoreverse , che fa sì che l'animazione torni dal valore a quella iniziale. Tuttavia, il codice imposta nuovamente il Center valore iniziale in un gestore di completamento. Mentre un'animazione esegue l'interpolazione dei valori delle proprietà nel tempo, il valore effettivo del modello della proprietà è sempre il valore finale impostato. In questo esempio, il valore è un punto vicino al lato destro della superview. Senza impostare l'oggetto Center sul punto iniziale, in cui l'animazione viene completata a causa dell'impostazione Autoreverse , l'immagine viene agganciata al lato destro dopo il completamento dell'animazione, come illustrato di seguito:
Uso dell'animazione core
UIView le animazioni consentono molte funzionalità e devono essere usate, se possibile, a causa della facilità di implementazione. Come accennato in precedenza, le animazioni UIView usano il framework di animazione principale. Tuttavia, alcune operazioni non possono essere eseguite con UIView le animazioni, ad esempio l'animazione di proprietà aggiuntive che non possono essere animate con una visualizzazione o l'interpolazione lungo un percorso non lineare. In questi casi in cui è necessario un controllo più corretto, l'animazione core può essere usata direttamente.
Strati
Quando si usa l'animazione core, l'animazione avviene tramite livelli, che sono di tipo CALayer. Un livello è concettualmente simile a una visualizzazione in quanto esiste una gerarchia di livelli, in modo analogo a una gerarchia di viste. In realtà, livelli indietro visualizzazioni, con la visualizzazione che aggiunge il supporto per l'interazione dell'utente. È possibile accedere al livello di qualsiasi visualizzazione tramite la proprietà della Layer visualizzazione. Infatti, il contesto usato nel Draw metodo di UIView viene effettivamente creato dal livello. Internamente, il livello che esegue il backup di un oggetto UIView ha il relativo delegato impostato sulla visualizzazione stessa, ovvero ciò che chiama Draw. Quindi, quando si disegna in un UIViewoggetto , si disegna effettivamente al suo livello.
Le animazioni livello possono essere implicite o esplicite. Le animazioni implicite sono dichiarative. Devi semplicemente dichiarare le proprietà del livello da modificare e l'animazione funziona. Le animazioni esplicite vengono invece create tramite una classe di animazione aggiunta a un livello. Le animazioni esplicite consentono di controllare la modalità di creazione di un'animazione. Le sezioni seguenti illustrano in modo più approfondito le animazioni implicite ed esplicite.
Animazioni implicite
Un modo per animare le proprietà di un livello consiste nell'usare un'animazione implicita. UIView le animazioni creano animazioni implicite. Tuttavia, è possibile creare animazioni implicite direttamente su un livello.
Ad esempio, il codice seguente imposta un livello da un'immagine Contents , imposta una larghezza e un colore del bordo e aggiunge il livello come sottostrato del livello della visualizzazione:
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);
}
Per aggiungere un'animazione implicita per il livello, è sufficiente eseguire il wrapping delle modifiche delle proprietà in un oggetto CATransaction. In questo modo è possibile animare le proprietà che non sarebbero animabili con un'animazione BorderWidth di visualizzazione, ad esempio e BorderColor come illustrato di seguito:
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 ();
}
Questo codice anima anche il livello , Positionovvero la posizione del punto di ancoraggio del livello misurato dall'alto a sinistra delle coordinate del superlayer. Il punto di ancoraggio di un livello è un punto normalizzato all'interno del sistema di coordinate del livello.
La figura seguente mostra la posizione e il punto di ancoraggio:
Quando viene eseguito l'esempio, PositionBorderWidth e BorderColor animano come illustrato negli screenshot seguenti:
Animazioni esplicite
Oltre alle animazioni implicite, l'animazione core include un'ampia gamma di classi che ereditano da CAAnimation che consentono di incapsulare le animazioni che vengono quindi aggiunte in modo esplicito a un livello. Questi consentono un controllo più granulare sulle animazioni, ad esempio modificando il valore iniziale di un'animazione, raggruppando le animazioni e specificando fotogrammi chiave per consentire percorsi non lineari.
Il codice seguente mostra un esempio di animazione esplicita usando un CAKeyframeAnimation per il livello illustrato in precedenza (nella sezione Animazione implicita):
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");
}
Questo codice modifica l'oggetto Position del livello creando un percorso che viene quindi usato per definire un'animazione basata su fotogrammi chiave. Si noti che il livello è Position impostato sul valore finale dell'oggetto Position dall'animazione. Senza questo, il livello tornerebbe improvvisamente alla sua Position prima dell'animazione perché l'animazione modifica solo il valore della presentazione e non il valore effettivo del modello. Impostando il valore del modello sul valore finale dell'animazione, il livello rimane al suo posto alla fine dell'animazione.
Gli screenshot seguenti mostrano il livello contenente l'animazione dell'immagine tramite il percorso specificato:
Riepilogo
In questo articolo sono state esaminate le funzionalità di animazione fornite tramite i framework di animazione di base. Abbiamo esaminato l'animazione core, che mostra come alimenta le animazioni in UIKit e come può essere usata direttamente per il controllo di animazione di livello inferiore.