Partager via

Utilisation des graphiques de base et de l’animation principale dans Xamarin.iOS

  • Article

Pour cette procédure pas à pas, nous allons dessiner un chemin à l’aide de Core Graphics en réponse à l’entrée tactile. Ensuite, nous allons ajouter une CALayer image contenant une image que nous animerons le long du chemin.

La capture d’écran suivante présente l’application terminée :

Application terminée

Dessin d’un chemin

  1. Ajoutez DemoView une CGPath variable à la classe et instanciez-la dans le constructeur. Déclarez également deux CGPoint variables etlatestPointinitialPoint, que nous allons utiliser pour capturer le point tactile à partir duquel nous construisons le chemin :

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

    public DemoView ()
    {
        BackgroundColor = UIColor.White;

        path = new CGPath ();
    }
}

  2. Ajoutez les directives using suivantes :

    using CoreGraphics;
using CoreAnimation;
using Foundation;

  3. Ensuite, remplacez TouchesBegan et TouchesMoved, ajoutez les implémentations suivantes pour capturer le point tactile initial et chaque point tactile suivant respectivement :

    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 sera appelé chaque fois que les touches se déplacent afin Draw d’être appelées sur la passe de boucle d’exécution suivante.

  4. Nous allons ajouter des lignes au chemin d’accès dans la Draw méthode et utiliser une ligne rouge et en pointillés pour dessiner avec. Implémentez Draw avec le code indiqué ci-dessous :

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

Si nous exécutons l’application maintenant, nous pouvons toucher pour dessiner sur l’écran, comme illustré dans la capture d’écran suivante :

Dessin sur l’écran

Animation le long d’un chemin

Maintenant que nous avons implémenté le code pour permettre aux utilisateurs de dessiner le chemin, nous allons ajouter le code pour animer une couche le long du chemin dessiné.

  1. Tout d’abord, ajoutez une CALayer variable à la classe et créez-la dans le constructeur :

    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. Ensuite, nous allons ajouter la couche en tant que sous-couche de la couche de la vue lorsque l’utilisateur soulève son doigt à partir de l’écran. Ensuite, nous allons créer une animation d’images clés à l’aide du chemin d’accès Position, animant le calque.

    Pour ce faire, nous devons remplacer le TouchesEnded code et ajouter le code suivant :

    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. Exécutez l’application maintenant et après le dessin, une couche avec une image est ajoutée et se déplace le long du tracé dessiné :

Une couche avec une image est ajoutée et se déplace le long du tracé dessiné

Résumé

Dans cet article, nous avons parcouru un exemple qui a lié des concepts graphiques et d’animation ensemble. Tout d’abord, nous avons montré comment utiliser Core Graphics pour dessiner un chemin dans une UIView réponse à l’interaction utilisateur. Ensuite, nous avons montré comment utiliser Core Animation pour faire un voyage d’image le long de ce chemin.