Wie mache ich eine kreisförmige Ansicht kollidieren mit dem Paddel

Question

Immer wenn die kreisförmige Ansicht mit dem Paddel auf Storyboard kollidiert, kollidiert es tatsächlich mit dem rechteckigen Rahmen der Ansicht. Wie behebe ich dieses Problem? Ich habe auch versucht UIBezierPath, CAShapeLayer und es scheint nicht zu funktionieren.

Der rote Pfeil ist der kollidierende Punkt, da er nicht mit der Kugel kollidiert, sondern mit dem Rahmen der Ansicht kollidiert. einmal wird der Rahmen mit dem Paddel berührt, das springt zurück und so weiter.

Answer 1

Wenn Sie UIDynamicAnimator verwenden, können Sie die collisionBoundsType und die collisionBoundingPath für die Elemente definieren, die zum Beispiel wird kollidieren:

@IBDesignable public class BallView : UIView { 

    @IBInspectable public var fillColor: UIColor = UIColor.blackColor() { 
     didSet { setNeedsLayout() } 
    } 

    override public var collisionBoundsType: UIDynamicItemCollisionBoundsType { 
     return .Path 
    } 

    override public var collisionBoundingPath: UIBezierPath { 
     let radius = min(bounds.size.width, bounds.size.height)/2.0 

     return UIBezierPath(arcCenter: CGPointZero, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true) 
    } 

    private var shapeLayer: CAShapeLayer! 

    public override func layoutSubviews() { 
     if shapeLayer == nil { 
      shapeLayer = CAShapeLayer() 
      shapeLayer.strokeColor = UIColor.clearColor().CGColor 
      layer.addSublayer(shapeLayer) 
     } 

     let radius = min(bounds.size.width, bounds.size.height)/2.0 

     shapeLayer.fillColor = fillColor.CGColor 
     shapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: bounds.size.width/2.0, y: bounds.size.height/2.0), radius: radius, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true).CGPath 
    } 
} 

@IBDesignable public class PaddleView : UIView { 

    @IBInspectable public var cornerRadius: CGFloat = 5 { 
     didSet { setNeedsLayout() } 
    } 

    @IBInspectable public var fillColor: UIColor = UIColor.blackColor() { 
     didSet { setNeedsLayout() } 
    } 

    override public var collisionBoundsType: UIDynamicItemCollisionBoundsType { 
     return .Path 
    } 

    override public var collisionBoundingPath: UIBezierPath { 
     return UIBezierPath(roundedRect: CGRect(x: -bounds.size.width/2.0, y: -bounds.size.height/2.0, width: bounds.width, height: bounds.height), cornerRadius: cornerRadius) 
    } 

    private var shapeLayer: CAShapeLayer! 

    public override func layoutSubviews() { 
     if shapeLayer == nil { 
      shapeLayer = CAShapeLayer() 
      shapeLayer.strokeColor = UIColor.clearColor().CGColor 
      layer.addSublayer(shapeLayer) 
     } 

     shapeLayer.fillColor = fillColor.CGColor 
     shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height), cornerRadius: cornerRadius).CGPath 
    } 
} 

Wenn Sie dies tun, und fügen Sie dann Diese Artikel an Ihre UICollisionBehavior, wird es die Kollisionsgrenzen, die Sie für die Elemente definiert respektieren. Zum Beispiel:

---

Die oben zeigt einen Blick Schlag, wie im Originalbild. Wenn Sie es wünschen, auch auf die Beine, wenn er den Rand des Paddels trifft, können Sie die collisionDelegate für die UICollisionBehavior angeben und eine neue Richtung geben:

let collision = UICollisionBehavior(items: [paddleView, ballView]) 
collision.translatesReferenceBoundsIntoBoundary = true 
collision.collisionDelegate = self 
self.animator.addBehavior(collision) 

und entsprechen UICollisionBehaviorDelegate und dann implementieren collisionBehavior(beganContactForItem:withItem:atPoint:):

func collisionBehavior(behavior: UICollisionBehavior, beganContactForItem item1: UIDynamicItem, withItem item2: UIDynamicItem, atPoint p: CGPoint) { 
    let postCollisionDirection = UIDynamicItemBehavior(items: [ballView]) 
    postCollisionDirection.addLinearVelocity(CGPoint(x: ballView.center.x - paddleView.center.x, y: -200), forItem: ballView) 
    animator.addBehavior(postCollisionDirection) 
} 

, dass so etwas ergibt:

Natürlich müssen Sie damit ziemlich herumspielen, um den gewünschten Effekt zu erzielen, aber es veranschaulicht die Grundidee, eine Kollision zu erkennen und dem Ball entsprechend eine lineare Geschwindigkeit hinzuzufügen.

Answer 2

Eine noch einfachere Antwort als die akzeptierte Antwort wäre, die Grenzen zu setzen, anstatt einen definierten Weg elliptisch zu sein:

override public var collisionBoundsType: UIDynamicItemCollisionBoundsType { 
     return .Elliptical 
}