zoukankan      html  css  js  c++  java
  • CoreAnimation 视觉效果

    CoreAnimation 视觉效果


        CoreAnimation 目录

        博客园MakeDown支持不佳,如有需要请进GitHub

        iPhone手机的视觉效果是十分优秀的,因此作为iOS工程师一定要对其视觉效果的处理有一定的了解.本编博客主要内容如下.

    • 圆角
    • 图层边框
    • 阴影
    • 图层蒙板

        首先我们先在主视图上添加两个普通的视图,稍后对其进行相应的视觉效果处理.

    图片一

    圆角

        圆角是iOS的独特之处,其让我们感觉我们所看到的一切并不是那么的生硬.我将让绿色视图产生一个合适的圆角.

    图片二

        绿色视图的圆角让我们觉得很舒服,而且实现起来也十分简单,只需要下面的一行代码.

    self.customView.layer.cornerRadius = 20;
    

        绿色视图达到了我们想要的效果,但是上面的小视图遮住了绿色视图的圆角,于此同时我们也不希望将小时图remove因此我们可能需要 masksToBounds,我们将其设置为 YES就可已得到以下的效果.

    图片三

        这样看起来很舒服,与此同时小视图的效果我们也保存了下来.

    图层边框

        在某些场景我们可能会用到类似于相框一样效果的边框,那样可以让视图看起来更加丰满一些,就像下图一样.

    图片四

        图片四与图片三相比,更可以突出边框所包括的视图内容,想要达到此效果很简单.

    // 边框颜色
    self.customView.layer.borderColor = [UIColor blueColor].CGColor;
    // 边框宽度
    self.customView.layer.borderWidth = 2;
    

    阴影

        以上两个视图效果属性是很常用也是很简单的,接下来便是一个很常用但是稍有复杂的属性-阴影.先看一下简单的效果(为了便于观察,我将此图片放大一点.).

    图片五

        可以发现绿色视图的四边有着蓝色的阴影,看起来绿色视图很是显眼,阴影的效果也正是如此,让有阴影存在的视图更加凸显.实现图片五的效果我们需要添加以下代码.

    [self.topView removeFromSuperview];// 删除小视图 避免影响阴影的展示
    self.customView.layer.shadowOpacity = 1;// (0.0:不可见 ~ 1.0:完全不透明)
    self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
    self.customView.layer.shadowOffset = CGSizeZero;
    self.customView.layer.shadowRadius = 5;// 模糊度(半径) 度数值越大越模糊
    
    • shadowOpacity:该属性是控制阴影的可见度的,正如备注,如果设置为0阴影将不会展示.
    • shadowColor:该属性是设置阴影的颜色.
    • shadowOffset:该属性是设置阴影的偏移量,是CGSize类型.例如(0,2)水平不偏移,垂直向下偏移2.
    • shadowRadius:该属性字面理解为阴影的半径,实际效果是设置的值越大,模糊区域越宽,模糊的效果也就越明显.

        以上是阴影的正常效果,但是当我设置 masksToBoundsYES的时候阴影将会消失.因为masksToBounds的效果就是将图层意外的效果剪裁掉.

    图片六

        可是实际状况下我们完全是存在阴影效果与masksToBounds同时使用的,那么我们就需要做一些其他的操作.

    1. 首先我们对主图层进行阴影,圆角属性的设置.
        self.customView.layer.shadowOpacity = 1;// (0.0:不可见 ~ 1.0:完全不透明)
        self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
        self.customView.layer.shadowOffset = CGSizeMake(0, 10);
        self.customView.layer.shadowRadius = 5;// 模糊度(半径) 度数值越大越模糊
    
    1. 构建一个新的图层,此图层设置圆角以及设置masksToBounds.
    UIView * tempLayerTwo = [[UIView alloc]init];
    tempLayerTwo.frame = self.customView.bounds;
    tempLayerTwo.backgroundColor = [UIColor greenColor];
    tempLayerTwo.layer.cornerRadius = 20;
    tempLayerTwo.layer.masksToBounds = YES;
    
    1. 将新构建的图层add到主图层上,运行查看效果.
    [self.customView addSubview:tempLayerTwo];
    
    图片七

        到此为止阴影的基本操作以及使用技巧已经介绍的大部分了,接着有一个较为实用的属性是:shadowPath.其可以根据path绘制出相应的阴影.

    CGMutablePathRef squarePath = CGPathCreateMutable();
    CGPathAddRect(squarePath, NULL, self.customView.bounds);
    self.customView.layer.shadowPath = squarePath;
    CGPathRelease(squarePath);
    
    图片八

    图层蒙板

        图层蒙板听起来有一点点陌生,但是理解起来还是十分容易的,举个栗子.我现在有两个图层一个图层是五角星的形状但是颜色是紫色的,我们伟大祖国的五角星是黄色的,凑巧的是我的另一个图层是黄色的,那么这个时候我就可以利用黄色图层的mask属性来简单的构造一个黄色的五角星.这里做了一个不知道是什么形状的图片.

    图片九

        我通过添加下面的代码就可以将其颜色改变为绿色.

    CALayer * makeLayer = [[CALayer alloc]init];
    makeLayer.frame = self.customView.bounds;
    UIImage * makeImage = [UIImage imageNamed:@"black"];
    makeLayer.contents = (__bridge id)makeImage.CGImage;
    
    self.customView.layer.mask = makeLayer;
    
    图片十
  • 相关阅读:
    VS Visual Studio connection(); Microsoft Visulal Studio vNext & Azure
    无废话WCF入门教程六[一个简单的Demo]
    JS代码混淆 支持PHP .NET PERL
    C#/vbscript/JS如何加密保护HTML/javascript源代码
    JavaScript加密解密7种方法总结分析
    模型融合---Stacking调参总结
    模型融合---Xgboost调参总结
    模型融合---GBDT调参总结
    为什么正则化可以减小过拟合?
    python中的filter、map、reduce、apply用法
  • 原文地址:https://www.cnblogs.com/xubaoaichiyu/p/6567599.html
Copyright © 2011-2022 走看看