Swiftui 动态动画面板从下到上

Posted 2023-02-23

【中文标题】Swiftui 动态动画面板从下到上

【英文标题】：Swift: UIDynamic animate panel from bottom to top

【发布时间】：2015-04-15 19:40:39

【问题描述】：

我想用 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)

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

【参考方案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)