美文网首页
毛玻璃效果

毛玻璃效果

作者: coderhlt | 来源:发表于2018-05-08 15:31 被阅读124次

    一、UIToolbar

      UIImageView *imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"wf@2x.jpg"]];
        [self.view addSubview:imageView];
        
        UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:imageView.bounds];
        toolbar.barStyle = UIBarStyleBlack;
        [imageView addSubview:toolbar];
        toolbar.alpha = 0.5;
    

    二、UIVisualEffectViewi(OS8之后苹果提供制作毛玻璃效果的相关API)

    UIVisualEffectView:继承UIView。一个实现一些复杂视觉效果的对象。个人理解就是一个具有特殊视觉效果的View。

    UIBlurEffect : 毛玻璃化效果,使UIVisualEffectView产生毛玻璃效果。是UIVisualEffect的一个子类

    UIVibrancyEffect : 生动效果, 该效果能够放大和调整放在UIVisualEffectView对象下面的内容的颜色。是UIVisualEffect的一个子类

    UIVisualEffect:一个视觉效果抽象类,继承自NSObject,是UIBlurEffect和UIVibrancyEffect的父类

    • 1、简单的毛玻璃效果
        UIImageView *imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"wf@2x.jpg"]];
        [self.view addSubview:imageView];
    
        //1.初始化一个UIVisualEffectView对象
        UIVisualEffectView *effectView=[[UIVisualEffectView alloc]init];
        effectView.frame=CGRectMake(0, 0, 400, 300);
        [imageView addSubview:effectView];
       
        //2、给UIVisualEffectView对象设置效果
        
        //2.1初始化一个UIBlurEffectStyleLight类型的毛玻璃效果的对象
        UIBlurEffect *blureffect=[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        
        //2.2设置简单的毛玻璃效果
        effectView.effect=blureffect;
    

    使用注意:量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作,比较消耗性能。 因此使用时尽量避免修改effectView的alpha。

    • 2、更生动的毛玻璃效果
      UIVibrancyEffect对象的生成是基于UIBlurEffect生成的,因此此效果的实现需要UIBlurEffect、UIVibrancyEffect配合使用。这样你就可以给UIVisualEffectView设置内容了
     UIImageView *imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"wf@2x.jpg"]];
        [self.view addSubview:imageView];
        
        //1.初始化一个UIVisualEffectView对象
        UIVisualEffectView *effectView=[[UIVisualEffectView alloc]init];
        effectView.frame=CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height/2);
        
        //1.2添加内容到effectView上
        UIView *redView = [[UIView alloc]init];
        redView.frame = effectView.bounds;
        redView.backgroundColor = [UIColor redColor];
        
        [effectView.contentView addSubview:redView];
        //注意:不能将redView直接添加到effectView上,应该将redView添加到effectView的contentView上
        
        //2、给UIVisualEffectView对象设置效果
        //2.1初始化一个UIBlurEffect对象
        UIBlurEffect *blureffect=[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        
        //2.2初始化一个UIVibrancyEffect对象
        UIVibrancyEffect * vibrancy=[UIVibrancyEffect effectForBlurEffect:blureffect];
        
        //2.3设置生动的效果
        effectView.effect=vibrancy;
        
        [imageView addSubview:effectView];
    
    屏幕快照 2018-05-08 下午3.01.39.png

    使用注意:不要在UIVisuaEffectView实例化View上面直接添加subViews,应该将需要添加的子视图添加到其contentView上。

      UIImageView *imageView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"wf@2x.jpg"]];
        [self.view addSubview:imageView];
        
        //1.初始化一个UIVisualEffectView对象
        UIVisualEffectView *effectView=[[UIVisualEffectView alloc]init];
        effectView.frame=CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height/2);
        
        //1.2添加内容到effectView上
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(100,00,280,90)];
        
        label.text=@"我是一名ios开发者";
        
        label.textAlignment=NSTextAlignmentLeft;
        
        label.font= [UIFont systemFontOfSize:30];
        
        label.tintColor=[UIColor redColor];//lable.textcolor是不起作用的
        //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.
        
        [effectView.contentView addSubview:label];
        //注意:不能将label直接添加到effectView上,应该将redView添加到effectView的contentView上
        
        //2、给UIVisualEffectView对象设置效果
        //2.1初始化一个UIBlurEffect对象
        UIBlurEffect *blureffect=[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
        
        //2.2初始化一个UIVibrancyEffect对象
        UIVibrancyEffect * vibrancy=[UIVibrancyEffect effectForBlurEffect:blureffect];
        
        //2.3设置生动的效果
        effectView.effect=vibrancy;
        
        [imageView addSubview:effectView];
    
    
    屏幕快照 2018-05-08 下午3.33.32.png

    相关文章

      网友评论

          本文标题:毛玻璃效果

          本文链接:https://www.haomeiwen.com/subject/oooirftx.html