The Easy Button: A Fancy Animation with StackView

Last week, I spoke at and attended iOSDevCampDC, where I had the pleasure of listening to @atomicbird‘s great talk on StackViews. I knew StackView basics, but I had no idea how easy it is to create some impressive-looking animations with them!

Here is an example of the cool animation that @atomicbird demoed and I reproduced for this blog post. Let’s say it’s a user setting in your fun app where a user can select their current status as emoji…


The Setup

To set this up, just add a StackView with constraints to your View and add the buttons needed to make this cute little menu:

StackView Basic

StackViews are pretty simple and intuitive, so if you haven’t played around with them, this part is just plain fun 🙂

The next step is to create an Outlet Collection for the buttons you wish to animate – in this case, all the emoji buttons, but not the setting button:

Outlet Collection

As you can see, creating an outlet collection is the same as creating an outlet, it’s just an array of items. So just Control + Drag each button to the new outlet collection instead of an individual outlet.

Animation 🎉

The way we’re going to do the animation is by manipulating the hidden property on the emoji buttons. So to start off, we need to make sure that the buttons are hidden by default. We can do that by iterating through all of the emoji buttons, and setting them to hidden (yay outlet collections!):

Now here comes the hard part… are you ready?!!!

All there is to this animation is iterating through the emoji buttons and toggling their hidden status when the settings button is clicked:

That’s it!

Conclusion

These type of small tricks with so little code make StackViews even more powerful than I thought! I’m pretty inspired about being more creative with my own StackViews. Thanks @atomicbird!

You can view the sample code, with a side-by-side comparison of using AutoLayout instead, on Github here.

Interested in learning more? Join me for a Swift Community Celebration 🎉 in New York City on September 1st and 2nd. Use code NATASHATHEROBOT to get $100 off!

Enjoy the article? Join over 17,500+ Swift developers and enthusiasts who get my weekly updates.

  • Pingback: Magical View Rotation with StackView()

  • Abhishek Bedi

    Thats cool!

  • Ben Sullivan

    This is really cool :). I have tried implementing a horizontal stackView as well but with the same code it just disappears! Any ideas??
    https://github.com/benskill/AnimatedStackViews

  • Vibin

    Hi Natasha,
    Thank you for sharing this article. Was trying using images instead of plain text in buttons. Observed that in that case we do not get the same effect, instead the images are stretched compressed rather than appearing and disappearing. Do you have any idea why in case of images there is this different behaviour?

  • Caleb Talbot

    This is awesome. I did this and added a change to the alpha in the animation block as well… It worked really great!