iOS 8.0 毛玻璃效果UIVisualEffect

随着iOS8.0和OS X 10.0的发布,大量的毛玻璃效果随处可见.

以前我们实现毛玻璃效果,更多是通过CGImage来实现.现在,XCode6中自带了实现这一效果的API.API如下:

typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
    UIBlurEffectStyleExtraLight,
    UIBlurEffectStyleLight,
    UIBlurEffectStyleDark
} NS_ENUM_AVAILABLE_IOS(8_0);

NS_CLASS_AVAILABLE_IOS(8_0) @interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding> @end

/* UIBlurEffect will provide a blur that appears to have been applied to the content layered behind the UIVisualEffectView. Views added to the contentView of a blur visual effect are not blurred themselves. */
NS_CLASS_AVAILABLE_IOS(8_0) @interface UIBlurEffect : UIVisualEffect
+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;
@end

/* UIVibrancyEffect amplifies and adjusts the color of content layered behind the view, allowing content placed inside the contentView to become more vivid. It is intended to be placed over, or as a subview of, a UIVisualEffectView that has been configured with a UIBlurEffect. This effect only affects content added to the contentView. Because the vibrancy effect is color dependent, subviews added to the contentView need to be tintColorDidChange aware and must be prepared to update themselves accordingly. UIImageView will need its image to have a rendering mode of UIImageRenderingModeAlwaysTemplate to receive the proper effect.
 */
NS_CLASS_AVAILABLE_IOS(8_0) @interface UIVibrancyEffect : UIVisualEffect
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;
@end

NS_CLASS_AVAILABLE_IOS(8_0) @interface UIVisualEffectView : UIView <NSSecureCoding>
@property (nonatomic, retain, readonly) UIView *contentView; // Do not add subviews directly to UIVisualEffectView, use this view instead.
@property (nonatomic, copy, readonly) UIVisualEffect *effect;
- (instancetype)initWithEffect:(UIVisualEffect *)effect NS_DESIGNATED_INITIALIZER;
@end

@测试代码:

    // 图片
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 100, 300, 400)];
    [imageView setImage:[UIImage imageNamed:@"IMG_0015.JPG"]];
    [self.view addSubview:imageView];

    // blur效果
    self.visualEfView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
    _visualEfView.frame = CGRectMake(0, 0, 300, 400);
    _visualEfView.alpha = 1.0;
    [imageView addSubview:_visualEfView];

@Demo运行效果:

时间: 2024-10-12 01:19:57

iOS 8.0 毛玻璃效果UIVisualEffect的相关文章

iOS开发探索-高斯模糊&amp;毛玻璃效果

iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效果达到图片模糊效果. 左边玻璃右边模糊 高斯模糊效果 1. CoreImage: iOS5.0之后就出现了Core Image的API,Core Image的API被放在CoreImage.framework库中, 在iOS和OS X平台上,Core Image都提供了大量的滤镜(Filter),在

iOS - 毛玻璃效果

iOS - 毛玻璃效果 iOS8之后苹果提供了制作毛玻璃效果的API 就是这个UIVisualEffectView,用这个initWithEffect:去初始化,然后呢,他有两种效果继承自UIVisualEffect.这个父类不用管,什么也不做,主要看他的两个子类UIBlurEffect和UIVibrancyEffect. UIBlurEffect : 这个是影响毛玻璃后面视图的 效果图: UIVibrancyEffect : 这个是影响毛玻璃上的视图的 是不是很漂亮,做起来也不难呢. 先说毛玻

iOS模糊效果(毛玻璃效果)的实现

前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解.但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番.记录一下. iOS8之后,Apple新添加UIBlurEffect类.UIVibrancyEffect类 和 UIVisualEffectView类这三种类,用途就是对背景色进行模糊化,也就是我们称的 "毛玻璃效果".接下来就对具体的使用做一下分析吧. 其实细看下来,Apple对这种特效封

iOS毛玻璃效果

iOS7新API-实现毛玻璃效果  <转载> 原图: 效果图: 实现: 首先需要导入Accelerate.framework. 然后把两个文件加入到自己的项目中即可. UIImage+ImageEffects.h #import <UIKit/UIKit.h>@interface UIImage (ImageEffects)- (UIImage *)applyLightEffect; - (UIImage *)applyExtraLightEffect; - (UIImage *)

IOS实现毛玻璃效果的三种方式

方式一:UIToolBar实现毛玻璃特效 在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类,并且使用相当简单,几行代码就可以搞定. 1 /* 2 毛玻璃的样式(枚举) 3 UIBarStyleDefault = 0, 4 UIBarStyleBlack = 1, 5 UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack 6 UIBarStyleBlackTranslucent =

iOS 实现简单的毛玻璃效果

最近在整理导航栏的渐隐渐现效果,整理过程中偶然学会了图片的毛玻璃效果实现,很简单,不多说了,先上图看看效果对比, 这是原图, 这是加了效果后的,创建图片的代码就不上了,下面看下添加效果的代码: // 毛玻璃 /* 系统自带的三种风格 UIBlurEffectStyleExtraLight,//额外亮度,(高亮风格) UIBlurEffectStyleLight,//亮风格 UIBlurEffectStyleDark//暗风格 */ UIBlurEffect *effect = [UIBlurEf

iOS 毛玻璃效果设置

//设置毛玻璃效果 +(void)blurEffrct:(UIView *)view{ UIBlurEffect* effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView* effectView = [[UIVisualEffectView alloc] initWithEffect:effect]; effectView.frame =view.bounds; [view addSub

移动端UI设计越来越流行的高斯模糊(Gaussian blur)和毛玻璃效果(磨砂效果),如何使用Android RenderScript简单实现?

高斯模糊(Gaussian blur)和毛玻璃效果(亦称磨砂效果),近两年在移动端的UI设计上越来越流行,特别是iOS手机上出现的较多,iOS系统也提供了相应的API帮助开发人员分分钟实现这两个效果.而Android系统则经历了一个漫长的探索过程,对图片的处理,从Java算法到NDK方式实现等,各种摸索层出不穷. 值得欣慰的是,Google终于在API 11中引入了 RenderScript ,一个强大的图片处理框架,帮助Android开发人员专注于图片处理算法而不是API的调度工作.使用Ren

CSS遮罩效果和毛玻璃效果

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width