共用方式為


在 Xamarin.iOS 中使用核心圖形和核心動畫

在本逐步解說中,我們將使用核心圖形繪製路徑,以響應觸控輸入。 然後,我們將新增 CALayer ,其中包含我們將沿著路徑產生動畫效果的影像。

下列螢幕快照顯示已完成的應用程式:

已完成的應用程式

繪製路徑

  1. DemoView 中,將變數新增 CGPath 至 類別,並在建構函式中具現化它。 同時宣告兩個CGPoint變數 和 latestPointinitialPoint ,我們將用來擷取我們建構路徑的觸控點:

    public class DemoView : UIView
    {
        CGPath path;
        CGPoint initialPoint;
        CGPoint latestPoint;
    
        public DemoView ()
        {
            BackgroundColor = UIColor.White;
    
            path = new CGPath ();
        }
    }
    
  2. 使用指示詞新增以下項目:

    using CoreGraphics;
    using CoreAnimation;
    using Foundation;
    
  3. 接下來,覆寫 TouchesBegan 和 並 TouchesMoved, 新增下列實作,分別擷取初始觸控點和每個後續觸控點:

    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 下一個執行循環傳遞上呼叫 。

  4. 我們會將線條新增至 方法中的 Draw 路徑,並使用紅色虛線來繪製 。 使用如下所示的程式代碼來實 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);
            }
        }
    }
    

如果我們現在執行應用程式,我們可以觸控以在畫面上繪製,如下列螢幕快照所示:

在畫面上繪製

沿著路徑產生動畫

既然我們已經實作程式代碼以允許使用者繪製路徑,讓我們新增程式代碼以動畫顯示沿著繪製路徑的圖層。

  1. 首先,將變數新增 CALayer 至 類別,並在建構函式中建立變數:

    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. 接下來,當使用者從螢幕抬起手指時,我們會將圖層新增為檢視層次的子圖層。 然後,我們將使用路徑建立主要畫面格動畫,以動畫顯示層次的 Position

    若要完成這項作業,我們需要覆寫 TouchesEnded 並新增下列程序代碼:

    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. 立即執行應用程式,並在繪圖之後新增具有影像的圖層,並沿著繪製路徑移動:

新增具有影像的圖層,並沿著繪製路徑移動

摘要

在本文中,我們逐步解說了將圖形和動畫概念系結在一起的範例。 首先,我們示範如何使用核心圖形來繪製路徑, UIView 以響應用戶觸控。 然後,我們示範如何使用核心動畫,讓影像沿著該路徑移動。