【问题标题】:How to animate view based on another view如何根据另一个视图动画视图
【发布时间】:2016-04-02 04:12:44
【问题描述】:

在我的动画中,中间锁的向上动画比顶部窗格快。如何为中间锁设置动画,使其与顶部窗格一起向上移动?更具体地说,我希望中间锁中心在向上和离开屏幕时始终与顶部窗格底部对齐。

这是我目前拥有的代码,lockBorderlockKeyhole 是所谓的“中间锁”,与 topLock 相比,它向上移动的速度太快了:

@IBOutlet var topLock: UIImageView!
@IBOutlet var bottomLock: UIImageView!
@IBOutlet var lockBorder: UIImageView!
@IBOutlet var lockKeyhole: UIImageView!


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

    openLock()

}


func openLock() {

    UIView.animateWithDuration(0.5, delay: 1.0, options: [], animations: {
        self.lockKeyhole.transform = CGAffineTransformMakeRotation(CGFloat(3.14))
        }, completion: { _ in

            UIView.animateWithDuration(0.6, delay: 0.2, options: [], animations: {

                var topFrame = self.topLock.frame
                topFrame.origin.y -= topFrame.size.height

                var bottomFrame = self.bottomLock.frame
                bottomFrame.origin.y += bottomFrame.size.height


                var lockBorderFrame = self.lockBorder.frame
                lockBorderFrame.origin.y -= self.view.frame.height

                var lockKeyholeFrame = self.lockKeyhole.frame
                lockKeyholeFrame.origin.y -= self.view.frame.height

                self.topLock.frame = topFrame
                self.bottomLock.frame = bottomFrame
                self.lockKeyhole.frame = lockKeyholeFrame
                self.lockBorder.frame = lockBorderFrame

                }, completion: { finished in

            })
        })
}

【问题讨论】:

  • 为什么不把它做成上半部分的子视图?
  • @jtbandes 你能展示一下你会怎么做吗?我目前拥有 Storyboard 中的所有内容。
  • 只看代码很难理解它是如何设置的。我推荐的是,而不是topLocklockKeyhole/lockBorder 是兄弟视图,它们应该是topLock 的子视图。然后你可以移动topLock,它会带走其他人。
  • @jtbandes 我会根据你的 cmets 看看我能做什么。解释一下,基本上有 4 张图片,您可以通过查看上面的 IBOutlets 来确认这一点,这些图片的设置与视频开始的方式完全相同。我

标签: xcode swift animation constraints uiviewanimation


【解决方案1】:

您正在通过topFrame.size.height 调整topFrame.origin.y,但您正在通过self.view.frame.height 调整lockBorderFrame.origin.ylockKeyholeFrame.origin.y。我们可以推断出这些调整是不同的数量。我假设topFrame.size.heightself.view.size.height 的一半。由于您将锁定视图移动的距离是移动距离的两倍 topLock,并且两次调整都发生在相同的 0.6 秒间隔内,因此锁定视图的移动速度是原来的两倍。

我假设您希望将锁定视图的动画一直移出屏幕,因此仅将它们移动 topFrame.size.height 是不够的。这将使锁的下半部分可见。您需要移动锁定视图,使其底部边缘位于self.view 的顶部边缘。

这意味着您需要将lockBorder.frame.origin.y 设置为lockBorder.frame.size.height 的负数。它将移动的总距离为lockBorder.frame.size.height + lockBorder.frame.origin.y,恰好等于lockBorder.frame.maxY

我假设lockBorder 至少和lockKeyhole 一样大,所以如果我们将所有视图移动lockBorder.frame.maxY,它们都会离开屏幕。而且由于我们将它们全部移动相同的距离,所有视图将一起移动。

还请注意,如果您在情节提要中使用约束,那么只要您对视图层次结构进行几乎任何其他操作,这些视图就会立即恢复到其原始位置。因此,您可能应该在动画完成后立即将它们从其父视图中删除,除非您以其他方式隐藏它们(例如通过从视图层次结构中删除它们的父视图)。

顺便提一下,标准库为您定义了M_PI

func openLock() {
    UIView.animateWithDuration(0.5, delay: 1.0, options: [], animations: {
        self.lockKeyhole.transform = CGAffineTransformMakeRotation(CGFloat(M_PI))
        }, completion: { _ in
            UIView.animateWithDuration(0.6, delay: 0.2, options: [], animations: {
                let yDelta = self.lockBorder.frame.maxY

                self.topLock.center.y -= yDelta
                self.lockKeyhole.center.y -= yDelta
                self.lockBorder.center.y -= yDelta
                self.bottomLock.center.y += yDelta
                }, completion: { _ in
                    self.topLock.removeFromSuperview()
                    self.lockKeyhole.removeFromSuperview()
                    self.lockBorder.removeFromSuperview()
                    self.bottomLock.removeFromSuperview()
            })
    })
}

【讨论】:

  • 它有效,谢谢!快速的问题,我通常让动画工作,但在考虑数学和代码时我有时会出错,那么有没有一个可视化工具可以帮助解决这个问题?就像 PaintCode 有助于绘图一样,有什么可以帮助的吗?
  • 我不知道有这样的工具。
  • 没问题,感谢您的回答以及对您提供的答案的如此出色的解释!
  • 嘿,Rob,我有一个动画问题,我想也许你可以帮忙 - 如果可以的话,请看看:stackoverflow.com/questions/43828067/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多