Thursday, October 10, 2013

iOS7 parallax shadows

It looks cool enough, we're doing it anyway, even though "floating above" is more normal in iOS7 than "shadowed behind".

To my eyes it is a more subtle and less jumpy depth effect.  The content you're looking at isn't moving, but the shadows it casts are.


@implementation UIView (Giffish)

- (void)addShadowing {
    [self.layer setShadowColor:[UIColor blackColor].CGColor];
    [self.layer setShadowOpacity:0.4];
    [self.layer setShadowRadius:3.0];
    [self.layer setShadowOffset:CGSizeMake(0, 2)];
}

- (void)addShadowParallaxMotionEffect:(float)amountAndDirection {
    float       amount = 10.0*amountAndDirection;
    UIInterpolatingMotionEffect *motionX = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.shadowOffset.width" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    [motionX setMaximumRelativeValue:@(amount)];
    [motionX setMinimumRelativeValue:@(-amount)];
    UIInterpolatingMotionEffect *motionY = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.shadowOffset.height" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    [motionY setMaximumRelativeValue:@(amount)];
    [motionY setMinimumRelativeValue:@(-amount)];
    UIMotionEffectGroup *group = [[UIMotionEffectGroup alloc] init];
    group.motionEffects = @[motionX, motionY];
    [self addMotionEffect:group];
}

@end


//You'd want -1.0 to start.  See how that looks and adjust.  
[button addShadowing];
[button addShadowParallaxMotionEffect:-1.0];  

//This type of thing works too.
[button.titleLabel addShadowing];
[button.titleLabel addShadowParallaxMotionEffect:-1.0];  


No comments: