I am using Wobble Bubble Button to make some Game center-like bubbles in my app. There are no animations when tapping the bubble, though. The animation I’m trying is to have the bubble expand while held down, and shrink down when released. I tried this code:
@IBAction func button3down(_ sender: UIButton) {
UIView.animate(withDuration: 0.6,
animations: {
self.button3.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
},
completion: { _ in
UIView.animate(withDuration: 0.6) {
self.button3.transform = CGAffineTransform.identity
}
})
}
It displays a rough animation, opposite of what I want.
https://i.imgur.com/puMGR1J.gif
How can I take the current size of the bubble and expand it smoothly when held down?
2
Answers
There are a couple of problems with your code.
First, your animation sets the scale to
0.6
, which causes the button to shrink, not expand. Use a scale value of > 1 to make it expand. Try1.2
as a new scaleX and scaleY value. Adjust that value up or down to taste, but keep your new scale value > 1 if you want your button to grow.Second, your code animates the button to its new scale for 0.6 seconds and then immediately restores it to its previous size. You say you want it to grow and stay large as long as the user holds it down.
I would say you should implement handleTouchDown IBAction connected a touch down inside event, and a separate handleTouchUp event that you would tie to touchUpInside. The handleTouchDown IBAction would animate the button larger, and the
handleTouchUp
method would animate it back to its original size.(And by the way, 0.6 seconds is kind of long for this sort of animation. It will feel sluggish. I’d suggest trying a duration in the 0.2 – 0.3 second range.) And you might want to use ease-in, ease-out animation timing. For that you’ll need to use the longer form of UIView animation that takes an options parameter:
animate(withDuration:delay:options:animations:completion:)
.)The big trick.
As well as the priceless information from @DuncanC.
There’s a trick to use when doing bounce animations.
In fact make the item double the size.
When you are showing it normally, shrink it at all times to 0.50.
When you do the bounce, increase it from 0.5 to 1 and back to 0.5
Instead of 1 to 2 to 1.
Otherwise it will look like crap when it is expanded.