Parallax effect comes to IOS with the introduction of IOS 7. You can achieve this parallax effect inside your app by using the UIInterpolatingMotionEffect class. Let’s clarify parallax effect, the parallax effect makes your wallpaper to move left and right or up and down when user tilt his device. The parallax effect example is shown in the given below image.
 |
| Parallax effect IOS 7 |
To achieve the parallax effect in your app you can use the given below code which use UIInterpolatingMotionEffect class.
To check its functionality in more clear way lets create a project named ParallaxEffect.
Open ViewController.h and create an IBOutlet to UIImageView, we will add parallax effect to this UIImageView and let its name to be set as backGroundImageView.
Next we declare a method addParallaxEffect, in this method we will place our code which will give parallax effect to backGroundImageView.
Open Main.storyboard, drag an UIImageView object to view and connect IBOutlet to it.
Now open ViewController.m file, here we will define our method addParallaxEffect.
First create a vertical parallax effect
UIInterpolatingMotionEffect *verticalMotionEffect = [[UIInterpolatingMotionEffect alloc]
initWithKeyPath:@”center.y” type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
verticalMotionEffect.minimumRelativeValue = @(–10);
verticalMotionEffect.maximumRelativeValue = @(10);
Here in above code we create an instance of UIInterpolatingMotionEffect and gave it type UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis, so when we add this it will give vertical effect to our view.
Similarly add horizontal effect.
UIInterpolatingMotionEffect *horizontalMotionEffect =[[UIInterpolatingMotionEffect alloc]
initWithKeyPath:@”center.x”
type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
horizontalMotionEffect.minimumRelativeValue = @(–10);
horizontalMotionEffect.maximumRelativeValue = @(10);
Now at this point we have both vertical and horizontal effects with us and we can apply them to our backGroundImageView. Now we have to group these effects into UIMotionEffectGroup object as view take UIMotionEffect object as parameter.
UIMotionEffectGroup *group = [UIMotionEffectGroup new];
group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];
Finally we add effects to our backGroundImageView.
[backGroundImageView addMotionEffect:group];
Complete code
-(void)addParallaxEffect
{
// 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
[backGroundImageView addMotionEffect:group];
}
Go to viewDidLoad and call addParallaxEffect method
– (void)viewDidLoad
{
[self addParallaxEffect];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
Now run the project on your device, as simulator will not tilt and be sure you are running IOS 7 in your device as this code will not work on device that are running IOS lower then IOS 7.
