Condividi tramite

Uso della grafica principale e dell'animazione core in Xamarin.iOS

  • Articolo

Per questa procedura dettagliata verrà disegnato un percorso usando Core Graphics in risposta all'input tocco. Si aggiungerà quindi un oggetto contenente un'immagine CALayer che verrà animata lungo il percorso.

In questo screenshot viene visualizzata l'applicazione completata:

Applicazione completata

Disegno di un percorso

  1. In DemoView aggiungere una CGPath variabile alla classe e crearne un'istanza nel costruttore . Dichiarare anche due CGPoint variabili , initialPoint e latestPoint, che verranno usate per acquisire il punto di tocco da cui si costruisce il percorso:

    public class DemoView : UIView
{
    CGPath path;
    CGPoint initialPoint;
    CGPoint latestPoint;

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Aggiungere le direttive using seguenti:

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Eseguire quindi l'override TouchesBegan e TouchesMoved, aggiungere le implementazioni seguenti per acquisire rispettivamente il punto di tocco iniziale e ogni punto di tocco successivo:

    public override void TouchesBegan (NSSet touches, UIEvent evt){

    base.TouchesBegan (touches, evt);

    UITouch touch = touches.AnyObject as UITouch;

    if (touch != null) {
        initialPoint = touch.LocationInView (this);
    }
}

public override void TouchesMoved (NSSet touches, UIEvent evt){

    base.TouchesMoved (touches, evt);

    UITouch touch = touches.AnyObject as UITouch;

    if (touch != null) {
        latestPoint = touch.LocationInView (this);
        SetNeedsDisplay ();
    }
}

    SetNeedsDisplay verrà chiamato ogni volta che si tocca lo spostamento per Draw poter essere chiamato al passaggio successivo del ciclo di esecuzione.

  4. Aggiungeremo linee al percorso nel Draw metodo e useremo una linea rossa tratteggiata con cui disegnare. Implementare Draw con il codice illustrato di seguito:

    public override void Draw (CGRect rect){

    base.Draw (rect);

    if (!initialPoint.IsEmpty) {

        //get graphics context
        using(CGContext g = UIGraphics.GetCurrentContext ()){

            //set up drawing attributes
            g.SetLineWidth (2);
            UIColor.Red.SetStroke ();

            //add lines to the touch points
            if (path.IsEmpty) {
                path.AddLines (new CGPoint[]{initialPoint, latestPoint});
            } else {
                path.AddLineToPoint (latestPoint);
            }

            //use a dashed line
            g.SetLineDash (0, new nfloat[] { 5, 2 * (nfloat)Math.PI });

            //add geometry to graphics context and draw it
            g.AddPath (path);
            g.DrawPath (CGPathDrawingMode.Stroke);
        }
    }
}

Se si esegue ora l'applicazione, è possibile toccare per disegnare sullo schermo, come illustrato nello screenshot seguente:

Disegno sullo schermo

Animazione lungo un percorso

Ora che è stato implementato il codice per consentire agli utenti di disegnare il percorso, aggiungere il codice per animare un livello lungo il percorso disegnato.

  1. Aggiungere prima di tutto una CALayer variabile alla classe e crearla nel costruttore :

    public class DemoView : UIView
    {
        …

        CALayer layer;

        public DemoView (){
            …

            //create layer
            layer = new CALayer ();
            layer.Bounds = new CGRect (0, 0, 50, 50);
            layer.Position = new CGPoint (50, 50);
            layer.Contents = UIImage.FromFile ("monkey.png").CGImage;
            layer.ContentsGravity = CALayer.GravityResizeAspect;
            layer.BorderWidth = 1.5f;
            layer.CornerRadius = 5;
            layer.BorderColor = UIColor.Blue.CGColor;
            layer.BackgroundColor = UIColor.Purple.CGColor;
        }

  2. Successivamente, si aggiungerà il livello come sottostrato del livello della visualizzazione quando l'utente solleva il dito dallo schermo. Si creerà quindi un'animazione basata su fotogrammi chiave usando il percorso, animando il livello .Position

    A tale scopo, è necessario eseguire l'override di TouchesEnded e aggiungere il codice seguente:

    public override void TouchesEnded (NSSet touches, UIEvent evt)
    {
        base.TouchesEnded (touches, evt);

        //add layer with image and animate along path

        if (layer.SuperLayer == null)
            Layer.AddSublayer (layer);

        // create a keyframe animation for the position using the path
        layer.Position = latestPoint;
        CAKeyFrameAnimation animPosition = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
        animPosition.Path = path;
        animPosition.Duration = 3;
        layer.AddAnimation (animPosition, "position");
    }

  3. Eseguire l'applicazione ora e dopo il disegno, viene aggiunto un livello con un'immagine e si sposta lungo il percorso disegnato:

Un livello con un'immagine viene aggiunto e viaggia lungo il percorso disegnato

Riepilogo

In questo articolo è stato illustrato un esempio che associa i concetti di grafica e animazione. In primo luogo, è stato illustrato come usare Core Graphics per disegnare un percorso in una UIView risposta al tocco dell'utente. Poi abbiamo illustrato come usare l'animazione core per fare un viaggio di un'immagine lungo tale percorso.