如何在 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 更改为 10.

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 已经设置好了，只需将添加过渡为动画中的子视图.

Here I assume blurView has already been set up, and just transition the adding as subview in an animation.

您也可以通过不同的方式实现这一点:

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屋！