iOS 7 - Parallax

If you've upgraded your iOS device to iOS 7, i'm sure you've noticed one of the cool new OS level features known as Parallax. Where you can tilt your device on different axes and the background moves slightly to add a layered feel to the OS. 

In this post, i'll explain how you can add those type of effects to your own application with just a few lines of code!

The code i'm going to demo is actually currently being used in our Samples Browser for NucliOS. The app is free, so i recommend that you grab it first so that you can see the end result. 

When you launch the app, after a quick animation, you'll see the home screen and 4 "bubbles". 

Previously, those bubbles were stationary. With iOS 7 we wanted to add just a little something extra, so now when you tilt your device the bubbles will move slightly, while everything else around stays stationary, which adds a feeling of depth to the screen. 

It's important to note that we kept the movement minimal. As you don't want to slap your user in the face and disorient them. 

So now the important question... How did we do this?

Well, it turns out its very simple. Apple introduced a new class called UIMotionEffect into iOS 7 which does all the grunt work. Allowing you to simply tell the object what properties you want to move based on which way the device tilts. 

The code above is all you need!

So, lets break it down. 

Our goal was when you tilt your device vertically that the bubbles move on their Y axis, and when you tilt the device horizontally that the bubbles move on their X axis. 

To do this, we used the UIInterpolatingMotionEffect. This class was designed for that EXACT purpose. So, in the code above, we create 2 instances of that effect. One for the xAxis and one for the yAxis. For the xAxis we pass in a string called "center.x". That string represents the property that we want the effect to manipulate. The 2nd parameter specifies that we want that property to be moved only when the device is tilted horizontally.  Then we set 2 additional properties on the effect: minimum/maximumRelativeValue. These properties must be set and express the allowed range of motion. Essentially, what we're saying here is that each bubble will be allowed to move 15pts to the left and 15pts to the right of it's original position. 

Once we've created our effects we'll want to assign them to our bubble. Now a bubble is just a UIView, and every UIView in iOS 7 has a new method called "addMotionEffect:". The problem with this method is you can only assign it one effect at a time. So, how do we assign both our X and Y effects to the same bubble?

Well, Apple gave us another Effect called UIMotionEffectGroup, where you can put a bunch of effects into one "master" effect. So we simply add both our effects to the group, and then assign the group to the bubble. 

And just like that, with 9 lines of code, we were able to add a nice little "finishing touch" to our application. 

Enjoy!

By Stephen Zaharuk (SteveZ)