Korzystanie z podstawowej grafiki i animacji rdzeni w środowisku Xamarin.iOS

  • Artykuł

W tym przewodniku narysujemy ścieżkę przy użyciu podstawowej grafiki w odpowiedzi na dane wejściowe dotyku. Następnie dodamy CALayer obraz zawierający obraz, który będziemy animować na ścieżce.

Poniższy zrzut ekranu przedstawia ukończoną aplikację:

The completed application

Przed rozpoczęciem pobierania przykładu GraphicsDemo , który towarzyszy temu przewodnikowi. Można go pobrać tutaj i znajduje się w katalogu GraphicsWalkthrough Uruchom projekt o nazwie GraphicsDemo_starter, klikając go dwukrotnie i otwórz klasęDemoView.

Rysowanie ścieżki

  1. W DemoView pliku dodaj zmienną CGPath do klasy i utwórz jej wystąpienie w konstruktorze. Zadeklaruj również dwie CGPoint zmienne , initialPoint i latestPoint, które będą używane do przechwytywania punktu dotykowego, z którego skonstruujemy ścieżkę:

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

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Dodaj następujące dyrektywy using:

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Następnie przesłoń i TouchesMoved, dodaj następujące implementacje TouchesBegan w celu przechwycenia początkowego punktu dotykowego i każdego kolejnego punktu dotykowego odpowiednio:

    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 funkcja będzie wywoływana za każdym razem, gdy dotknięcia zostaną przeniesione w celu Draw wywołania na następnym przebiegu pętli przebiegu.

  4. Dodamy wiersze do ścieżki w Draw metodzie i użyjemy czerwonej linii kreskowanej do narysowania. Zaimplementuj Draw za pomocą kodu pokazanego poniżej:

    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);
        }
    }
}

Jeśli teraz uruchomimy aplikację, możemy dotknąć, aby rysować na ekranie, jak pokazano na poniższym zrzucie ekranu:

Drawing on the screen

Animowanie wzdłuż ścieżki

Teraz, gdy zaimplementowaliśmy kod, aby umożliwić użytkownikom rysowanie ścieżki, dodajmy kod, aby animować warstwę wzdłuż ścieżki rysunkowej.

  1. Najpierw dodaj zmienną CALayer do klasy i utwórz ją w konstruktorze:

    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. Następnie dodamy warstwę jako podwarstwową warstwy widoku, gdy użytkownik podnosi palec z ekranu. Następnie utworzymy animację ramki kluczy przy użyciu ścieżki, animując warstwy Position.

    Aby to osiągnąć, musimy zastąpić element TouchesEnded i dodać następujący kod:

    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. Uruchom aplikację teraz i po rysunku dodawana jest warstwa z obrazem i jest przenoszona wzdłuż narysowanej ścieżki:

A layer with an image is added and travels along the drawn path

Podsumowanie

W tym artykule omówiliśmy przykład związany ze sobą koncepcje związane z grafiką i animacją. Najpierw pokazaliśmy, jak za pomocą grafiki Core rysować ścieżkę w UIView odpowiedzi na dotyk użytkownika. Następnie pokazaliśmy, jak używać animacji core do tworzenia podróży obrazu wzdłuż tej ścieżki.