磨砂玻璃（iOS 7模糊）效果

Question

磨砂玻璃（iOS 7模糊）效果

ioscocoa-touchios7uikit

35

我想在UIImageView上应用磨砂玻璃效果。

我尝试了实现我在这个问题中找到的方法，但结果不是很理想。我想要得到类似这样的效果：

磨砂玻璃效果

此外，我们可以看到iOS 7在许多地方都使用了这种效果。我们如何复制它？

- Natan R.

这是使用UIToolbar的解决方案： https://dev59.com/QGQn5IYBdhLWcg3wJ0YO#19506076 - Ivo Leko

我在编辑2中提到了类似的内容 - 它使用了UIToolbar。 - Natan R.

是的，你说得对。但这个解决方案适用于使用UIView动画来实现帧/边界动画。 - Ivo Leko

这是最快的实时视图模糊实现（使用加速框架）：https://github.com/nicklockwood/FXBlurView ！iOS模拟器中的实时模糊 - Artur Bodera

4个回答

21

针对iOS 7和8的解决方案，完全不使用CoreImage或CoreGraphics：

- (void)addBlurToView:(UIView *)view {
    UIView *blurView = nil; 

    if([UIBlurEffect class]) { // iOS 8
        UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
        blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
        blurView.frame = view.frame;

    } else { // workaround for iOS 7
        blurView = [[UIToolbar alloc] initWithFrame:view.bounds];
    }

    [blurView setTranslatesAutoresizingMaskIntoConstraints:NO];

    [view addSubview:blurView];
    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];
    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];
}

< p >（假设您的iOS版本不低于iOS 7；如果低于iOS 7，您将需要在else块中测试iOS版本）

此解决方案适用于任何视图，而不仅仅是图像。

- KPM

非常有用的答案，使得在iOS 7和8上实现变得容易。只有一个问题，假设我不断地添加和删除这个模糊视图，我是否应该每次“从父视图中删除视图”时都删除添加的约束（我使用此代码将其重新添加，因此我知道约束不断添加）？ - Pochi

为什么不直接隐藏它而不是删除它呢？ - KPM

2

优秀的示例。运行得非常好。 - Tod Cunningham

太好了，非常感谢。运行得很完美。但是我想改变模糊视图的颜色。它显示白色模糊。 - Rajesh Maurya

1

这个很好用，但是UIBlurEffect在像iPad2这样的旧设备上无法使用。花了几个小时试图弄清楚为什么它只能放置一个半透明的遮罩而不是模糊 - 这是由于旧设备造成的！ - Keith

2

使用UIImageEffects

如果你想在应用模糊效果时有更多的控制，可以使用苹果公司提供的UIImageEffects（可通过其示例代码获得）。

你可以从苹果开发者文库中复制UIImageEffects的代码：对图像进行模糊和着色

以下是如何使用它：

#import "UIImageEffects.h"
...

self.yourImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];

- Zack Braksa

1

看一下核心图像编程指南。似乎样式化滤镜和模糊滤镜可能适合您的需求。我以前从未使用过Core Image，但我认为有一些很好的WWDC会议涉及它们。文档中有这里一个基本的示例代码。

- Moshe

看起来iOS没有OS X那么多的过滤器。您可以通过以下代码进行检查：NSArray *properties = [CIFilter filterNamesInCategory:kCICategoryBuiltIn]; NSLog(@"%@", properties); - Natan R.

不详细说明，你在iOS 6上运行过那段代码吗？ - Moshe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Natan R. · Accepted Answer

这里有一个关于CoreImage的好教程，展示了如何应用滤镜等:

http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5

更新1

所以经过一些研究，我最终发现iOS的Core Image与OS X版本的库相比仍然不完整。因此我进行了大量搜索，找到了两个解决方案，其中一个更简单，另一个是更全面和复杂的库。

简单而短的解决方案：https://github.com/esilverberg/ios-image-filters
处理图像和视频的惊人的、值得编辑的OpenGL库，GPUImage由Brad Larson开发。它比Core Image更快、更高效。介绍：http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework。GitHub: GPUImage

例如，只需要几行代码就可以得到所需的结果（其中originalImage是要应用效果的UIImage）：

GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurSize = 2;
UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];

更新2

在苹果宣布iOS 7之后，一些开发者找到了一个解决方法，可以做到与苹果默认的iOS应用程序相同的效果，因为苹果没有提供API。 我认为最简单且最好的解决方案是这个。为什么我认为它是最好的？因为即使在其后面的某个视图移动时，模糊效果仍然与我们期望的效果一样良好。不过，请注意，它需要iOS 7 SDK才能运行，并且如果苹果更改UIToolbar，则会存在风险。

更新3

苹果在WWDC 2013（Session 226 - Implementing Engaging UI on iOS）中提到将提供一个名为UIImage + ImageEffects的UIImage类别类（我通过此处查到了此信息，在Developer Portal上搜索UIImageEffects即可找到）。使用此类别，您可以对静态UIImage应用模糊效果，使用多种方法（明亮、黑暗、带有特定颜色等）。此外，昨天我看到了这个组件，发现它非常有趣，因为您可以在框架中应用效果（基于上述类别）。

更新4

最后，在iOS 8上，苹果发布了新的类，可以轻松地实现即时模糊效果。使用UIVisualEffect和UIVisualEffectView，您可以快速向您的应用程序添加即时模糊效果。 Ryan Nystrom提供了一篇关于如何使用这些类（以及有关模糊的一般信息）的好教程。