Swift 之模糊效果(毛玻璃效果,虚化效果)的实现
前言:
之前项目中有用到过Objective-C的的模糊效果,感觉很是不错,而且iOS8之后官方SDK也直接提供了可以实现毛玻璃效果的三个类:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView。通过这三个类可以很容易的去实现毛玻璃效果。
最近在熟悉Swift,所以今天说的是使用Swift去实现这种效果。
前提:
我们去实现的模糊效果有个前提,就是需要背景有一个色调,这样才能使毛玻璃有一个明显的效果,这里我直接在底部添加一个背景图片吧
我们就在这张背景图片上去实现模糊效果。
//MARK: ******* 创建背景图片 *************
func createBackgroundImageView() {
self.imageView1 = UIImageView(frame: self.view.bounds) imageView1.layer.borderColor = UIColor.black.cgColor
imageView1.layer.borderWidth = imageView1.layer.cornerRadius = imageView1.clipsToBounds = true imageView1.image = UIImage(named: "") self.view.addSubview(imageView1) }
1、UIBlurEffect类(用作创建一个模糊效果)
SDK中提供的模糊效果有5种,其中两种是iOS10之后添加的,我们来看一下:
/**
public enum UIBlurEffectStyle : Int { case extraLight case light case dark @available(iOS 10.0, *)
case regular // Adapts to user interface style @available(iOS 10.0, *)
case prominent // Adapts to user interface style
}
*/
我们就直接创建好了,代码如下:
//创建一个模糊效果
let blurEffect = UIBlurEffect(style: .light)
上面使用的是普通的亮色。
2、UIVibrancyEffect类
UIVibrancyEffect 主要用于放大和调整 UIVisualEffectView 视图下面的内容的颜色,同时让 UIVisualEffectView 的 contentView 中的内容看起来更加生动。
//创建并添加vibrancy视图
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
3、UIVisualEffectView类
UIVisualEffectView:模糊视图。将前面创建的 UIBlurEffect 类的实例应用到这个模糊视图上。将 UIVisualEffectView 类的实例(模糊视图)置于待毛玻璃化的视图之上即可。在其下方的所有视图都会有模糊效果。值得一提的是:不要直接添加子视图去UIVisualEffectView,而是要添加到contentView上。
//创建一个承载模糊效果的视图
let blurView = UIVisualEffectView(effect: blurEffect)
4、整体的代码实现
下面我们直接看整体的代码实现:
这部分分为两种,效果也是不一样的:
先看一下效果图:
4.1 UIBlurEffect和 UIVisualEffectView两者配合使用
func showBlurEffect() { //创建一个模糊效果
let blurEffect = UIBlurEffect(style: .light)
//创建一个承载模糊效果的视图
let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: , y: , width: viewWidth+*space, height: Double(viewHeight)) let label = UILabel(frame: CGRect(x: , y: , width: viewWidth - , height: )) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: )
label.numberOfLines =
label.textAlignment = .center
label.textColor = UIColor.white blurView.contentView.addSubview(label) self.view.addSubview(blurView) }
4.2 UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView
func showBlurEffectWithUIVibrancyEffect() {
//创建一个模糊效果
let blurEffect = UIBlurEffect(style: .light)
//创建一个承载模糊效果的视图
let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRect(x: , y: Double(viewHeight+), width: viewWidth+*space, height: Double(viewHeight)) self.view.addSubview(blurView) //创建并添加vibrancy视图
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect) let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
vibrancyView.frame = self.view.bounds let label = UILabel(frame: CGRect(x: , y: viewY, width: viewWidth - , height: )) label.text = "bfjnecsjdkcmslc,samosacmsacdfvneaui" label.font = UIFont.boldSystemFont(ofSize: )
label.numberOfLines =
label.textAlignment = .center
label.textColor = UIColor.white vibrancyView.contentView.addSubview(label) blurView.contentView.addSubview(vibrancyView) self.view.addSubview(blurView) }
图片的前者是:UIBlurEffect和 UIVisualEffectView两者配合使用
后者:UIBlurEffect、UIVibrancyEffect 和 UIVisualEffectView
Swift 之模糊效果(毛玻璃效果,虚化效果)的实现的更多相关文章
- iOS模糊效果(毛玻璃效果)的实现
前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解.但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番. ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...
- android 开发 - 对图片进行虚化(毛玻璃效果,模糊)
概述 IPAD,IPHONE上首页背景的模糊效果是不是很好看,那么在 Android中如何实现呢.我通过一种方式实现了这样的效果. 开源库名称:anroid-image-blur 一个android ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- iOS开发探索-高斯模糊&毛玻璃效果
iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...
随机推荐
- Android ExpandableGridView的实现
近期在做项目的时候碰到了这样一个布局 在android中有种实现折叠list方式是ExpandableListView 但是官方没有ExpandableGridView 那么怎么样用Expandab ...
- ubuntu 系统下搭建Java的环境
1.首先可以使用 java -version来查看自己是否已经搭建了java的环境,如果出现了java的版本号则表示java的环境已经搭建好了!否则则继续下面的步骤进行java环境的搭建 2.进入Or ...
- plsql配置数据库连接
工具/原料 PL/SQL 方法/步骤 在Oracle的安装文件下查找tnsnames.ora文件,一般路径如: ORACLE_HOME%\network\admin下: 如果真的找不到路径 ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- Android学习资料收集
1.Android 学习之路 http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/
- php模拟http请求的方法
我在这里终结了三种方法 第一种方法:fsockopen $flag = 0; $post = ''; $errno = ''; $errstr = ''; //要post的数据 $argv = arr ...
- 用open_gapps安装google play
说明 一个开放源码脚本自动生成最新的谷歌应用程序包.对整个google play 程序框架的打包,包括一些google官方的程序.对于阉割了google ply用户来说是一个不错的选择. 使用 下载 ...
- python 端口扫描
#!/usr/bin/env python #-*- coding:utf-8 -*- import socket #iptable=[] nmapport=[21, 22, 23, 80, 110] ...
- js_继承
一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码代码如下: <SPAN style="<SPAN style="FONT- ...
- excel小技巧
数据呈文本格式,怎么改成数字? 数据前有'号,如何去掉? 为什么数据格式在修改后需要再双击一下单元格才改过来了? 解决办法:你选中需要更改格式的那列 数据 ...