IOS 8视觉特效Visual Effects实现方法.docx

IOS 8视觉特效Visual EffectsVisual Effects和Visual Effect 正确区分了吧？请通查本章每一处后确定已全部统一为Visual Effects。实现方法从iOS 7开始，苹果改变了App的UI风格和动画效果，例如当导航栏出现在屏幕上的效果。尤其是苹果在iOS 7中，使用了全新的雾玻璃效果（模糊特效）。不仅仅是导航栏，通知中心和控制中心也采用了这个特殊的视觉效果。但是苹果并没有在SDK中放入这个特效，程序员不得不使用自己的方法在模拟这个效果，一直到iOS 8的出现。在iOS 8中，SDK中终于正式加入了这个特性，不但让程序员易于上手，而且性能表现也很优秀。苹果将之称为Visual Effects（视觉效果）。Visual Effects是一整套的视觉特效，包括了UIBlurEffect和UIVibrancyEffect。这两者都是UIVisualEffect的子类，前者允许在你App中动态地创建实时的雾玻璃效果，而后者则允许你在雾玻璃上“写字”。接下来，我们将介绍Visual Effects。19.1 Visual Effects 初步Visual Effects其实可以直接在IB中使用，在IB的Object Library 中，新增了两个Visual Effect View对象。这是我们使用Visual Effects的最简单方法。19.1.1 初始项目初始项目位于本章源代码文件夹下的VisualEffectsStarter。在初始项目中，我们已经为程序创建了基本的框架代码和必要的UI布局，在接下来的章节中，作者将在这个初始项目的基础上进行工作。打开初始项目，在项目导航窗口，有2个ViewController类是值得注意的：l ViewController.swift程序一启动时显示的ViewController。在这个界面中我们仅仅显示了一张图片（UIImageView）和一个导航栏右按钮。l PopupVC.swift当用户点击导航栏上的右按钮，从屏幕底部弹出这个ViewController。这个ViewController只占据了屏幕下端的160个像素高度。上面显示了2个图形按钮。运行程序，这个简单的程序模拟了一个弹出菜单的效果：图 19 - 1初始项目运行效果再次点击导航栏按钮，PopupVC收起。19.1.2 使用Visual Effect View实现模糊特效打开Main.storyboard。选择PopupVC Scene。我们将在这个View Controller中使用Visual EffectVisual Effects和Visual Effect 正确区分了吧？s。在右边的Object Library面板，在搜索栏中输入“visual”，这将迅速定位到两个Visual Effect View对的。控件名。控件。图 19 - 2 Object Library中的Visual Effect View拖一个Visual Effect View with Blur到PopupVC的View上。在Document Outline窗口中，调整Visual Effect View with Blur的位置，使它位于2个按钮之下：图 19 - 3 将Visual Effect View插入到最底层调整Visual Effect View的自动布局，使它占据整个View大小：图 19 - 4 设置Visual Effect View的约束在属性面板，设置Visual Effect View的Blur Style属性为Light。Blur Style可以有3个值：Extra Light、Light、Dark，分别有3种不同的模糊效果：很亮、亮、暗色。在IB中无法看到Visual Effect View的效果，我们需要运行程序。运行程序，下图为Blur Style分别设置为Light和Dark的效果：图 19 - 5 Light和Dark模糊效果如果你看不到丝毫模糊效果（添不添加Visual Effect View都一样），则你可能要将PopupVC的view设置为背景透明。19.1.3 使用Visual Effect View实现Vibrancy效果Vibrancy效果是一种专门应用在模糊效果上的特殊效果。它会在模糊效果的基础上留下一些特殊的空洞，使得这些地方上的内容看起来更加生动。你可以想像一下雾玻璃效果是什么。它就好像是冬天的时候，你在玻璃上哈气。原本透明的玻璃哈上气后，会结上一层水汽，看起来就像是“雾玻璃”一样。如果你伸手在这层水汽上写字，则会在雾气上留下明显的字迹，这就是Vibrancy效果。我们可以使用Visual Effect View来实现Vibrancy效果。Vibrancy效果使用Object Library中的“Visual Effect Views with Blur and Vibrancy”来实现。从名称上看，“Visual Effect Views with Blur and Vibrancy”包括了两个Visual Effect View：一个Blur Visual Effect View和一个Vibrancy Visual Effect View。事实上也是这样的，Vibrancy效果并不能单独应用，它必需应用到Blur效果之上。我们可以这样理解：Vibrancy效果是一种“雾玻璃写字”的效果，则我们只能在先有了“雾玻璃”的情况下才能写字。打开Main.storyboard，先删除PopupVC上的 Visual Effect View。然后从Object Library中拖一个“Visual Effect Views with Blur and Vibrancy”到PopupVC中，同样需要在Document Outline窗口中将它调整至View中的最下面一层：图 19 - 6 插入Visual Effect Views with Blur and Vibrancy如上图所示，Visual Effect Views with Blur and Vibrancy包含了两个Visual Effect View。第二层Visual Effect View位于第一层Visual Effect View的View中。为了方便起见，我们不妨把第一层Visual Effect View称作Blur层，把第二层Visual Effect View称作Vibrancy层。Blur层将作为“雾玻璃”使用，因此我们将它的自动布局设置为占据整个View同时Blur Style设置为Light:图 19 - 7 设置雾玻璃效果同时，将Blur层下面的View的背景设置为透明。第二层用于实现Vibrancy。同样，将它的自动布局设置为占据整个View，同时设置它的Blur Style为Light，Vibrancy为启用：图 19 - 8 设置Vibrancy效果同时，设置Vibrancy层的View的背景为透明。接下来我们要在Vibrancy层的View上写字。拖一个UILabel到Vibrancy层的View上，设置Label的Text为“Vibrancy”，并设置自动布局约束如下图所示：图 19 - 9 设置Label位于视图右下角注意，Label必须位于Vibrancy层的View之中。也就是说，把Vibrancy层放到Blur层的View中，再把UILabel(要写的字)放到Vibrancy层的View中。运行程序，我们可以在UILabel上看出Vibrancy最终的效果：图 19 - 10 Vibrancy效果看到Vibrancy效果了吗？现在，透过单词“Vibra