Aracılığıyla paylaş

Xamarin.iOS'ta Çekirdek Grafikleri ve Çekirdek Animasyonu Kullanma

Bu kılavuzda, dokunma girişine yanıt olarak Core Graphics kullanarak bir yol çizeceğiz. Ardından, yol boyunca animasyon ekleyeceğimiz bir görüntü ekleyeceğiz CALayer .

Aşağıdaki ekran görüntüsünde tamamlanmış uygulama gösterilmektedir:

Tamamlanan uygulama

Yol Çizme

  1. içinde DemoView sınıfına bir CGPath değişken ekleyin ve oluşturucuda bu değişkenin örneğini sağlayın. Ayrıca, yolu oluşturacağımız dokunma noktasını yakalamak için kullanacağımız , ve latestPointadlı iki CGPoint değişkeni initialPoint de bildirin:

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

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Aşağıdaki kullanım yönergelerini ekleyin:

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Ardından, ilk dokunma noktasını ve TouchesMoved, sonraki her dokunma noktasını sırasıyla yakalamak için aşağıdaki uygulamaları geçersiz kılın TouchesBegan ve ekleyin:

    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 bir sonraki çalıştırma döngüsü geçişinde çağrılmak üzere Draw dokunmalar her hareketinde çağrılır.

  4. Yöntemindeki Draw yola çizgiler ekleyecek ve çizmek için kırmızı, kesikli çizgi kullanacağız. Aşağıda gösterilen kodla uygulayın Draw :

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

Uygulamayı şimdi çalıştırırsak, aşağıdaki ekran görüntüsünde gösterildiği gibi ekrana çizim yapmak için dokunabiliriz:

Ekranda çizim

Yol Boyunca Animasyon Oluşturma

Kullanıcıların yolu çizmesine izin vermek için kodu uygulamaya aldığımıza göre, çizilen yol boyunca bir katmana animasyon eklemek için kodu ekleyelim.

  1. İlk olarak, sınıfına bir CALayer değişken ekleyin ve oluşturucuda oluşturun:

    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. Ardından, kullanıcı parmağı ekrandan yukarı kaldırdığında katmanı görünümün katmanının alt katmanı olarak ekleyeceğiz. Ardından, yolunu kullanarak katmanın Positionanimasyonunu gösteren bir ana kare animasyonu oluşturacağız.

    Bunu başarmak için öğesini geçersiz kılmamız TouchesEnded ve aşağıdaki kodu eklememiz gerekir:

    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. Uygulamayı şimdi çalıştırın ve çizimden sonra, resim içeren bir katman eklenir ve çizilen yol boyunca ilerler:

Resim içeren bir katman eklenir ve çizilen yol boyunca ilerler

Özet

Bu makalede grafik ve animasyon kavramlarını birbirine bağlayan bir örneği adım adım inceledik. İlk olarak, kullanıcı dokunuşlarına yanıt olarak bir yol UIView çizmek için Core Graphics'in nasıl kullanılacağını gösterdik. Ardından, bir görüntünün bu yol boyunca hareket etmelerini sağlamak için Çekirdek Animasyon'un nasıl kullanılacağını gösterdik.

  • Last updated on