你的位置:首页 > 软件开发 > 操作系统 > iOS 7中实现模糊效果

iOS 7中实现模糊效果

发布时间:2016-03-10 17:00:17
本文译自iOS 7 Blur Effects with GPUImage。iOS 7在视觉方面有许多改变,其中非常吸引人的功能之一就是在整个系统中巧妙的使用了模糊效果。许多第三方应用程序已经采用了这样的设计细节,并以各种奇妙的和具有创造性的方式使用它。本文将通过几种不同的技术来实 ...

iOS 7中实现模糊效果

iOS 7中实现模糊效果

本文译自iOS 7 Blur Effects with GPUImage。

iOS 7在视觉方面有许多改变,其中非常吸引人的功能之一就是在整个系统中巧妙的使用了模糊效果。许多第三方应用程序已经采用了这样的设计细节,并以各种奇妙的和具有创造性的方式使用它。

本文将通过几种不同的技术来实现iOS 7中的模糊效果,当然,这一切都利用了一个名为GPUImage的框架。

GPUImage是由Brad Larson创建的,它利用GPU,使在图片和视频上应用不同的效果和滤镜变得非常的容易,同时它还拥有出色的性能,并且它的性能要比苹果内置的相关APIs出色。

注意:本文需要一台物理设备来编译并运行示例程序(在模拟器上无法使用)。同样还需要一个iOS开发者账号。如果你还没有开发者账号的 话,可以来[这里](https://developer.apple.com/)注册一个。注册为开发者之后,会有许多福利哟,例如可以使用物理设备来 开发程序,提前获得苹果的相关测试版程序,以及大量的开发资源。

iOS 7中实现模糊效果

下面我们先来看看本文的目录结构:

  • 开始
  • 为什么要是用模糊效果
    • 深度引导
    • 上下文
    • 关注度
  • 添加静态的模糊效果
    • 创建截图Category
    • 利用断点测试截屏图片
    • 显示截屏图片
    • 设置contentsRect
    • 重置模糊滤镜
    • 对其背景图片
  • 实时模糊
  • 线程中简洁的分支
  • 一些潜在的实时模糊方案
  • 一个折中的方法——对视频实时模糊
    • 利用GPUImage对视频进行模糊处理
  • 何去何从?

开始

首先先来这里下载本文的starter工程,并将其解压出来。

用Xcode打开Video Blurring.xcodeproj,并将工程运行到设备中。此时看到程序的效果如下所示:

iOS 7中实现模糊效果

点击屏幕左上角的菜单(三条横纹),可以看到界面中出现两个选项:录制视频和播放已有视频。

请注意,现在所有的用户界面都有一个灰色的背景,是不是感觉有点沉闷呢,本文我们就利用iOS 7中的模糊效果来替换掉这些沉闷的灰色背景。

为什么要是用模糊效果

除了外观看起来很棒以外,模糊效果还可以让程序给用户带来3个重要的概念:深度引导、上下文和关注度。

深度引导

在用户界面上,模糊效果可以给用户提供一个深度引导效果,并且有利于用户对程序导航的理解。在之前的iOS版本中的深度引导效果是通过:三维斜面 (three-dimensional bevels)和有关泽的按钮(反映出一个模拟的光源),而在iOS 7中是通过模糊和视差(parallax)来实现的。

这里说的视差效果,可以很明显的观察出来:在装有iOS 7的设备中,将设备从一侧倾斜至另一侧,会发现设备中的图标在移动(会独立于背景)。这样可以给用户做出一个提示:界面是由不同的层构成的,并且重要的界 面元素是在最前面的——这也涉及到下面将要介绍的一个概念:上下文。

上下文

上下文可以让用户在程序内获得一种轴承的感觉。动画的过度效果就提供了一种非常优秀的上下文,当用户点击一个按钮时,在两个view之间利用动画效 果来切换画面(而不是直接显示一个新的view),可以让用户知道新的view是从哪里出现的,并且可以让用户很容易知道如何回到上一个view。

模糊效果可以将上一个view当做背景显示出来,尽管上一个view已经失去焦点了,不过可以给用户提供更多的上下文:刚刚是在哪里。通知中心就是一个非常棒的例子:当拉下通知中心时,我们可以在背景中看到原来的view(即使现在正在处于通知中心界面)。

关注度

让界面更加关注于某些选择项上,而移除不需要的内容,让用户可以更加快捷的进行导航。用户可以本能的忽略那些被模糊的界面元素,而将注意力集中到某些界面元素中。

通过本文,你将学到两种模糊类型的实现方法:静态模糊和动态模糊。静态模糊代表着快照的时间点,它并不能反映被模糊界面元素的变化。大多数情况下,使用静态模糊效果就足够了。相反,动态模糊则是对需要模糊的背景做出实时更新。

相信看到具体的效果才是最好的,下面我们就来看看模糊效果的具体实现吧!

添加静态的模糊效果

创建一个静态模糊效果首先是将当前屏幕中的view转换为一幅图片。获得图片之后,只需要对图片做模糊处理就可以了。将view转换为一幅图片(截屏)苹果已经提供了一些非常棒的APIs了,并且在iOS 7中又有了新的方法可以让截屏更加快速。

这些新的方法属于截屏APIs中的一部分,截屏APIs不仅可以对某个view截屏,还能把整个view层次截屏,如果你希望对某个view截屏,那么可以把view中的按钮、标签、开关等各种view也进行截屏。

此处我们将截屏的逻辑实现到UIView的一个category中。这样一来,我们就可以很方便快捷的将任意的view(以及view中的内容)转换为一个图片——也算是代码的重用吧。

创建截图Category

打开File/New/File...,然后选择iOS/Cocoa Touch/Objective-C category,如下图所示:

iOS 7中实现模糊效果

将这个category命名为Screenshot,并将它的category选为UIView,如下图所示:

iOS 7中实现模糊效果

将下面这个方法声明到UIView+Screenshot.h中:

1

原标题:iOS 7中实现模糊效果

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。