在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果。

【阴影和圆角】

下面以一个普通的蓝色View为例,介绍layer的功能:

_blueView.layer.shadowOpacity = 1.0; // 阴影不透明度
_blueView.layer.shadowColor = [UIColor redColor].CGColor; // 注意所有颜色都要转换为CGColor
_blueView.layer.shadowRadius = 20.0; // 阴影半径
_blueView.layer.shadowOffset = CGSizeMake(20, 20); //阴影偏移,以View中心为原点
_blueView.layer.cornerRadius = _blueView.frame.size.width * 0.5; // 圆角半径,当圆角半径为View尺寸一半时恰好得到圆形
_blueView.layer.borderColor = [UIColor whiteColor].CGColor; // 边框颜色
_blueView.layer.borderWidth = 5; // 边框尺寸

通过这段代码,我们设置了蓝色View的一系列属性,注意设置颜色时的转换。得到的效果如下图所示:

通过这一点我们可以看到layer的强大。

通过这样的方法,我们可以轻易的实现头像的圆角和外框,只要设置UIImageView的layer圆角、边框即可,需要注意的是,图片所在的层是其子层,因此应该设置父层的maskToBounds属性,保证子层裁剪到父层的尺寸。

_headerView.layer.cornerRadius = _headerView.frame.size.width * 0.5;
_headerView.layer.masksToBounds = YES; // 保证子层裁剪到父层尺寸
_headerView.layer.borderWidth = 5;
_headerView.layer.borderColor = [UIColor redColor].CGColor;

实现的效果如下图所示:

【3D变换】

直接修改View的transform,可以实现2D变换,而修改layer可以实现3D变换,3D变换的意义在于可以让图像以与屏幕平行的方向为轴旋转,或者斜着向屏幕内翻转,实现立体效果,要实现3D变换,只要传递3D向量坐标即可,先了解一下坐标系。

与二维类似,向右为x、向下为y,垂直屏幕向外为z。

旋转时,传递的是弧度制转角和旋转轴坐标。

平移时,传递的是三轴的位移量,如果没有相对屏幕翻转,z轴的位移是看不出来的。

缩放时,传递的是三轴的缩放量。

需要注意的是,这三个量通过make实现,则会相互覆盖,一定要保证前面完成后再传递下一个动作。

_blueView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
_blueView.layer.transform = CATransform3DMakeTranslation(10, 10, 0);
_blueView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1.0);

除此之外,还可以通过KVC实现属性的操作,通过KVC还可以实现对不能直接访问的属性的操作,例如translation.x。

普通的设置:

[_blueView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)] forKeyPath:@"transform"];

对不能直接访问属性的设置,不推荐。

[_blueView.layer setValue:@30 forKeyPath:@"transform.translation.x"];

通过3D变换可以做出各种酷炫的效果,例如下图相对屏幕旋转:

(一一九)通过CALayer实现阴影、圆角、边框和3D变换的更多相关文章

  1. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  2. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  3. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  4. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

  5. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  6. CSS3 阴影与圆角边框

    ㈠css3的新特性实际应用 ⑴文本阴影效果,用代码编写的方式实现   ⑵鼠标悬停的动态效果 左侧三幅图片,上面初始状态是没有说明文本的,但把鼠标放在上面的时候,这个图片上面就出现了说明文字   ⑶分栏 ...

  7. css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  8. 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  9. iOS开发小技巧 -- tableView-section圆角边框解决方案

    [iOS开发]tableView-section圆角边框解决方案 tableView圆角边框解决方案 iOS 7之前,图下圆角边框很容易设置 iOS 7之后,tableviewcell的风格不再是圆角 ...

随机推荐

  1. 【HDU 2669】Romantic

    Problem Description The Sky is Sprite.The Birds is Fly in the Sky.The Wind is Wonderful.Blew Throw t ...

  2. [JLOI2015]城池攻占 左偏树

    题目描述 小铭铭最近获得了一副新的桌游,游戏中需要用 m 个骑士攻占 n 个城池.这 n 个城池用 1 到 n 的整数表示.除 1 号城池外,城池 i 会受到另一座城池 fi 的管辖,其中 fi &l ...

  3. 【bzoj4009 hnoi2015】接水果

    题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black, 她觉得这个游戏太简单了,于是发明了一个更加难的版本. 首先有 ...

  4. ●SPOJ 8222 NSUBSTR - Substrings(后缀数组)

    题链: http://www.spoj.com/problems/NSUBSTR/ 题解: 同届红太阳 --WSY给出的后缀数组解法!!! 首先用倍增算法求出 sa[i],rak[i],hei[i]然 ...

  5. C# 枚举在项目中使用心得

    阅读目录 基本介绍 使用注意 使用方法 扩展用法     本文主要是我在项目中对C#枚举的使用心得,如有不足的地方欢迎您指出. 一.基本介绍  枚举是由一组特定常量构成的一组数据结构,是值类型的一种特 ...

  6. 利用maven install jar到项目当中

    接着上面利用maven打好的jar包.把刚刚打好的包放入其他项目当中怎么办? 只需要在相同的目录下执行mvn install,maven会自动把jar放到本地仓库中. 这样,原先maven项目中缺少依 ...

  7. CSS3左右间歇晃动效果

    今天在做一个活动页面时,产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果,并且该效果是间歇执行的.我一想应该挺简单的吧,二话没说就答应了,谁知在真正实现的时候才发现还是有些许困难的.于是就在网 ...

  8. 简单的国际化i18n

    就是简单的中英文转换 index.jsp <%@ page language="java" contentType="text/html; charset=UTF- ...

  9. 深入理解final关键字

    在了解了final关键字的基本用法之后,这一节我们来看一下final关键字容易混淆的地方. 1.类的final变量和普通变量有什么区别? 当用final作用于类的成员变量时,成员变量(注意是类的成员变 ...

  10. SSA-一种适合中小型企业的新型服务架构

    写在前面 好久好久没写了,最近刚换了工作,花了几天的时候熟悉了项目,接着就是功能的完善,随后就是对新项目的基础架构搭建. 看过Po主博客的都知道,Po主一直致力于推广.Net Core在微服务架构上的 ...