How to achieve parallax effect with pattern image?

Question

I've been trying to achieve parallax effect for an image view. Code for parallax effect is straightforward and it is working only If I add UIImage to UIImageView. I've a pattern image which needs to tile itself on both sides.

So I had to use patternWithImage method of UIColor. When I do that parallax working, But I can see the background color of self.view in edges when I tilt the device.

Here it is a code:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    self.backgroundImageView.contentMode = UIViewContentModeCenter;
    self.backgroundImageView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"connect"]];
    [self addParallaxEffectToView:self.backgroundImageView];
}

- (void)addParallaxEffectToView:(UIView *)view
{
    // Set vertical effect
    UIInterpolatingMotionEffect *verticalMotionEffect =
    [[UIInterpolatingMotionEffect alloc]
     initWithKeyPath:@"center.y"
     type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    verticalMotionEffect.minimumRelativeValue = @(-50);
    verticalMotionEffect.maximumRelativeValue = @(50);

    // Set horizontal effect
    UIInterpolatingMotionEffect *horizontalMotionEffect =
    [[UIInterpolatingMotionEffect alloc]
     initWithKeyPath:@"center.x"
     type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    horizontalMotionEffect.minimumRelativeValue = @(-50);
    horizontalMotionEffect.maximumRelativeValue = @(50);

    // Create group to combine both
    UIMotionEffectGroup *group = [UIMotionEffectGroup new];
    group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];

    // Add both effects to your view
    [view addMotionEffect:group];
}

Code can be in Swift or Objective-C. Any help would be appreciated. Thanks

EDIT: As per @Clafou suggestion, I'm getting a weird look when I try to push and pop animations.

enter image description here

Have you check this: http://stackoverflow.com/questions/21544402/moving-an-image-with-ios-7-parallax-effect? I have not tried, so don't know whether it will solve your problem or not. — Mrunal, Jul 13 '15 at 10:23
I'm confused by your edit! What do you mean by "when I try to push and pop animations"? Would you be able to add an animated GIF to show what happens in motion? — Clafou, Jul 17 '15 at 10:53
If you have changed your views to stretch outside the bounds of the root view, I think you may want to to set self.view.clipsToBounds = true in viewDidLoad to not show those parts during view controller transitions. — Stefan, Jul 20 '15 at 10:31
@Stefan that did the trick. I totally forgot to give that to self.view. — Dinesh Raja, Jul 20 '15 at 16:09

score 3 · Accepted Answer · answered Jul 13 '15 at 11:01

I guess that your backgroundImageView needs to extend beyond the edges of its container since your effect will shift it.

As a quick test, if you don't use AutoLayout you could add self.backgroundImageView.frame = CGRectInset(self.backgroundImageView.frame, -50, -50); to the end of viewDidLoad.

If you use AutoLayout, change your constraints to make backgroundImageView extend beyond its container's frame.

How to achieve parallax effect with pattern image?

1 Answers1