mageView中——也就是处理截屏视图的上半部分。
设置contentsRect
按照如下代码所示修改DropDownMenuController.m文件中的show方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
-(
void)show
{
[
self addToParentViewController];
[
self updateBlur];
CGRect deviceSize = [UIScreen mainScreen].bounds;
[
UIView animateWithDuration:0.25f animations:^(void){
_blurView
.frame = CGRectMake(0.0f, 0.0f, deviceSize.size.height, MENUSIZE);
_backgroundView
.frame = CGRectMake(0.0f, 0.0f, _backgroundView.frame.size.width, MENUSIZE);
_blurView
.layer.contentsRect = CGRectMake(0.0f, 0.0f, 1.0f, MENUSIZE / 320.0f);
}];
}
|
通过指定_blurView.layer.contentsRect来定义一个矩形，在单元坐标空间(unit coordinate space)中，表示只使用layer content的一部分。
编译并运行程序，点击菜单按钮，会看到如下图所示效果：
虽然已经使用了图片的一部分，看起来还是不正确，这是因为它的缩放比例还不适合！此处还缺少对正确内容的缩放。
将下面这行代码添加到show方法中动画block的尾部：
|
1
|
_blurView
.layer.contentsScale = (MENUSIZE / 320.0f) * 2;
|
contentsScale属性声明了layer在逻辑坐标空间(以点为单位)和物理坐标空间(以像素为单位)之间的映射关系。更高比例因子表示在渲染layer时，一个点代表着多个像素点。
编译并运行程序，点击菜单按钮，可以看到缩放比例已经正常了：
没错——看起来好多了！现在关闭程序，然后重新打开，ou~~发生了什么？如下图所示：
看起来这还是有点问题。如果在对view进行animation之前将contentScale设置回2.0，会解决half bar的问题。
将如下代码添加到DropDownMenuController.m中show方法里面的animation block上面：
|
1
|
_blurView
.layer.contentsScale = 2.0f;
|
编译并运行程序，然后点击菜单，接着关闭菜单，再打开菜单，此时菜单开起来如下所示：
现在半个尺寸的黑色box已经没有问题了——但是现在是全尺寸的黑色box！
重置模糊滤镜
上面问题产生的原因是由于进行了二次模糊计算。解决的方法是移除模糊滤镜中的所有target。如果不这样做的话，之后对滤镜的调用不会输出任何的内容——进而引起黑色box的问题。
按照如下代码更新一下updateBlur方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
-(
void)updateBlur
{
if(_blurFilter == nil){
_blurFilter = [[GPUImageiOSBlurFilter alloc] init];
_blurFilter
.blurRadiusInPixels = 1.0f;
}
UIImage *image = [self.view.superview convertViewToImage];
GPUImagePicture *picture = [[GPUImagePicture alloc] initWithImage:image];
[picture addTarget:_blurFilter];
[_blurFilter addTarget:_blurView];
[picture processImageWithCompletionHandler:^{
[_blurFilter removeAllTargets];
}];
}
|
上面的代码用processImageWithCompletionHandler:替换了processImage方法。这个新的方法有一个completion block，当image 处理结束时，会运行这个block。一旦image处理结束，我们就可以安全的将滤镜中的target全部移除。
编译并运行程序，点击菜单，检查一下黑色box问题是不是已经解决掉了：
多次打开和关闭菜单，确保之前的那个bug已经解决掉啦！
现在仔细观察一下打开菜单的模糊效果——有些东西看起来不正确。为了更加明显的观察到问题，我们减慢动画的时间，让其慢慢的移动。
在show方法中，将animation bloc的持续时间修改为10.0f。
编译并运行程序，点击菜单，然后观察一下菜单出场的慢动作：
恩，现在可能你已经发现问题了。被模糊的图片从顶部往下滑动——而我们的本意是希望模糊效果从上往下滑(并不是图片本身)。
对其背景图片
此处我们需要对静态模糊效果使用一些技巧。当出现菜单时，我们需要利用背景来将模糊效果对其。所以在这里我们不是对image view做移动处理，而是需要对image view做扩展处理，从0开始扩展至image view的全尺寸。这样就可以确保菜单打开时，图片依然保留在原位。
在show方法中，我们已经将菜单打开至全尺寸了，所以现在只需要将contentRect的高度设置为0即可(当image view首次创建并隐藏的时候)。
将下面的代码添加至DropDownMenuController.m文件的viewDidLoad方法中——在_blurView初始化的下方：
|
1
|
_blurView
.layer.contentsRect = CGRectMake(0.0f, 0.0f, 1.0f, 0.0f);
|
同时，在相同的一个文件中，将下面的代码添加到animation block的尾部：
|
1
|
_blurView
.layer.contentsRect = CGRectMake(0.0f, 0.0f, 1.0f, 0.0f);
|
contentRect属性是可以动画方式设置的。因此在动画期间会rect会自动的插补上。
编译并运行程序。可以看到，问题已经解决：
这样看起来自然多了。现在我们已经有一个具有模糊背景的滑动菜单了。
现在是时候把动画所需时间调整一下了（为了更好的效果，其实之前设置的值是为了测试所用）：设