磨砂玻璃(iOS 7 模糊)效果
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11601166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Frosted Glass (iOS 7 Blur) Effect
提问by Natan R.
I am trying to apply a frosted glass effect in a UIImageView.
我正在尝试在 UIImageView 中应用磨砂玻璃效果。
I tried to implement what I've found in this question, but the result wasn't acceptable. I wanted something like this:
我试图实现我在这个问题中发现的内容,但结果是不可接受的。我想要这样的东西:
Also, we can see that iOS 7 uses this kind of effect in a lot of places. How can we reproduce it?
另外,我们可以看到iOS 7在很多地方都使用了这种效果。我们如何重现它?
回答by Natan R.
A good tutorial about CoreImage is here, showing how to apply filters and more:
关于 CoreImage 的一个很好的教程在这里,展示了如何应用过滤器等:
http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5
http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5
UPDATE 1
更新 1
So after a little bit of research, I ended up discovering that the Core Image for the iOS is still incomplete, when comparing to the OS X version of the library. So I googled a lot, and I find two solutions, one of them more simple, and the other much wider and complex library.
因此,经过一些研究,我最终发现与 OS X 版本的库相比,iOS 的 Core Image 仍然不完整。所以我用谷歌搜索了很多,我找到了两个解决方案,一个更简单,另一个更广泛和复杂的库。
The simple and short solution: https://github.com/esilverberg/ios-image-filters
The amazing and this edit worth, library for processing images and videos with OpenGL, GPUImage by Brad Larson. It is much faster and efficient than Core Image. Introduction: http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework. GitHub: GPUImage
简单而简短的解决方案:https: //github.com/esilverberg/ios-image-filters
令人惊叹且值得编辑的库,用于使用 OpenGL 处理图像和视频,Brad Larson 的GPUImage 。它比 Core Image 更快、更高效。简介:http: //www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework。GitHub:GPUImage
So, for example, in a few lines I can get the result I want (where originalImage is the UIImage to apply the effect):
因此,例如,在几行中我可以获得我想要的结果(其中 originalImage 是应用效果的 UIImage):
GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurSize = 2;
UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];
UPDATE 2
更新 2
After Apple announced iOS 7, some developers found a workaround to do the same that Apple did in the default iOS apps, as Apple didn't provide an API for that. The simplest and better solution, in my opinion, is this one. Why I think it's the best? Because even if some view behind it moves, the blur still works great with the updated effect, as we expect it should work.However, bear in mind that it depends on the iOS 7 SDK in order to work, and it can be risky if Apple changes UIToolbar.
在 Apple 发布 iOS 7 之后,一些开发人员找到了一种解决方法来执行 Apple 在默认 iOS 应用程序中所做的相同操作,因为 Apple 没有为此提供 API。在我看来,最简单和更好的解决方案是这个。为什么我认为它是最好的?因为即使它后面的一些视图移动,模糊仍然可以很好地与更新的效果一起使用,正如我们所期望的那样。但是,请记住,它依赖于 iOS 7 SDK 才能工作,如果 Apple 更改 UIToolbar,可能会有风险。
UPDATE 3
更新 3
Apple mentioned, at WWDC 2013 (Session 226 - Implementing Engaging UI on iOS) they would provide a category class on UIImage, called UIImage+ImageEffects(I googled it, and found here, but it's available in Developer Portal - search for UIImageEffects in the search box). With this category, you can apply the blur in a static UIImage, using several methods (light, dark, with a specific color, etc.). Also, yesterday I saw this componentand found it pretty interesting, as you can apply the effect (based on the above mentioned category) in a frame.
Apple 提到,在 WWDC 2013(Session 226 - 在 iOS 上实现引人入胜的 UI)他们将在 UIImage 上提供一个类别类,称为UIImage+ImageEffects(我用谷歌搜索它,并在这里找到,但它在开发者门户中可用- 在搜索框)。使用此类别,您可以使用多种方法(浅色、深色、特定颜色等)在静态 UIImage 中应用模糊。另外,昨天我看到了这个组件并发现它非常有趣,因为您可以在框架中应用效果(基于上述类别)。
UPDATE 4
更新 4
Finally, on iOS 8, Apple released new classes that can do live blur easily. With UIVisualEffect
and UIVisualEffectView
, you can quickly add live blur to your apps. Here is a good tutorial from Ryan Nystrom on how to use those classes (and in blur in general):
最后,在 iOS 8 上,Apple 发布了可以轻松进行实时模糊的新类。使用UIVisualEffect
和UIVisualEffectView
,您可以快速为您的应用程序添加实时模糊。这是 Ryan Nystrom 关于如何使用这些类的一个很好的教程(一般来说是模糊的):
回答by KPM
Solution for iOS 7 and 8, without using CoreImage or CoreGraphics at all:
适用于 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)]];
}
(assuming you're not targeting versions older than iOS 7; if you are, you'll have to test for the iOS version in the else
block)
(假设您的目标不是早于 iOS 7 的版本;如果是,则必须在else
块中测试 iOS 版本)
This solution applies to any view, not only images.
此解决方案适用于任何视图,而不仅仅是图像。
回答by Zakaria Braksa
Using UIImageEffects
使用 UIImageEffects
If you want more control when applying blur, you could make use of Apple's UIImageEffects
(available through their sample code).
如果您在应用模糊时想要更多控制,您可以使用 Apple 的UIImageEffects
(可通过他们的示例代码获得)。
You can copy the code for UIImageEffects
from Apple's Developer Library : Blurring and Tinting an Image
您可以UIImageEffects
从 Apple 的开发人员库中复制代码:Blurring and Tinting an Image
And here's how to use it :
这是如何使用它:
#import "UIImageEffects.h"
...
self.yourImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];
回答by Moshe
Take a look at the Core Image Programming Guide. It seems like the stylize filterand the blur filtermay suit your needs. I've never worked with Core Image before, but I think there may be some good WWDC sessions that involve them. The documentation has a basic piece of sample code here.
看看核心图像编程指南。风格化滤镜和模糊滤镜似乎可以满足您的需求。我以前从未与 Core Image 合作过,但我认为可能有一些很好的 WWDC 会议涉及到他们。该文档在此处提供了一段基本的示例代码。