Animate in Xcode Without Code

A simple library that gets things moving

Meng To

Follow

Published in

Learning Xcode As a Designer

4 min readDec 5, 2013

--

After I wrote about Xcode 5 for designers, I immediately felt the need to follow up with something I felt was paramount to getting more designers on board with the idea: animations.

Meet Canvas

http://canvaspod.io — Because layout codes can be overwhelming in Xcode, we try to make Canvas as lightweight and powerful as possible. Our goal is to speed up iOS development tenfold by using a plug and play library that solves the most common layout needs so you can focus on the things that set your App apart. Examples are Animations, Custom Fonts, Sounds, Background Blur, Dialogs, Rich Text, etc. that not readily available in Xcode.

Download the Canvas Xcode App

Yep, we created an iOS 7 App just to show you the power of Canvas. And it’s open-source. Go download it!

Usage With Xcode Storyboard

Last week, @jamztang, our iOS engineer showed me how to create functions that would directly connect with Storyboard using the Identity’s Inspector’s Runtime Attributes. That basically means that you don’t have to code to run functions. With a simple Animations library, you can reference these animations with properties such as delay and duration. Just like Animate.css, but for iOS development.

Using Canvas’s fadeIn animation that lasts 0.5sec and starts after 0.5sec. That’s it!

Install CocoaPods

CocoaPods is a library management for iOS — pretty much like Bower (web) or NPM (node).

If you haven’t installed CocoaPods, run this command first. For more instructions, go to http://beta.cocoapods.org

Go to your Xcode project using Terminal and create a Podfile.

Then, simply add 2 lines of code to specify the library you want to install

Once that is done, do a “pod install”. Make sure to open the .xcworkspace from now on so that your main Xcode project will reference all the files from the Pods.

Embed in View

Select any element or group of elements and embed in a View so the animation can be called. Xcode requires that you are specific with the Object you’re calling. For simplicity’s sake, the animation will work only everything wrapped in a View.

Specify the CSAnimationView and set the delay, duration and type

Usage with Code

Wait, what? Coding is optional at this point, but if you want to take it further — like being able to start an animation when a button is pressed, you gotta reference things.

Each screen is connected to a ViewController.h/.m. That’s where you can code your UI.

Think of it as your CSS or Javascript where you can customize all the stuff you can’t through Storyboard.

Let’s create an IBOutlet View and an IBAction.

That IBOutlet we called listView has properties set in Storyboard.

Then, in your ViewController.m, import CSAnimationView.h and do a startCanvasAnimation.

Components

Our ambition for Canvas is much bigger than Animations. We want to allow designers to do all the things they dream of doing with as little code as possible. So with that goal, we put together a few missing pieces from vanilla Xcode.

Custom Fonts

Every project comes with an info.plist. It’s where you set custom properties for your App. In this case, we’re going to set the fonts we’ve just dragged in.

Now simply add a Property Fonts provided by application. Include your fonts using their filenames.

In Storyboard, Runtime Attributes, set fontName to the font’s PostScript name.

The font name that Xcode recognizes is the PostScript name found in Font Book.

Now you get your beautiful custom font. :)

Blurred Background

Include the CSBlurView Class, set the barStyle property to 1 for Black translucence or 0 for White. Make sure that the Object you’re applying is a View.

Light Status Bar

iOS 7 makes it pretty hard to change from a black Status bar to light. In addition, the loading screen’s theme is separate from the main app’s.

Go to info.plist and add a property Status Bar style to Light

Download Ripple-demo 1.1

You’ve come this far since my last Xcode tutorial. I updated the project with these cool animations, CocoaPods and customizations, so go ahead and play with it! Unfortunately, I can’t share the font files, so you’d have to use your own.

Download Ripple 1.1

What’s Coming

We want to add more animations to the library. Also, more attributes to the Animations such as Ease-In/Out, Enter/Exit, Distance, etc.

For Components, we aim to bring Parallax, Sticky headers, Onboarding, Blurred Background and a whole range of customizations not readily available in Xcode, both via Storyboard and through code.

More tutorials coming soon as we release these new components!

We Need Your Help

We poured many hours into this project: the iOS App, CanvasPod.io, the Ripple demo and the CocoaPod library and all the tutorials. If you like it, please share it around. We’d love to hear your feedback on how to make it better! :)

Follow the project: @canvaspod

Or the people behind this: @mengto, @jamztang

Special thanks to Max Tagher for his help on my very first Xcode tutorial and for his contribution with the Custom Font component!