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支持的动画属性,都可以做出效果来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值