Animate in Xcode Without Code
A simple library that gets things moving
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.
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.
Install CocoaPods
CocoaPods is a library management for iOS — pretty much like Bower (web) or NPM (node).
Embed in View
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.
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
Blurred Background
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.
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
Special thanks to Max Tagher for his help on my very first Xcode tutorial and for his contribution with the Custom Font component!