AJ Z.
AJ Z.

Reputation: 495

UIView Animation sliding from below screen to bottom of screen

I programmatically created a UIStackView, which consists of two UICollectionView stacked vertically. One of them is a menubar, and one of them is a grid that displays media content.

let contentStack = UIStackView()
contentStack.addArrangedSubview(menuBar)
contentStack.addArrangedSubview(grid)
self.view.addSubview(contentStack)

I want the UIStackView to appear at the bottom of the screen, once a button is tapped. However, when it appears, I want it to do an animation, so it slides up from below the screen. I have looked at older solutions to posts similar to mine, but I could not find anything helpful because I manually set the constraints like this:

contentStack.translatesAutoresizingMaskIntoConstraints = false
contentStackBotAnchor = contentStack.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0)
contentStackBotAnchor!.isActive = true
contentStack.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
contentStack.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
contentStack.axis = .vertical
contentStack.spacing = 0

I have attempted solutions like such:

UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseIn, animations: {
           self.contentStack.frame = CGRect.init(x: 0, y: self.view.frame.height - self.contentStack.frame.height, width: self.contentStack.frame.width, height: self.contentStack.frame.height)
        }, completion: nil)

This didn't work for me.

Upvotes: 0

Views: 2852

Answers (2)

Mango
Mango

Reputation: 187

As Reinier stated, you can animate your constraints. Another option could be using a CGAffineTransform. When the view loads, simply change the y value of your UIStackView with something like:

contentStack.transform = CGAffineTransform(translationX: 0, y: view.frame.height)

And then when you want to animate it, use the animation of your choice:

UIView.animate(withDuration: 0.5, animations: {
    contentStack.transform = .identity
})

This is what I prefer in such cases, hope it helps.

Upvotes: 6

Reinier Melian
Reinier Melian

Reputation: 20804

If you are using constraint then you must animate using your constraints, Try with this, I am not sure about the values but must be like this

self.view.layoutIfNeeded()
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseIn, animations: {
           contentStackBotAnchor.constant = (self.contentStack.bounds.size.height * -1)
           self.view.layoutIfNeeded()
        }, completion: nil)

Hope this helps

Upvotes: 2

Related Questions