仓酷云

标题: IOS设计iOS 7中完成含混效果仓酷云 [打印本页]

作者: 灵魂腐蚀 时间: 2015-1-18 11:27
标题: IOS设计iOS 7中完成含混效果仓酷云
除了在程序加载的时候把我的view加载到他上目前我还没用到过其他的苹果一直很推崇MVC的程序结构视图模型控制器简单说就是视图负责显示内容模型负责所有数据的保存结构或者一些其他数据操作控制器是用来协调视图和模型举车的发动机系统的例子iOS7在视觉方面有很多改动，个中十分吸惹人的功效之一就是在全部体系中奇妙的利用了含混效果。很多第三方使用程序已接纳了如许的计划细节，并以各类奇奥的和具有制造性的体例利用它。
本文将经由过程几种分歧的手艺来完成iOS7中的含混效果，固然，这统统都使用了一个名为GPUImage的框架。
GPUImage是由BradLarson创立的，它使用GPU，使在图片和视频上使用分歧的效果和滤镜变得十分的简单，同时它还具有杰出的功能，而且它的功能要比苹果内置的相干APIs杰出。
注重：本文必要一台物理设备来编译并运转示例程序(在摹拟器上没法利用)。一样还必要一个iOS开辟者账号。假如你还没有开辟者账号的话，能够来[这里](https://developer.apple.com/)注册一个。注册为开辟者以后，会有很多福利哟，比方可使用物理设备来开辟程序，提早取得苹果的相干测试版程序，和大批的开辟资本。

上面我们先来看看本文的目次布局：

入手下手
为何如果用含混效果
- 深度引诱
- 高低文
- 存眷度
增加静态的含混效果
- 创立截图Category
- 使用断点测试截屏图片
- 显现截屏图片
- 设置contentsRect
- 重置含混滤镜
- 对其背景图片
及时含混
线程中简便的分支
一些潜伏的及时含混计划
一个折衷的办法——对视频及时含混
- 使用GPUImage对视频举行含混处置
何往何从？

入手下手

起首先来这里下载本文的starter工程，并将其解压出来。
用Xcode翻开VideoBlurring.xcodeproj，并将工程运转到设备中。此时看到程序的效果以下所示：

点击屏幕左上角的菜单(三条横纹)，能够看到界面中呈现两个选项：录制视频和播放已有视频。
请注重，如今一切的用户界面都有一个灰色的背景，是否是感到有点活跃呢，本文我们就使用iOS7中的含混效果来交换失落这些活跃的灰色背景。
为何如果用含混效果

除表面看起来很棒之外，含混效果还可让程序给用户带来3个主要的观点：深度引诱、高低文和存眷度。
深度引诱

在用户界面上，含混效果能够给用户供应一个深度引诱效果，而且有益于用户对程序导航的了解。在之前的iOS版本中的深度引诱效果是经由过程：三维斜面(three-dimensionalbevels)和有关泽的按钮(反应出一个摹拟的光源)，而在iOS7中是经由过程含混和视差(parallax)来完成的。
这里说的视差效果，能够很分明的察看出来：在装有iOS7的设备中，将设备从一侧倾斜至另外一侧，会发明设备中的图标在挪动(会自力于背景)。如许能够给用户做出一个提醒：界面是由分歧的层组成的，而且主要的界面元素是在最后面的——这也触及到上面将要先容的一个观点：高低文。
高低文

高低文可让用户在程序内取得一种轴承的感到。动画的过分效果就供应了一种十分优异的高低文，当用户点击一个按钮时，在两个view之间使用动画效果来切换画面(而不是间接显现一个新的view)，可让用户晓得新的view是从那里呈现的，而且可让用户很简单晓得怎样回到上一个view。
含混效果能够将上一个view当作背景显现出来，只管上一个view已得到核心了，不外能够给用户供应更多的高低文：方才是在那里。关照中央就是一个十分棒的例子：当拉下关照中央时，我们能够在背景中看到本来的view(即便如今正在处于关照中央界面)。
存眷度

让界面加倍存眷于某些选择项上，而移除不必要的内容，让用户能够加倍快速的举行导航。用户能够天性的疏忽那些被含混的界面元素，而将注重力会合到某些界面元素中。
经由过程本文，你将学到两种含混范例的完成办法：静态含混和静态含混。静态含混代表着快照的工夫点，它其实不能反应被含混界面元素的变更。年夜多半情形下，利用静态含混效果就充足了。相反，静态含混则是对必要含混的背景做出及时更新。
信任看到详细的效果才是最好的，上面我们就来看看含混效果的详细完成吧！
增加静态的含混效果

创立一个静态含混效果起首是将以后屏幕中的view转换为一幅图片。取得图片以后，只必要对图片做含混处置就能够了。将view转换为一幅图片(截屏)苹果已供应了一些十分棒的APIs了，而且在iOS7中又有了新的办法可让截屏加倍疾速。
这些新的办法属于截屏APIs中的一部分，截屏APIs不但能够对某个view截屏，还能把全部view条理截屏，假如你但愿对某个view截屏，那末能够把view中的按钮、标签、开关等各类view也举行截屏。
此处我们将截屏的逻辑完成到UIView的一个category中。如许一来，我们就能够很便利快速的将恣意的view(和view中的内容)转换为一个图片——也算是代码的重用吧。
创立截图Category

翻开File/New/File...，然后选择iOS/CocoaTouch/Objective-Ccategory，以下图所示：

将这个category定名为Screenshot，并将它的category选为UIView,以下图所示：

将上面这个办法声明到UIView+Screenshot.h中：

复制代码

-(UIImage*)convertViewToImage;

复制代码

接着将以下办法增加到UIView+Screenshot.m中：

123456789

复制代码

-(UIImage*)convertViewToImage{UIGraphicsBeginImageContext(self.bounds.size);[selfdrawViewHierarchyInRect:self.boundsafterScreenUpdates:YES];UIImage*image=UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();returnimage;}

复制代码

下面的办法中，起首挪用了UIGraphicsBeginImageContext()，最初挪用的是UIGraphicsEndImageContext()，这两行代码能够了解为图形高低文的一个事物处置历程。一个高低文能够了解为分歧的观点，比方屏幕，大概此处能够了解为一幅图片。这里的两行代码起到一个离屏画布的感化——能够将view绘制上往。
drawViewHierarchyInRect:afterScreenUpdates:办法使用view条理布局并将其绘制到以后的高低文中。
最初，UIGraphicsGetImageFromCurrentImageContext()从图形高低文中猎取方才天生的UIImage。
如今，我们已完成了category的完成，接着我们只必要在利用到的中央将其import一下便可。
以下代码所示，将代码增加到DropDownMenuController.m顶部：

复制代码

#import"UIView+Screenshot.h"

复制代码

同时，将以下办法增加到不异的文件中：

1234

复制代码

-(void)updateBlur{UIImage*image=[self.view.superviewconvertViewToImage];}

复制代码

下面的代码确保是对superview举行截屏，而不单单是以后的view。不如许做的话，截屏取得的图片只是menu自己。
使用断点测试截屏图片

为了测试截屏的效果，我们在convertViewToImage挪用的上面一行增加一个断点。如许当射中断点时，程序会在断点中停息实行，如许我们就能够看到截屏的图片，以此确保截屏代码的准确性:

在测试之前另有一件事变必要做：挪用下面这个办法。
找到show办法，并在addToParentViewController上面间接挪用一下updateBlur：

123456789101112

复制代码

-(void)show{[selfaddToParentViewController];[selfupdateBlur];//AddthislineCGRectdeviceSize=[UIScreenmainScreen].bounds;[UIViewanimateWithDuration:0.25fanimations:^(void){_blurView.frame=CGRectMake(0,0,deviceSize.size.height,MENUSIZE);_backgroundView.frame=CGRectMake(0,0,_backgroundView.frame.size.width,MENUSIZE);}];}

复制代码

编译并运转程序，点击菜单按钮，能够看到Xcode在断点出中断了，以下所示：

在debugger左下角handpane当选择image，然后单击疾速查找图标按钮，就能够预览方才的截屏啦：

如上图所示，恰是我们所预期的。
显现截屏图片

将截取到的图片显现到菜单的背景中就是小菜一碟啦。
一样平常来讲我们城市使用UIImageView来显现一幅图片，而因为我们要使用GPUImage来含混图片，以是必要利用GPUImageView。
在这里的工程中，已增加好了GPUImage框架，我们只必要将头文件import一下便可。
将上面的代码增加到DropDownMenuController.m顶部：

复制代码

-(UIImage*)convertViewToImage;1

复制代码

注重：GPUImage被包括在一个框架中，以是在import语句中，必要使用尖括弧，而不是双引号。
此时，有一个_blurView，范例为UIView——是菜单的灰色背景。将UIView修正为GPUImageView，以下所示：

1234

复制代码

-(UIImage*)convertViewToImage;3

复制代码

修正以后，Xcode会报一个warning：粗心是你使用UIView举行实例化，而不是预期的GPUImageView。
能够经由过程上面的办法打消这个告诫，在viewDidLad中修正做以下修正：

复制代码

-(UIImage*)convertViewToImage;5

复制代码

紧随厥后，将以下两行代码增加出来，并移除设置背景致的代码：

-(UIImage*)convertViewToImage;6

复制代码

-(UIImage*)convertViewToImage;7

复制代码

clipToBounds属性设置为YES，把超越_blurView局限的子view埋没起来，而contentsGravity确保图片呈现在imageview的顶部。
因为_blurView已用于背景了，以是此处不必要分外设置了。
接着，我们还必要声明一个用于含混效果的过滤器。
将以下代码增加到DropDownMenuController.m:文件的@implementation中：

复制代码

-(UIImage*)convertViewToImage;9

复制代码

找到之前增加的断点，右键单击，并选中DeleteBreakpoint：

上面长短常主要的一步了——初始化含混滤镜。将以下代码增加到DropDownMenuController.m中：

1234567890

复制代码

1234567891

复制代码

注重：下面将含混半径设置为一个像素，这里临时将这个值设置低一点，如许能够确保图片的准确定位，当统统ok以后，再增添含混半径便可。
上面是时分将图片显现到GPUImageView中了。不外并非复杂的实例化一个UIImage，并将其增加到GPUImageView中。起首需创立一个GPUImagePicture。
将以下代码增加到updateBlur办法的底部：

复制代码

1234567893

复制代码

至此，我们取得了一个图片，含混滤镜和iamgeview。
接着再将以下代码增加到updateBlur底部：

1234

复制代码

1234567895

复制代码

下面这几行代码，就像胶水一样，将一切的事变联系关系起来。将滤镜当作target增加到图片中，然后将imageview当作滤镜的target。
下面代码对图片的处置全程产生在GPU上，也就是说当举行含混盘算和显现时，其实不会影响到用户界面。当处置停止时，会把图片显现到imageview下面。
编译并运转程序，点击菜单按钮，能够看到以下相似画面：

下面的图片看起来是否是有点奇异？看到的图片被缩放到适配到菜单视图中了。要对此做出修改，我们必要指定图片的哪一部分必要显现在GPUImageView中——也就是处置截屏视图的上半部分。
设置contentsRect

依照以下代码所示修正DropDownMenuController.m文件中的show办法：

1234567896

复制代码

1234567897

复制代码

经由过程指定_blurView.layer.contentsRect来界说一个矩形，在单位坐标空间(unitcoordinatespace)中，暗示只利用layercontent的一部分。
编译并运转程序，点击菜单按钮，会看到以下图所示效果：

固然已利用了图片的一部分，看起来仍是不准确，这是由于它的缩放比例还不合适！此处还短少对准确内容的缩放。
将上面这行代码增加到show办法中动画block的尾部：

复制代码

1234567899

复制代码

contentsScale属性声了然layer在逻辑坐标空间(以点为单元)和物理坐标空间(以像素为单元)之间的映照干系。更高比例因子暗示在衬着layer时，一个点代表着多个像素点。
编译并运转程序，点击菜单按钮，能够看到缩放比例已一般了：

没错——看起来很多多少了！如今封闭程序，然后从头翻开，ou~~产生了甚么？以下图所示：

看起来这仍是有点成绩。假如在对view举行animation之前将contentScale设置回2.0，会办理halfbar的成绩。
将以下代码增加到DropDownMenuController.m中

作者: 海妖 时间: 2015-1-20 09:33
最后在做项目的时候一定要认真对待，毕竟这个直接和你的就业挂钩，这也是锻炼你实际操作的能力。

作者: 老尸 时间: 2015-1-29 06:30
重要的是，放眼全球也的确找不到第二个如苹果iOS平台这样健壮、完整、先进而且为开发者带来真实收益的开发平台来。

作者: 只想知道 时间: 2015-2-5 20:14
还有开发工具是用Xcode，是在Mac系统的，你多摸索一下就可以开发简单的应用了，建议你买一本iphone开发秘籍第二版看看，希望可以帮到你，谢谢。

作者: 飘飘悠悠 时间: 2015-2-6 14:12
在此，某不才愿将安装成功的Mac OS X系统的vmware虚拟机向有志学习iOS开发的各位学友们免费开放出来，经测试，可以在WindowsXP/Win7系统上完美运行，即便你的机器只有2GB内存。

作者: 小妖女 时间: 2015-2-8 06:43
iPhone文件系统NSFileManager讲解是本文要介绍的内容，主要是通过iphone文件系统来学习NSFileManager的使用方法，具体内容来看本文详解。

作者: 爱飞 时间: 2015-2-14 01:12
到大三时，学院与我去培训的机构成立了实习基地，并让我们寒假去实习了一段时间，感觉还不错，于是在大四的时候去培训了

作者: 简单生活 时间: 2015-3-1 17:30
众多研发人员积极参与到iOS平台的开发中来也就不足为奇了。

作者: 变相怪杰 时间: 2015-3-10 21:33
最后在做项目的时候一定要认真对待，毕竟这个直接和你的就业挂钩，这也是锻炼你实际操作的能力。

作者: 灵魂腐蚀 时间: 2015-3-11 20:14
在百度搜索你想要了解的类名(苹果的cocoa和cocoatouch框架的类名很有特点很容易搜到，前缀都是NS or UI)，看别人写的博客详解

作者: 愤怒的大鸟 时间: 2015-3-13 06:11
其次学习方法和学习心态很重要，在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法，大家互相帮助，取长补短。

作者: 因胸联盟 时间: 2015-3-20 14:55
有办法利用自己手头的电脑立刻开始这个美妙旅程的。

作者: 飘灵儿 时间: 2015-4-14 18:35
其次学习方法和学习心态很重要，在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法，大家互相帮助，取长补短。

欢迎光临仓酷云 (http://ckuyun.com/)