iOS 7 parallax effect in my view controller

Question

I'm developing an app for iOS 7 in Objective-C. I've got a screen in my app with a few buttons and a pretty background image. (It's a simple xib with UIButtons on top of a UIImageView.)

I was thinking that it'd be cool if those buttons had the parallax effect that the iOS 7 home screen has, so if you tilt the phone you could see the background.

How can I implement that effect in my own app?

Answer 1

With iOS 7, Apple introduced UIMotionEffect to add Motion effects that are related to the orientation of the user’s device. For example, to emulate the parallax effect on the home screen, you can use the subclass UIInterpolatingMotionEffect, as explained here, just with a few lines of code.

Objective-C:

// Set vertical effect UIInterpolatingMotionEffect *verticalMotionEffect =    [[UIInterpolatingMotionEffect alloc]    initWithKeyPath:@"center.y"              type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis]; verticalMotionEffect.minimumRelativeValue = @(-10); verticalMotionEffect.maximumRelativeValue = @(10);  // Set horizontal effect  UIInterpolatingMotionEffect *horizontalMotionEffect =    [[UIInterpolatingMotionEffect alloc]    initWithKeyPath:@"center.x"                   type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis]; horizontalMotionEffect.minimumRelativeValue = @(-10); horizontalMotionEffect.maximumRelativeValue = @(10);    // Create group to combine both UIMotionEffectGroup *group = [UIMotionEffectGroup new]; group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];  // Add both effects to your view [myBackgroundView addMotionEffect:group]; 

Swift (Thanks to @Lucas):

// Set vertical effect let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y", type: .TiltAlongVerticalAxis) verticalMotionEffect.minimumRelativeValue = -10 verticalMotionEffect.maximumRelativeValue = 10  // Set horizontal effect let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",     type: .TiltAlongHorizontalAxis) horizontalMotionEffect.minimumRelativeValue = -10 horizontalMotionEffect.maximumRelativeValue = 10  // Create group to combine both let group = UIMotionEffectGroup() group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]  // Add both effects to your view myBackgroundView.addMotionEffect(group) 

Also, you can find a bunch of libraries to do this easier or to add this functionality to older iOS versions:

• NGAParallaxMotion (requires iOS 7).
• DVParallaxView (requires iOS 5.0 or higher and ARC).
• MKParallaxView (tested with iOS 6.0, requires ARC).
• UIView-MWParallax (tested with iOS 6.1, requires ARC).

Answer 2

Translated to swift in case anyone is lazy. Please vote @veducm answer up if you found this useful

@IBOutlet var background : UIImageView!  func parallaxEffectOnBackground() {     let relativeMotionValue = 50     var verticalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",         type: .TiltAlongVerticalAxis)     verticalMotionEffect.minimumRelativeValue = -relativeMotionValue     verticalMotionEffect.maximumRelativeValue = relativeMotionValue      var horizontalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",         type: .TiltAlongHorizontalAxis)     horizontalMotionEffect.minimumRelativeValue = -relativeMotionValue     horizontalMotionEffect.maximumRelativeValue = relativeMotionValue      var group : UIMotionEffectGroup = UIMotionEffectGroup()     group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]      self.background.addMotionEffect(group) }