Swift: Animating stretch & shrink of an image - ios

Question

I am trying to animate the stretch and shrink of a lightsaber in my app. Currently I have everything working except for the stretching/shrinking of the lightsaber.
Ideally, I would like to be able to have the bottom anchor of actual saber be flush below the top anchor of saber handle. I've been able to achieve somewhat well with Auto Layout constraints. However, I'm struggling to find the right code for animations. As you can see from my code, I have tried frame.size.height/width, however that only moves the frame of the saber (not the handle). The line with frame.size.height achieves what I want in terms of making it stretch/grow, but it's a very bootleg way of doing it.
The current frame.size.height/width method only shifts the images, how would I achieve the stretch/shrink capability? Is it possible to achieve it with the multiplier function from Auto Layout constraints?
#objc func lightsaberTapped() {
print("lightsaber open!")
if mainView.saberImage.isHidden == true {
mainView.saberImage.isHidden = false
UIView.animate(withDuration: 0.5, animations: {
self.mainView.saberImage.frame.size.height -= 500
// self.mainView.saberImage.frame.size.width += 20
}, completion: nil)
lightsaberModel.turnSaberOnAudio.play()
} else {
mainView.saberImage.isHidden = true
UIView.animate(withDuration: 0.5, animations: {
self.mainView.saberImage.frame.size.height += 500
// self.mainView.saberImage.frame.size.width += 20
}, completion: nil)
}
}

Answer 1

Your main issue is the frame animation while you have constraints, you need 1 of 2 or animate constrains or remove it and animate with frame property, in that case you need to make sure that your UIImageView is added with translatesAutoresizingMaskIntoConstraints = false
To animate width and height in Autolayout system you need to get the constraint reference as IBOutlet and animate the constant property inside an animation block,
this is a very small example
class ViewController: UIViewController {
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var imageHeightConstraint: NSLayoutConstraint!
#IBOutlet weak var imageWidthConstraint: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
}
#IBAction func action(_ sender: Any) {
UIView.animate(withDuration: 0.5, animations: {
self.imageHeightConstraint.constant = self.imageHeightConstraint.constant - 10
self.imageWidthConstraint.constant = self.imageWidthConstraint.constant - 10
self.view.layoutIfNeeded()
})
}
}

Answer 2

First add constraints for width and height
#IBOutlet weak var saberImageHeightConstraint: NSLayoutConstraint!
#IBOutlet weak var saberImageWidthConstraint: NSLayoutConstraint!
Try this to get animation while resize frame.
if mainView.saberImage.isHidden == true
{
mainView.saberImage.isHidden = false
self.saberImageHeightConstraint.constant -= 500
UIView.animate(withDuration: 0.5, animations: {
self.view.layoutIfNeeded()
self.viewDidLayoutSubviews()
}, completion: nil)
lightsaberModel.turnSaberOnAudio.play()
}
else
{
mainView.saberImage.isHidden = true
self.saberImageHeightConstraint.constant += 500
UIView.animate(withDuration: 0.5, animations: {
self.view.layoutIfNeeded()
self.viewDidLayoutSubviews()
}, completion: nil)
}