IOS 动画设计(3)——模糊效果的使用总结

来源:互联网 发布:九星照命的解法和算法 编辑:程序博客网 时间:2024/05/21 16:22

App 设计时往往会用到一些模糊效果或者毛玻璃效果, 可以给用户带来一定的视觉享受。IOS 目前已提供一些模糊 API 可以让我们方便使用,也可调用第三方库进行模糊效果的处理,在iOS开发当中,我们有很多选择可以做半透明模糊效果,这里主要介绍几种比较常用的模糊处理方法。

1. CoreImage 中的模糊滤镜
coreImage 是 IOS 5 中新加入的一个 Objective-c 的框架,提供了强大高效的图像处理功能,用来对基于像素的图像进行操作与分析。iOS提供了很多强大的滤镜(Filter),种类繁多。
CoreImage 框架中的对象有 CIImage、CIFilter、CIContext。其中,CIImage 是 CoreImage 框架中最基本代表图像的对象,用于获取图片数据源。CIFilter CIFilter 用来表示 CoreImage 提供的各种滤镜。滤镜使用键-值来设置输入值,一旦这些值设置好,CIFilter就可以用来生成新的CIImage输出图像了。调用[CIFilter attributes]会返回filter详细信息,例如,调用高斯模糊滤镜的属性会出现:

{    "CIAttributeFilterAvailable_Mac" = "10.4";    "CIAttributeFilterAvailable_iOS" = 6;    CIAttributeFilterCategories =     (    //滤镜所属种类,通常一个滤镜可以属于几种        CICategoryBlur,        CICategoryStillImage,        CICategoryVideo,        CICategoryBuiltIn    );    CIAttributeFilterDisplayName = "Gaussian Blur";    CIAttributeFilterName = CIGaussianBlur; //滤镜的名称    CIAttributeReferenceDocumentation = "http://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIGaussianBlur";    inputImage =     {    //滤镜使用需要输入的参数,该参数类型为CIImage        CIAttributeClass = CIImage;        CIAttributeDescription = "The image to use as an input image. For filters that also use a background image, this is the foreground image.";        CIAttributeDisplayName = Image;        CIAttributeType = CIAttributeTypeImage;    };    inputRadius =     {    //模糊程度        CIAttributeClass = NSNumber;  //类型        CIAttributeDefault = 10;   //默认值        CIAttributeDescription = "The radius determines how many pixels are used to create the blur. The larger the radius, the blurrier the result.";        CIAttributeDisplayName = Radius;        CIAttributeIdentity = 0;        CIAttributeMin = 0;        CIAttributeSliderMax = 100;        CIAttributeSliderMin = 0;        CIAttributeType = CIAttributeTypeScalar;    };}

CIContext 用来渲染 CIImage。CIContext 可以是基于 CPU 的,也可以是基于 GPU 的,这两种渲染的区别是:使用 CPU 渲染 IOS 会采用 GCD 来对图像进行渲染,这保证了 CPU 渲染在大部分情况下更可靠,比 GPU 渲染更容易使用,他可以在后台实现渲染过程;而GPU 渲染方式使用 OpenGL ES 来渲染图像,这种方式 CPU 完全没有负担,应用程序的运行循环不会受到图像渲染的影响,而且他渲染比CPU渲染更快但是GPU渲染无法在后台运行。
对于如何选择更好的渲染方式,我认为应该视具体情况而定:对于复杂的图像滤镜使用GPU更好,但是如果在处理视频并保存文件,或保存照片到照片库中时为避免程序退出对图片保存造成影响,这时应该使用CPU进行渲染。默认情况是用CPU渲染的。

下面用实例具体说明(此处选择高斯模糊滤镜)。
原图如下所示:
这里写图片描述

采用默认的模糊程度的效果(默认为10,且采用CPU渲染):
这里写图片描述

查看高斯模糊滤镜属性,并自定义模糊程度(此处设置为100):
这里写图片描述
可以看到,画面模糊地完全看不清了,所以,在选择模糊程度的过程中,应该要合理。

2. UIImage+ImageEffects 的 category 模糊效果
UIImage+ImageEffects 是 Accelerate 框架中的内容,其模糊效果非常美观,且使用简单,修改过的 UIImage+ImageEffects 可以对图片进行局部模糊。
这里写图片描述
只需一行代码即可达到模糊效果,还可以调用 blurImageWithRadius 函数自定义模糊程度,最值得一提的是,可以调用 blurImageAtFrame 函数自定义部分模糊,例如:
这里写图片描述
注意要使用 UIImage+ImageEffects 的 category 模糊效果,要先导入其源码,该源码是苹果公司开源给开发者的,也可以直接从我的 github 上下载:UIImage+ImageEffects源码

3. IOS 8 中的 UIVisualEffectView 模糊效果
UIVisualEffectView的模糊效果是即时渲染的,即与上述两种不同的是,上述两种模糊方式是静态的模糊,而这种模糊效果是动态的。且要注意的是,只能在 IOS 8 及以上的版本中能使用。这里主要讲解在模糊面板上的文字显示。
这里写图片描述
该实例中,整个图片按原图大小平铺在屏幕上,图片可滑动,但模糊效果和子模糊(蒙版上的字)效果都是根据图片的滑动而动态变化的。

以上便是自己总结的三种模糊效果的使用方法,可以根据需要进行套用,各个使用方法都有其特点,使用时也要注意相应事项。后续会继续更新 IOS 动画设计方面的知识点和实例分析,敬请期待!

2 0
原创粉丝点击