All posts
iOS

Apple TV Parallax Effect in Swift

Michał Pyrka

Michał Pyrka

Have you seen new Apple TV? Looks great, and brand new design brings some iOS/OSX feeling! As always, Apple included subtle, but very cool effect to interact with interface. Since iOS 7, you can see a parallax effect in springboard by rotating the phone. This time, Apple utilized this effect for icons in Apple TV:

gogogo

 

I was wondering whether this effect is available to developers. Unfortunately, after short investigation, I didn’t find anything. 🙁 Well, this a great opportunity to create it by myself (and with other developers)!

The whole magic is inside this method:

In short – take a position of touch and divide it by size of superview(and multiply by -1 to make a rotation effect in correct direction). Then, zoom a view a little bit and set small value for mysterious m34 variable. Finally, calculate angle for x and y and apply this to CATransform3DRotate. Same goes to subviews (applyParallaxEffectOnSubviews method applies this).

Whoa, the hardest part is done! Let’s go to other methods to reproduce parallax effect better. We have to keep in mind that all subviews moves independently, so setting size of main background image equal to parallax view makes no sense – quickly we would see leaks of default white background. Let’s fix this and slightly increase subviews:

How to achieve this cool glow effect? Well, there’s more than one option, I chose, I suppose, the easiest one: UIImageView with glow .png image that follows touch and changes alpha. As you can see in gif from the beginning, it only shows at the bottom of view.

applyGlowAlpha() takes care of changing alpha(do not reduce the value under 0.0 and above 1.0).

That’s pretty much it, and here’s the final effect!

 

Parallax effect

If you’re interested in adding this effect to your app, here’s the repo on GitHub! Feel free to modify and enhancing it by adding new effects!

 

 


 

Inspired by tutorial on Designmodo.

Thanks Konstantine for Interstellar images!

 

Newsletter

The post is created by Droids On Roids Team Member.
We would love to take care of your business.

Leave comment

  • Riddip Riddipo

    While this is good, you do realize that if you provide a parallax image using the new Parallax Exporter and Parallax Previewer tools in the tvOS SDK, that this is done for you?

    https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/

    • Michał Pyrka

      Unfortunately this is not available for iOS right now.

    • Michal Pyrka

      Unfortunately this is not available for iOS right now.