Xamarin.ios에서 핵심 그래픽 및 핵심 애니메이션 사용Using 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:

이 가이드와 함께 제공 되는 GraphicsDemo 샘플을 다운로드 하기 시작 합니다.Before we begin download the GraphicsDemo sample that accompanies this guide. 여기 에서 다운로드할 수 있으며 GraphicsWalkthrough 디렉터리 내에 있는 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 변수 initialPointlatestPoint를 선언 합니다.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. 그런 다음 TouchesBeganTouchesMoved,를 재정의 하 고 다음 구현을 추가 하 여 초기 터치 지점과 각 후속 터치 지점을 각각 캡처합니다.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 ();
        }
    }
    

    다음 실행 루프 패스에서 Draw를 호출 하기 위해 SetNeedsDisplay 때마다 이동 하는 경우에 호출 됩니다.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.