How to increase height of UIButton image without moving button - swift

Question

I have added a UIButton to storyboard and then added my image to the button. What I am looking to do is when you tap on the button the height increases slightly and then the button decreases in height by about a quarter.
#IBAction func StopsClick(sender: UIView) {
//Get the y coordinates of Image
let origin = sender.bounds.origin.y
//This decreases the height of Image but the image moved. I want the image to remain stationary and only the top of the image to increase in height.
UIView.animateWithDuration(0.5) {
sender.bounds = CGRectMake(0, origin, sender.bounds.width, sender.bounds.height * 1.2)
}
UIView.animateWithDuration(1.0) {
sender.bounds = CGRectMake(0, orgin, sender.bounds.width, sender.bounds.height * 0.4)
}
}

Answer 1

You should be able to get the effect you're after using transforms.
I would do the following:
Start with the identity transform.
Shift the origin of the transform down to the bottom of the image.
Increase the transform's scale.y as desired.
Shift the transform's origin back to the center of the image
Apply that transform to the button in your animation. Then animate it back to the identity transform.
If you don't shift the transform and only scale it it will grow in all directions from the center. (or only up and down if you only increase the scale.y)
Edit:
The code might look like this:
let halfHeight = button.bounds.height / 2
//Make the center of the grow animation be the bottom center of the button
var transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
tranform = CGAffineTransformScale( transform, 1.0, 1.2)
tranform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5)
{
button.transform = transform
}
The above code animates the button to 120% height, and leaves it there.
You could use one of the longer variants of animateWithDuration that takes options to make the animation auto-reverse. I leave that as an exercise for you.
Edit #2:
I banged out some code to do a 3-step animation:
func animateButton(step: Int)
{
let localStep = step - 1
let halfHeight = aButton.bounds.height / 2
var transform: CGAffineTransform
switch step
{
case 2:
//Make the center of the grow animation be the bottom center of the button
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 1.2)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 1:
//In the second step, shrink the height down to .25 of normal
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 0.25)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 0:
//in the final step, animate the button back to full height.
UIView.animateWithDuration(0.5)
{
aButton.transform = CGAffineTransformIdentity
}
default:
break
}
}
You'd invoke it with
animateButton(3)
It would be cleaner to use an enum for the step number, and it could use some range checking to make sure the input value is 3, 2, or 1, but you get the idea...