ios - Swiftui 动态动画面板从下到上

Question

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

当应用程序加载时，我使用以下方法从屏幕偏移 View :

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)

为了设想这一点，我希望 View 显示为:

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

我已经设置了手势识别器来检测我何时向上和向下滑动(向上滑动显示，向下滑动关闭)，但是现在 View 从屏幕上弹开，我似乎永远无法恢复。

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

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 为真时，我将值设置为负值，因为我想将 View 动画化回屏幕，这意味着它向上动画化，因此我假设我需要负重力。

我将 boundaryY 设置为面板的高度，因为我只想将它动画到屏幕上到窗口的高度，目前它飞离顶部(当我调试 screen height = 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)

我主要关心碰撞检测，因为我认为这是导致 View 旋转和飞离屏幕的原因，我该如何解决这个问题？

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 bool 切换值的影响:

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

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

总而言之，如果您是 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)
}