How to animate view based on another view - xcode

Question

The middle lock animates upwards faster than the top pane in my animation. How do I animate the middle lock so that it moves upwards alongside the top pane? To be more specific, I want the middle locks center to always align with the top panes bottom as it moves up and off the screen.
This is the code I currently have, lockBorder and lockKeyhole is what is referred to as "middle lock" which is moving upwards too fast compared to the 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
})
})
}

Answer 1

You are adjusting topFrame.origin.y by topFrame.size.height, but you are adjusting lockBorderFrame.origin.y and lockKeyholeFrame.origin.y by self.view.frame.height. We can deduce that these adjustments are different amounts. I assume topFrame.size.height is one half of self.view.size.height. Since you're moving the lock views by twice the distance you're moving topLock, and both adjustments happen over the same 0.6 second interval, the lock views move twice as fast.
I assume you want to animate the lock views all the way off the screen, so it would be insufficient to move them by by only topFrame.size.height. That would leave the bottom half of the lock visible. You need to move the lock views so that their bottom edges are at the top edge of self.view.
This means that you need to set lockBorder.frame.origin.y to the negative of lockBorder.frame.size.height. It will move a total distance of lockBorder.frame.size.height + lockBorder.frame.origin.y, which happens to be equal to lockBorder.frame.maxY.
I assume that lockBorder is at least as large as lockKeyhole, so if we move all the views by lockBorder.frame.maxY, they will all be off the screen. And since we move them all the same distance, all the views will move together.
Note also that if you use constraints in your storyboard, then these views will snap back to their original positions as soon as you do almost anything else to the view hierarchy. So you should probably remove them from their superviews as soon as the animation finishes, unless you're hiding them in some other way (like by removing their superview from the view hierarchy).
Incidentally, the standard library defines M_PI for you.
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()
})
})
}