Использование основной графической и основной анимации в Xamarin. iOSUsing Core Graphics and Core Animation in Xamarin.iOS

В этом пошаговом руководстве мы будем нарисовать контур, используя основные графические объекты, в ответ на сенсорный ввод.For this walkthrough we are going to draw a path using Core Graphics in response to touch input. Затем мы добавим объект CALayer , содержащий изображение, которое будет анимировано вдоль пути.Then, we will add a CALayer containing an image that we will animate along the path.

На следующем снимке экрана показано готовое приложение:The following screenshot shows the completed application:

Перед началом загрузки образца графиксдемо , прилагаемого к этому руководству.Before we begin download the GraphicsDemo sample that accompanies this guide. Его можно скачать здесь и найти в каталоге графиксвалксраугх . Запустите проект с именем GraphicsDemo_starter , дважды щелкнув DemoView его, и откройте класс.It can be downloaded here and is located inside the GraphicsWalkthrough directory Launch the project named GraphicsDemo_starter by double-clicking on it, and open the DemoView class.

Рисование контураDrawing a Path

  1. DemoView ВCGPath добавьте переменную в класс и создайте ее экземпляр в конструкторе.In DemoView add a CGPath variable to the class and instantiate it in the constructor. Также объявите CGPoint две initialPoint переменные и latestPoint, которые будут использоваться для захвата сенсорной точки, из которой строится путь:Also declare two CGPoint variables , initialPoint and latestPoint, that we will use to capture the touch point from which we construct the path:

    public class DemoView : UIView
    {
        CGPath path;
        CGPoint initialPoint;
        CGPoint latestPoint;
    
        public DemoView ()
        {
            BackgroundColor = UIColor.White;
    
            path = new CGPath ();
        }
    }
    
  2. Добавьте следующие директивы using:Add the following using directives:

    using CoreGraphics;
    using CoreAnimation;
    using Foundation;
    
  3. Затем переопределите TouchesBegan и TouchesMoved, добавьте следующие реализации для захвата начальной сенсорной точки и каждой последующей сенсорной точки соответственно:Next, override TouchesBegan and TouchesMoved, and add the following implementations to capture the initial touch point and each subsequent touch point respectively:

    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будет вызываться каждый раз при перемещении Draw , чтобы их можно было вызывать при следующем передаче цикла выполнения.SetNeedsDisplay will be called each time touches move in order for Draw to be called on the next run loop pass.

  4. Мы будем добавлять строки к пути в Draw методе и использовать красную пунктирную линию для рисования.We’ll add lines to the path in the Draw method and use a red, dashed line to draw with. Draw Реализуйте с кодом, показанным ниже:Implement Draw with the code shown below:

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

Если запустить приложение сейчас, можно нарисовать экран на экране, как показано на следующем снимке экрана:If we run the application now, we can touch to draw on the screen, as shown in the following screenshot:

Анимация вдоль путиAnimating Along a Path

Теперь, когда мы реализовали код, чтобы пользователи могли нарисовать контур, добавим код для анимации слоя вдоль рисуемого контура.Now that we have implemented the code to allow users to draw the path, let’s add the code to animate a layer along the drawn path.

  1. Сначала добавьте CALayer переменную в класс и создайте ее в конструкторе:First, add a CALayer variable to the class and create it in the constructor:

    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. Далее мы добавим слой в качестве подслоя слоя представления, когда пользователь отрывает свой палец с экрана.Next, we’ll add the layer as a sublayer of the view’s layer when the user lifts up their finger from the screen. Затем мы создадим анимацию опорного кадра с помощью пути, и анимировать слой Position.Then, we will create a keyframe animation using the path, animating the layer’s Position.

    Для этого необходимо переопределить TouchesEnded и добавить следующий код:To accomplish this we need to override the TouchesEnded and add the following code:

    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. Запустить приложение сейчас и после рисования. слой с изображением добавляется и перемещается по изображенному пути:Run the application now and after drawing, a layer with an image is added and travels along the drawn path:

СводкаSummary

В этой статье мы пошаговым примером того, как вместе связаны концепции графики и анимации.In this article, we stepped through an example that tied graphics and animation concepts together. Во- UIView первых, мы показали, как использовать основные графические изображения для рисования пути в в ответ на касание пользователя.First, we showed how to use Core Graphics to draw a path in a UIView in response to user touch. Затем мы показали, как использовать основную анимацию для перемещения изображения по этому пути.Then we showed how to use Core Animation to make an image travel along that path.