Get Things Moving: Prototyping Animations in Playgrounds with Xcode 7

Yvette is an iOS Developer who loves learning, experimenting, sharing and shipping. Away from the keyboard she's a keen triathlete and can often be found pounding the canals and parks of East London.

Working with animations in iOS is great, but when you're creating your own it can be time-consuming and tedious. This post shows how using Playgrounds lets you quickly prototype animations while skipping all the project setup.

Before Playgrounds you'd have to re-build your project every time you want to check in on how the animation is coming together. The bigger the project the longer it takes.

Luckily, there is a better way.

Playgrounds are a lightweight interactive coding environment which allow us to experiment and explore Swift and the iOS SDK without the hassle of creating a new Xcode project.

Using Playgrounds you can quickly create and polish animations and get quick visual feedback that you're on the right track. Check out the steps below to get set up and ready to go.

Steps

  1. Create a new playground in Xcode by either selecting from the start menu (below) or hitting ⌥⇧⌘N.

  2. Import XCPlayground by adding import XCPlayground to the top of the file. This module lets you interact with Xcode from a playground.

  3. Add a container view - this will be your canvas for your animation.

  4. Set your containerView to be the 'live view'

  5. Open the assistant editor

  6. Start building your animation! This is a super-simple example, but you can build much more advanced animations using CoreAnimation and other APIs.

  7. You should see your animation run in the assistant editor:

    DemoView

And that's it - a brilliant way to experiment with and build animations.

You can find the full code here.

Bonus Tip:

To quickly re-run your animation you just need to change something in your playground. Adding a new line to the end of the file will do it.

You can also access it in toolbar Editor > Execute Playground, or by pressing the play button on the bottom of the playground.

However, my personal favourite is to add a new keyboard shortcut to Execute Playground. Do this in Xcode > Preferences > Key Bindings > Search for 'execute'.

Happy animating!

About Novoda

We plan, design, and develop the world’s most desirable Android products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact