UIMotionEffect和Home页背景视差效果

当你打开装有iOS7以上的iPhone主屏，默认的背景是一幅蓝色的星空图片。当上下左右翻转iPhone时，有趣的效果将会出现，星空背景也会沿着各个方向发生位移，这与主屏上的各个App Icon形成了一种独特的视差效果。

这不是iOS系统本身独有的。在iOS7之前，这种效果需要陀螺仪相关API的支持，实现起来也比较复杂。而在iOS7以后，系统提供了这样的API，大大简化了实现方案。

0. UIMotionEffect

在iOS7以上的的API中，有一个UIMotionEffect的类。通过它，我们也可以在自己开发的App当中实现本文开头提到的效果。

我们来看一下UIMotionEffect:

1

2

3

NS_CLASS_AVAILABLE_IOS(7_0) @interface UIMotionEffect : NSObject <nscopying, nscoding>

- (NSDictionary *)keyPathsAndRelativeValuesForViewerOffset:(UIOffset)viewerOffset;

@end</nscopying, nscoding>

从头文件的声明来看，UIMotionEffect非常简单，直接继承自NSObject，支持了NSCopying和NSCoding protocol。同时，就像刚刚提到的，他是iOS7之后才有的类。

除此之外，只提供了一个可供override的方法。这个方法的输入参数只有一个，观察者角度的偏移。而这个方法的输出则是一个灵活的NSDictionary对象，里面包含了最终影响视差效果的各项属性和对应的值。

在同一个头文件中，还有一个UIInterpolatingMotionEffect类的声明。

1. UIInterpolatingMotionEffect

UIInterpolatingMotionEffect是UIMotionEffect的子类，虽然扩展也不复杂，提供的方法也很简单，但在很多场景下可以比较直接和方便的满足我们的需求。

它有4个property:

1.keyPath，左右翻转屏幕将要影响到的属性，比如center.x。

2.type（UIInterpolatingMotionEffectType类型），观察者视角，也就是屏幕倾斜的方式，目前区分水平和垂直两种方式。

3&4.minimumRelativeValue和maximumRelativeValue，keyPath对应的值的变化范围，注意这个是id类型。min对应最小的offset，max对应最大的offset。

以本文开头的效果为例，我们可以在某个controller对特定的view实现类似效果：

1

2

3

4

    UIInterpolatingMotionEffect * xEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];

    xEffect.minimumRelativeValue =  [NSNumber numberWithFloat:-40.0];

    xEffect.maximumRelativeValue = [NSNumber numberWithFloat:40.0];

    [targetView addMotionEffect:xEffect];

当然，这只是x轴的，垂直方向同理。

怎么样？是不是很简单？

2. 自定义MotionEffect

由于目前iOS对MotionEffect的支持还比较简单，通过UIInterpolatingMotionEffect我们基本上可以实现大部分效果。

当然，如果我们比较任性，也可以通过继承UIMotionEffect，自定义自己的效果。

比如说，当水平方向发生偏移的时候，我们让targetView上下移动：

1

2

3

4

5

6

- (NSDictionary *)keyPathsAndRelativeValuesForViewerOffset:(UIOffset)viewerOffset

{

    CGFloat originalOffset = viewerOffset.horizontal ;

    CGFloat targetOffset = 512 * originalOffset;

    return @{@"center.y": @(targetOffset)};

}

如上，我们在继承UIMotionEffect的子类中实现这样一个方法就完成了。够任性！

当然，UIMotionEffect不仅仅能够支持本文提到的各种位移，这里只是简要的一个介绍。只要是targetView支持的动画属性，都可以做出效果来。