Question

我想构建一个简单的自定义视图，使用UIDynamicAnimator从底部向上滑动。

当应用加载时，我使用以下方法从屏幕上偏移视图：

panelWidth   = originView!.frame.size.width
panelHeight  = originView!.frame.size.height/2
screenHeight = originView!.frame.size.height

// Set the frame for the container of this view based on the parent
container.frame = CGRectMake(0, screenHeight, panelWidth, panelHeight)

为了设想这一点，我希望视图显示为：

|-----|
|     |
|  A  | <--- Main View 
|     | 
|-----|
|-----|
|  B  | <--- Second View (offset by screen height so it draws directly under (0,height))
|-----|

我设置了手势识别器来检测我何时向上和向下滑动（向上显示，向下滑动），但是现在视图从屏幕反弹，我似乎永远无法将其恢复。

使用我的动画师，我使用以下代码

animator.removeAllBehaviors()
isOpen = open

let gravityY:CGFloat  = (open) ? -0.5 : 0.5 
let gravityX:CGFloat  = 0  
let magnitude:CGFloat = (open) ? -20 : 20
let boundaryY:CGFloat = (open) ? -panelHeight : panelHeight
let boundaryX:CGFloat = (open) ? 0 : 0

在显示其余代码之前，我想我应该讨论我的常量。矢量数学不是我的强项，所以这可能是所有这一切都出错的唯一原因。当open为真时，我将值设置为负值，因为我想将视图设置回屏幕动画，这意味着向上动画，因此我假设我需要负重力。

我将boundaryY设置为面板的高度，因为我想将它设置为屏幕上的动画，仅限于窗口的高度，目前它从顶部飞过（当我调试屏幕高度= 667和panelHeight = 333.5时我不明白为什么它超过那个标记）

// animator behaviours - here I just create animaters on the panels container
let gravityBehaviour:UIGravityBehavior = UIGravityBehavior(items: [container])
let collisionBehaviour:UICollisionBehavior = UICollisionBehavior(items: [container])
let pushBehaviour:UIPushBehavior = UIPushBehavior(items: [container], mode: UIPushBehaviorMode.Instantaneous)
let panelBehaviour:UIDynamicItemBehavior = UIDynamicItemBehavior(items:[container])

// Gravity behaviour - I don't want it to move in X direction, only Y
gravityBehaviour.gravityDirection = CGVectorMake(gravityX, gravityY)

// collision detection - I think this is the major problem, how does this work...
collisionBehaviour.addBoundaryWithIdentifier("basePanelBoundary", fromPoint: CGPointMake(boundaryX, 0), toPoint: CGPointMake(boundaryX, boundaryY))

// push behaviours
pushBehaviour.magnitude = magnitude

// panel behaviours
panelBehaviour.elasticity = 0.3

// bind behaviours
animator.addBehavior(gravityBehaviour)
animator.addBehavior(collisionBehaviour)
animator.addBehavior(pushBehaviour)
animator.addBehavior(panelBehaviour)

我主要关注碰撞检测，因为我认为这是导致视图旋转并从屏幕上掉落的原因，我该如何解决？

Answer 1

经过一些进一步的研究后，我意识到我使用了太多的组件来实现我想要的动画，我也意识到我的边界定义不明确，这就是导致我的面板从窗户射击的原因。

为了解决这个问题，我首先修改了边界，以便它们与我在屏幕上指定的坐标共存：

collisionBehavior.addBoundaryWithIdentifier("upperBoundary", fromPoint: CGPointMake(0, screenHeight - panelHeight), toPoint: CGPointMake(boundaryX, screenHeight - panelHeight))
collisionBehavior.addBoundaryWithIdentifier("lowerBoundary", fromPoint: CGPointMake(0, screenHeight+panelHeight), toPoint: CGPointMake(boundaryX, screenHeight+panelHeight))

然后我根据open布尔值切换的值定义了一个重力向量，该值受到了影响：

let gravityY:CGFloat  = (open) ? -1.5 : 1.5
gravityBehavior.gravityDirection = CGVectorMake(0, gravityY)

最后，我将行为绑定到动画师，动画按预期工作。

总而言之，如果您是UIDynamics的新手，我建议您在潜水之前花一些时间在纸上并且弄脏代码，一旦我分解了这个问题，它就比我的第一次尝试容易得多。

工作代码

func showBasePanel(open:Bool)
{
    animator.removeAllBehaviors()
    isOpen = open

    // Define constants to be plugged into animator
    let gravityY:CGFloat  = (open) ? -1.5 : 1.5
    let boundaryY:CGFloat = panelHeight
    let boundaryX:CGFloat = panelWidth

    // animator behaviours
    let gravityBehavior:UIGravityBehavior = UIGravityBehavior(items: [container])
    let collisionBehavior:UICollisionBehavior = UICollisionBehavior(items:[container])
    let panelBehavior:UIDynamicItemBehavior = UIDynamicItemBehavior(items:[container])

    // Set the behvaiours
    panelBehavior.allowsRotation = false
    panelBehavior.elasticity = 0

    // Set collision behaviours
    collisionBehavior.addBoundaryWithIdentifier("upperBoundary", fromPoint: CGPointMake(0, screenHeight - panelHeight), toPoint: CGPointMake(boundaryX, screenHeight - panelHeight))
    collisionBehavior.addBoundaryWithIdentifier("lowerBoundary", fromPoint: CGPointMake(0, screenHeight+panelHeight), toPoint: CGPointMake(boundaryX, screenHeight+panelHeight))
    gravityBehavior.gravityDirection = CGVectorMake(0, gravityY)

    // set the animator behvaiours
    animator.addBehavior(gravityBehavior)
    animator.addBehavior(panelBehavior)
    animator.addBehavior(collisionBehavior)
}

Swift：UIDynamic动画面板从下到上

1 个答案: