Udostępnij za pośrednictwem

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ę:

Ukończona aplikacja

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:

Rysowanie na ekranie

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:

Warstwa z obrazem jest dodawana i porusza się wzdłuż narysowanej ścieżki

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.