Monday, 1 September 2014

Add parallax effect to UIImageView programmatically




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.


Source Code:Click to download

No comments:
Write comments