[TOC]

UIVisualEffect(毛玻璃效果)

毛玻璃效果 均是iOS8.0开始增加的API。

主要有四个类:

@interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding> 
    @interface UIBlurEffect : UIVisualEffect
    @interface UIVibrancyEffect : UIVisualEffect 

@interface UIVisualEffectView : UIView <NSSecureCoding>

UIVisualEffect

UIVisualEffect是一个继承自NSObject的创建视觉效果的基类,这个类除了继承自NSObject的属性和方法外,没有提供任何新的属性和方法。

主要使用它的两个子类:

  1. UIBlurEffect: blur(毛玻璃)效果

  2. UIVibrancyEffect: 放大和调整效果

    通常UIVibrancyEffect对象是与UIBlurEffect一起使用,主要用于处理在UIBlurEffect特效上的一些显示效果。

@interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding>
@end

----毛玻璃效果---------------

@interface UIBlurEffect : UIVisualEffect

+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;

  typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
      UIBlurEffectStyleExtraLight,
      UIBlurEffectStyleLight,
      UIBlurEffectStyleDark,
      UIBlurEffectStyleExtraDark __TVOS_AVAILABLE(10_0) __IOS_PROHIBITED __WATCHOS_PROHIBITED,
      UIBlurEffectStyleRegular NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
      UIBlurEffectStyleProminent NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
  } NS_ENUM_AVAILABLE_IOS(8_0);

@end

---放大和调整效果----------------

@interface UIVibrancyEffect : UIVisualEffect
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;
@end

UIVisualEffectView

UIVisualEffectView对象可以看作是效果的一个容器,实际的效果会影响到该视图对象底下的内容

  • 需要注意是的,不应该直接添加子视图到UIVisualEffectView视图中,而是应该添加到UIVisualEffectView对象的contentView中。
  • 尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU,也可能会导致许多效果显示不正确或者根本不显示。
@interface UIVisualEffectView : UIView <NSSecureCoding>
@property (nonatomic, strong, readonly) UIView *contentView; 
// Do not add subviews directly to UIVisualEffectView, use this view instead.
@property (nonatomic, copy, nullable) UIVisualEffect *effect;
- (instancetype)initWithEffect:(nullable UIVisualEffect *)effect NS_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder;
@end

实践

- (void)viewDidLoad {
    [super viewDidLoad];
    //测试字体
    UILabel *ceshi1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 150, 50)];
    ceshi1.text = @"测试";
    ceshi1.textAlignment = NSTextAlignmentCenter;
    ceshi1.font = [UIFont boldSystemFontOfSize:34];

    UILabel *ceshi2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 150, 50)];
    ceshi2.text = @"测试";
    ceshi2.textAlignment = NSTextAlignmentCenter;
    ceshi2.font = [UIFont boldSystemFontOfSize:34];


    //原图:
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 120, 140, 50)];
    label.text = @"原图:";
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont boldSystemFontOfSize:14];
    [self.view addSubview:label];

    UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(150, 70, 150, 150)];
    imgv.image = [UIImage imageNamed:@"pikaqiu.jpg"];
    [self.view addSubview:imgv];


    //毛玻璃效果:
    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 280, 140, 50)];
    label1.text = @"blur毛玻璃效果:";
    label1.textAlignment = NSTextAlignmentCenter;
    label1.font = [UIFont boldSystemFontOfSize:14];
    [self.view addSubview:label1];

    UIImageView *imgv1 = [[UIImageView alloc] initWithFrame:CGRectMake(150, 280, 150, 150)];
    imgv1.image = [UIImage imageNamed:@"pikaqiu.jpg"];
    [self.view addSubview:imgv1];

    //blur
    UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
    UIVisualEffectView * blurView = [[UIVisualEffectView alloc] initWithEffect:blur];
    blurView.frame = imgv1.bounds; //blurView的大小可以自行设定, 它的大小决定了显示毛玻璃效果区域的大小
    blurView.alpha = 1.0f; //最好不要小于1.0

    [imgv1 addSubview:blurView];
    [blurView.contentView addSubview:ceshi1];



    //blur+vibrancy效果:
    UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 490, 140, 50)];
    label2.text = @"blur+vibrancy效果:";
    label2.textAlignment = NSTextAlignmentCenter;
    label2.font = [UIFont boldSystemFontOfSize:14];
    [self.view addSubview:label2];

    UIImageView *imgv2 = [[UIImageView alloc] initWithFrame:CGRectMake(150, 440, 150, 150)];
    imgv2.image = [UIImage imageNamed:@"pikaqiu.jpg"];
    [self.view addSubview:imgv2];


    //blur+vibrancy
    UIBlurEffect *blur2 = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
    UIVisualEffectView * blurView2 = [[UIVisualEffectView alloc] initWithEffect:blur2];
    blurView2.frame = imgv2.bounds;
    blurView2.alpha = 1.0f;
    [imgv2 addSubview:blurView2];

    UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur2]; //必须对应的blur2
    UIVisualEffectView * vibrancyView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
    vibrancyView.frame = imgv2.bounds;
    vibrancyView.alpha = 1.0f;
    //[imgv2 addSubview:vibrancyView];
    [blurView2.contentView addSubview:vibrancyView]; //必须通过contentView添加
    [vibrancyView.contentView addSubview:ceshi2];

}

results matching ""

    No results matching ""