Swift UIButton AnimationsLearn to build animations for any UIButton in your Swift projectKacey JimenezBlockedUnblockFollowFollowingJun 10Photo by Bagus Hernawan on UnsplashAnimations in your Swift application can truly bring it to life.
It can bring the application to another level, and allow the user to enjoy their experience.
We will learn how to apply two different animations that we can add to our UIButtons.
Let’s jump right in and start animating!Drag two UIButtons onto the storyboard of your project.
Control-Drag each of the buttons onto the ViewController file to create IBActions.
Call the first function pulseButtonPressed() and the second flashButtonPressed().
Don't forget to make the UIButton the sender.
Create a new Swift file called UIButtonExtensions and import UIKit at the top of the file.
Make an extension of UIButton.
(This is where all our magic will go.
)Make a function in the extension and call it pulsate().
Make a second function called flash() and enter the following code.
func pulsate() {let pulse = CASpringAnimation(keyPath: "transform.
scale")pulse.
duration = 0.
4pulse.
fromValue = 0.
98pulse.
toValue = 1.
0pulse.
autoreverses = truepulse.
repeatCount = .
infinitypulse.
initialVelocity = 0.
5pulse.
damping = 1.
0layer.
add(pulse, forKey: nil)}func flash() {let flash = CABasicAnimation(keyPath: "opacity")flash.
duration = 0.
3flash.
fromValue = 1flash.
toValue = 0.
1flash.
timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.
easeInEaseOut)flash.
autoreverses = trueflash.
repeatCount = 2layer.
add(flash, forKey: nil)}Let’s talk about the code above.
The first thing we do is create our CASpring and CABasicAnimation.
We want the pulsing animation to have more of a bouncy animation to it, so we would want to use CASpringAnimation.
The keyPath transform-scale will help us change the size of the button.
The duration is how long the animation will last for.
The from and to values is what the size of the button will be from the beginning of our animation to the end.
Autoreverses will make the animation reverse once it is done and we set this to true.
The value you assign to repeatCount will be how many times you want it to repeat.
You can also assign this to .
infinity if you want it to go on forever.
InitialVelocity and damping have to do with CASpringAnimation and this dictates how much of a bouncy effect you’ll have on your animation.
Lastly, we will add the animation to the UIButtons layer in the last line of our functions.
Let’s go ahead and call our new animation “functions”.
8.
In our respective IBAction functions call sender.
pulsate() and sender.
flash().
@IBAction func pulseButtonPressed(_ sender: UIButton) {sender.
pulsate()}@IBAction func flashButtonPressed(_ sender: UIButton) {sender.
flash()}If you go ahead and run your application you should be able to see each of the animations when you press the UIButtons.
Now you can tweak values to make the animations as desired.
You can also call the animations in the viewDidLoad() if you want them to start without having to click any buttons.
Enjoy creating your animations!.