Question

我正在编写一个应用程序，我使用UIKit Dynamics来模拟不同圈子之间的互动。

我使用以下代码创建我的圈子：

self = [super initWithFrame:CGRectMake(location.x - radius/2.0, location.y - radius/2, radius, radius)];
if (self) {
    [self.layer setCornerRadius: radius /2.0f];
    self.clipsToBounds = YES;
    self.layer.masksToBounds = YES;
    self.backgroundColor = color;
    self.userInteractionEnabled = NO;
}
return self;

其中location表示圆的所需位置，半径表示半径。

然后我通过执行以下操作将这些圈子添加到不同的UIBehaviours：

[_collision addItem:circle];
[_gravity addItem:circle];
[_itemBehaviour addItem:circle];

itemBaviour定义如下：

_itemBehaviour = [[UIDynamicItemBehavior alloc] initWithItems:@[square]];
_itemBehaviour.elasticity = 1;
_itemBehaviour.friction = 0;
_itemBehaviour.resistance = 0;
_itemBehaviour.angularResistance = 0;
_itemBehaviour.allowsRotation = NO;

我遇到的问题是，我的圈子表现为正方形。当以某种方式击中时，它们会获得角动量并失去速度。如果它们再次碰撞，有时角动量再次恢复到速度。这对于正方形来说看起来很正常，但是当视图是圆的时候，就像在我的情况下一样，这种行为看起来很奇怪而且不自然。

打开一些调试选项，我制作了这个截图： small circle is actually a square

如您所见，圆圈显然是一个正方形。

所以我的问题是，如何创建一个真正的圆形UIVIew并在UIKit Dynamics中表现如此？

Answer 1

我知道这个问题早于iOS 9，但为了未来读者的利益，您现在可以使用UIDynamicItemCollisionBoundsTypePath UIView和循环collisionBoundsType来定义视图。

所以，虽然你不能“创建一个真正是圆形的@interface CircleView: UIView @property (nonatomic) CGFloat lineWidth; @property (nonatomic, strong) CAShapeLayer *shapeLayer; @end @implementation CircleView - (instancetype)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { [self configure]; } return self; } - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self configure]; } return self; } - (instancetype)init { return [self initWithFrame:CGRectZero]; } - (void)configure { self.translatesAutoresizingMaskIntoConstraints = false; // create shape layer for circle self.shapeLayer = [CAShapeLayer layer]; self.shapeLayer.strokeColor = [[UIColor blueColor] CGColor]; self.shapeLayer.fillColor = [[[UIColor blueColor] colorWithAlphaComponent:0.5] CGColor]; self.lineWidth = 3; [self.layer addSublayer:self.shapeLayer]; } - (void)layoutSubviews { [super layoutSubviews]; // path of shape layer is with respect to center of the `bounds` CGPoint center = CGPointMake(self.bounds.origin.x + self.bounds.size.width / 2, self.bounds.origin.y + self.bounds.size.height / 2); self.shapeLayer.path = [[self circularPathWithLineWidth:self.lineWidth center:center] CGPath]; } - (UIDynamicItemCollisionBoundsType)collisionBoundsType { return UIDynamicItemCollisionBoundsTypePath; } - (UIBezierPath *)collisionBoundingPath { // path of collision bounding path is with respect to center of the dynamic item, so center of this path will be CGPointZero return [self circularPathWithLineWidth:0 center:CGPointZero]; } - (UIBezierPath *)circularPathWithLineWidth:(CGFloat)lineWidth center:(CGPoint)center { CGFloat radius = (MIN(self.bounds.size.width, self.bounds.size.height) - self.lineWidth) / 2; return [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:true]; } @end，但你可以定义一个路径来定义在视图内部渲染的形状以及动画师的碰撞边界，屈服圆视图的效果（即使视图本身显然仍然是矩形，因为所有视图都是）：

collisionBoundingPath

然后，当你进行碰撞时，它会尊重self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; // create circle views CircleView *circle1 = [[CircleView alloc] initWithFrame:CGRectMake(60, 100, 80, 80)]; [self.view addSubview:circle1]; CircleView *circle2 = [[CircleView alloc] initWithFrame:CGRectMake(250, 150, 120, 120)]; [self.view addSubview:circle2]; // have them collide with each other UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[circle1, circle2]]; [self.animator addBehavior:collision]; // with perfect elasticity UIDynamicItemBehavior *behavior = [[UIDynamicItemBehavior alloc] initWithItems:@[circle1, circle2]]; behavior.elasticity = 1; [self.animator addBehavior:behavior]; // and push one of the circles UIPushBehavior *push = [[UIPushBehavior alloc] initWithItems:@[circle1] mode:UIPushBehaviorModeInstantaneous]; [push setAngle:0 magnitude:1]; [self.animator addBehavior:push];值：

class CircleView: UIView {
    var lineWidth: CGFloat = 3

    var shapeLayer: CAShapeLayer = {
        let _shapeLayer = CAShapeLayer()
        _shapeLayer.strokeColor = UIColor.blue.cgColor
        _shapeLayer.fillColor = UIColor.blue.withAlphaComponent(0.5).cgColor
        return _shapeLayer
    }()

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.addSublayer(shapeLayer)
        shapeLayer.lineWidth = lineWidth
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        shapeLayer.path = circularPath(lineWidth: lineWidth, center: center).cgPath
    }

    private func circularPath(lineWidth: CGFloat = 0, center: CGPoint = .zero) -> UIBezierPath {
        let radius = (min(bounds.width, bounds.height) - lineWidth) / 2
        return UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
    }

    override var collisionBoundsType: UIDynamicItemCollisionBoundsType { return .path }

    override var collisionBoundingPath: UIBezierPath { return circularPath() }
}

class ViewController: UIViewController {

    let animator = UIDynamicAnimator()

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let circle1 = CircleView(frame: CGRect(x: 60, y: 100, width: 80, height: 80))
        view.addSubview(circle1)

        let circle2 = CircleView(frame: CGRect(x: 250, y: 150, width: 120, height: 120))
        view.addSubview(circle2)

        animator.addBehavior(UICollisionBehavior(items: [circle1, circle2]))

        let behavior = UIDynamicItemBehavior(items: [circle1, circle2])
        behavior.elasticity = 1
        animator.addBehavior(behavior)

        let push = UIPushBehavior(items: [circle1], mode: .instantaneous)
        push.setAngle(0, magnitude: 1)
        animator.addBehavior(push)
    }

}

产量：

collisionBoundingPath

顺便说一下，应该注意概述了路径的一些限制：

您创建的路径对象必须表示逆时针或顺时针缠绕的凸多边形，并且路径不得与自身相交。路径的（0,0）点必须位于相应动态项的the documentation点。如果中心点与路径的原点不匹配，则碰撞行为可能无法按预期工作。

但是简单的圆形路径很容易满足这些标准。

或者，对于Swift用户：

{{1}}

Answer 2

好的，首先关闭。

您启用的调试选项显示透明单元格的区域。作为圆的视图实际上是具有圆边的正方形。

所有视图都是矩形的。它们呈圆形的方式是使角落透明（因此角半径）。

其次，你在尝试用UIKit Dynamics做什么？屏幕上的内容看起来像是在尝试创建某种类型的游戏。

动态意味着用于更自然，更真实的UI动画。它并不意味着是一个全面的物理引擎。

如果您想要这样的话，那么您最好使用Sprite Kit。

UIKit Dynamics：识别圆形形状和边界

2 个答案: