(一一九)通过CALayer实现阴影、圆角、边框和3D变换
在每个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变换的更多相关文章
- CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影
圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...
- css3圆角边框,边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- CSS3(1)---圆角边框、边框阴影
CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...
- CSS3 阴影与圆角边框
㈠css3的新特性实际应用 ⑴文本阴影效果,用代码编写的方式实现 ⑵鼠标悬停的动态效果 左侧三幅图片,上面初始状态是没有说明文本的,但把鼠标放在上面的时候,这个图片上面就出现了说明文字 ⑶分栏 ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)
4.4圆角边框 圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- iOS开发小技巧 -- tableView-section圆角边框解决方案
[iOS开发]tableView-section圆角边框解决方案 tableView圆角边框解决方案 iOS 7之前,图下圆角边框很容易设置 iOS 7之后,tableviewcell的风格不再是圆角 ...
随机推荐
- [USACO16OPEN]关闭农场Closing the Farm_Silver
题目描述 FJ和他的奶牛们正在计划离开小镇做一次长的旅行,同时FJ想临时地关掉他的农场以节省一些金钱. 这个农场一共有被用M条双向道路连接的N个谷仓(1<=N,M<=3000).为了关闭整 ...
- 【Codeforces Round #430 (Div. 2) A C D三个题】
·不论难度,A,C,D自己都有收获! [A. Kirill And The Game] ·全是英文题,述大意: 给出两组区间端点:l,r,x,y和一个k.(都是正整数,保证区间不为空),询问是否 ...
- [bzoj4763]雪辉&[bzoj4812][Ynoi2017]由乃打扑克
来自FallDream的博客,未经允许,请勿转载,谢谢. cut掉部分题面. 给一个n个点的树,点有点权,有m次询问,每次询问多条链的并有多少种不同的点权以及它的mex mex就是一个集合中最小的没有 ...
- Android Studio创建/打开项目时一直处于Building“project name”Gradle project info的解决办法
重新安装了Android studio 之后, 启动android studio,打开原来的项目,界面一直停留在: 一直停留在此界面的原因是:Android studio 在下载 Gradle ,但是 ...
- @RequestBody和@RequestParam区别
@RequestParam 用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容.(Http协议中,默认传递的参数就是applicati ...
- EXISTS的使用详解
.exists的使用场合: exists 用于只能用于子查询,可以替代in,若匹配到结果,则退出内部 查询,并将条件标志为true,传回全部结果资料,in 不管匹配到匹配不到都 全部匹配完毕,使用ex ...
- Clojure新手入门
官方网站 clojure.org 环境安装 Java(JDK) Leiningen 编辑工具 Eclipse插件 -- Counterclockwise IntelliJ插件 -- Cursive E ...
- k8s Kubernetes v1.10 最简易安装 shell
k8s Kubernetes v1.10 最简易安装 shell # Master 单节点快速安装 # 最简单的安装shell,只为快速部署k8s测试环境 #环境centos 7.4 #1 初始化环境 ...
- Gradle 1.12用户指南翻译——第四十九章. Build Dashboard 插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- Linux中MySQL忽略表中字段大小写
linux 下,mysql 的表面默认是区分大小写的,windows 下默认不区分大小写,我们大多数在windows 下开发,之后迁移到linux(特别是带有Hibernate的工程),可以修改配置是 ...