Animation can be a tool to draw the user’s attention to a certain part of the screen. But animating a Bar Button Item is tricky because it doesn’t expose a handle to the button itself.

Fortunately, Bar Button Item has a customView property. The approach is to abandon the built-in button, and instead create a new one for the customView. Now you can animate the customView property as you would a regular button.

project final state with animated custom view

1. Download the Starter Project

Before you begin, download the starter project. It just has a Bar Button Item with a star icon. Build and run, and it will look like this:

starter project with black star

The star icon comes from Font Awesome, which is a popular free icon set. Font Awesome lets you use text in place of images. Tweaking icons becomes a matter of adjusting textColor or fontSize in the Storyboard. Also, text is vector so you can resize without pixellation.

There are situations where it makes sense to use PNGs though. Tab Bar icons require an image. And Bar Button Items expose a title but not a font. You can just use fa2png.io to generate PNGs of any Font Awesome icon in any size and color combination.

fa2ico website

2. Fix the Button Color

Before diving in, the color of the Bar Button Item doesn’t match the Global Tint. Rather than creating new image assets, you can use a trick from krakendev.io instead:

  1. Select the star in the asset catolog.
  2. On the Attributes Inspector > Render As, select Template Image

render as template image

By setting the rendering mode to Template, the image becomes a mask where opaque regions are represented by the tint color.

Build and run, and the star should now match the Tangerine global tint.

star is now orange

3. Create a Button as the CustomView

When the Bar Button Item loads, you create a Button based on the star image. Then you set this button to the customView.

In ViewController.swift, an IBOutlet is already wired to the right bar button.

Replace the IBOutlet declaration with the following:

Here’s what’s going on in code:

  • You can use didSet to set properties on an IBOutlet instead of viewDidLoad
  • First, you instantiate an image from the asset catalog
  • This image serves as the size and background of a new button
  • You set this button to the customView property of the Bar Button Item

Build and run. It should look the same as before. But under the hood, the orange star is a button you created programmatically rather than the built-in button.

4. Animate the CustomView

Now that you have a handle to the button, it’s time to animate. When the page loads, the star will grow from nothing to its original size. The animation will have a spring to it, so it looks like the star is bursting.

Within the didSet block, append the following code:

Here’s what’s going on in code:

  • CGAffineTransformMakeScale: This is used to scale the button — in this case down to zero.
  • usingSpringWithDamping: This takes a float between 0.0 and 1.0 and acts like a friction coefficient. Think about the brakes on a car.
  • initialSpringVelocity: This is how forcefully the star bursts, in pixels per second approximately. Think: gas pedal.
  • CGAffineTransformIdentity: This represents the button’s original state.

Build and run. You should see the star pop when the page loads.

star now pops

5. Wire the Button Action

The trade-off of using customView is the loss of the built-in button. This means you can’t wire an IBAction to the Storyboard. Instead, you’ll have to do things the old-fashioned way using target-action.

Within the didSet block, append the following code:

When the button is tapped, it will call the tappedRightButton method.

Now to implement the tappedRightButton method:

This turns the star counter-clockwise, and then spins it back to its original state.

Here’s what’s going on:

  • CGAffineTransformMakeRotation turns the button counter-clockwise. There’s nothing significant to 6π/5, other than the begin and end states looking similar.
  • The button is animated back to its original position using CGAffineTransformIdentity

The final version of ViewController.swift should look like this:

Build and run. The star should pop when it appears. And each time you tap, the star should spin a little.

star pops and spins

Conclusion

You can download the final project here.

The animations here are pretty basic. But if you want to dig more into animation, check out this Alt Conf video with Marin Todorov on how to Power Up Your Animations.

Got any tips for animating bar buttons? Have any suggestions for future tutorial topics? Feel free to add your thoughts to the comments.

Like this post? Please share it below! Then follow us on Twitter @thorntech or join our mailing list for future updates.