我如何在iOS中动画输入/输出高斯模糊效果？ [英] How do I animate in/out a gaussian blur effect in iOS?

问题描述

对于整个iOS 7的感觉，我想对屏幕的特定部分应用模糊效果来模糊化它，但我不想只是把模糊瞬间，我想动画和动画

For the whole iOS 7 feel, I want to apply a blur effect to a specific portion of the screen to obfuscate it, but I don't want to just throw the blur on instantly, I want to animate it in and animate it out so the user almost sees the blur effect being applied.

几乎就像在Photoshop中一样，将高斯模糊值从0变为10，而不是0到一半。

Almost as if in Photoshop you changed the gaussian blur value bit by bit from 0 to 10, instead of 0 to 10 in one go.

我已经尝试了几个解决方案，最流行的建议是简单地把模糊的视图顶部的一个非模糊的视图，然后降低模糊视图的Alpha值。

I've tried a few solutions to this, the most popular suggestion being to simply put the blurred view on top of a non-blurred view, and then lower the alpha value of the blurred view.

这可以好，但不是很好看，因为没有转换，它只是覆盖。示例：

This works okay, but not very eye pleasing as there's no transition, it's just an overlay. Example:

什么是更好的方式来实现这样的效果？我熟悉 GPUImage ，但不知道该如何完成。

What would be a better way to achieve such an effect? I'm familiar with GPUImage, but not sure how to accomplish it with that.

如果我可以控制它的模糊百分比，它也将是巨大的，所以它可以从用户交互应用。

It'd also be great if I could control what percentage of the blur it is at, so it could be applied interactively from the user. (e.g.: user drags halfway, the blur is half applied, etc.)

推荐答案

使用iOS 9及更高版本，您可以动画对视觉效果视图的影响：

With iOS 9 and above, you can animate the effect on visual effect views:

[UIView animateWithDuration:0.3 animations: ^ {
    visualEffectView.effect = blurEffect;
} completion:nil];

这将达到动画模糊半径的预期效果。

This will achieve the expected effect of animating the blur radius.

我想如果你从非模糊视图 - >模糊视图动画交叉淡入淡出，它将是令人愉快的。

I think if you animate a crossfade from non-blurred view -> blurred view, it will be pleasing enough. You need to animate the display of the blur view on top of the non-blurred view.

让我们假设 blurView 在模糊视图的顶部显示模糊视图。是包含模糊效果的视图。

Let's assume blurView is the view containing the blur effect.

以下是如何完成动画转换的两个示例：

Here are two examples of how to accomplish an animated transition:

[UIView transitionWithView:self.view duration:0.3 options:UIViewAnimationOptionTransitionCrossDissolve animations: ^ {
    [self.view addSubview:blurView];
} completion:nil];

这里我假设 blurView

您也可以用不同的方式实现这一点：

You can also achieve this in a different way:

blurView.alpha = 0.0f;
[UIView animateWithDuration:0.3 animations: ^ {
    blurView.alpha = 1.0f;
} completion:nil];

这里，我使模糊视图透明，并使其外观动画。请注意，使用此方法将无法使用 hidden ，因此您要使用 alpha 属性。

Here, I make the blur view transparent and animate its appearance. Notice that using this method will not work with hidden, so you want to use the alpha property.

如果你想以交互方式控制模糊量，下面是一个如何实现的示例：

If you wish to control the blur amount interactively, here is an example on how to achieve:

首先创建要模糊的视图的图像：

First create an image of the view you want to blur:

UIGraphicsBeginImageContextWithOptions(nonBlurredView.bounds.size, NO, self.view.window.screen.scale);
[nonBlurredView drawViewHierarchyInRect:nonBlurredView.bounds afterScreenUpdates:NO];
UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();

保留此图片。如果视图已更改，您只想以类似的方式重绘。

Keep this image. You only want to redraw in a similar fashion if the view has been changed. Otherwise, you should reuse this image, as it is expensive to draw the hierarchy.

现在，当你需要模糊时，使用下面的代码：

Now, when you need to blur, use the following code:

CIImage *imageToBlur = [CIImage imageWithCGImage:snapshotImage.CGImage];    
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"]; 
[gaussianBlurFilter setValue:imageToBlur forKey: @"inputImage"]; 
[gaussianBlurFilter setValue:@10 forKey: @"inputRadius"]; //Here you input the blur radius - the larger, the 
CIImage *resultImage = [gaussianBlurFilter valueForKey: @"outputImage"]; 
UIImage *endImage = [[UIImage alloc] initWithCIImage:resultImage];

输入 inputRadius 的模糊执行。如果你动画这个，你会实现互动的感觉。

The inputRadius input gives sets up the amount of blur performed. If you animate this, you will achieve an interactive feel.

但我仍然认为前一种方法更容易，对用户来说也会感觉很好。

But I still think the former method is much easier and will feel as good to the user.

这篇关于我如何在iOS中动画输入/输出高斯模糊效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！