(一一九)通过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变换可以做出各种酷炫的效果,例如下图相对屏幕旋转:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-02 23:23:04

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

圆角边框以及阴影制作卡片式图片 - 学习笔记

圆角边框以及阴影制作卡片式图片 圆角边框 border-radius 卡片使用阴影 box-shadow 利用阴影给图片底部创造一个长方形 内部的元素会直接覆盖整个阴影 HTML 部分 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>卡片式图片&l

CSS3下不一样的阴影、背景和圆角边框样式

CSS3下不一样的阴影.背景和圆角边框样式 CSS2.1 发布至今已有7年的历史.CSS3的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果 当前,CSS3技术最适合在移动Web开发中使用的特性包括: ●增强的选择器 ●阴影 ●强大的背景设置 ●圆角边框 阴影: 现在的CSS3样式已经支持阴影样式效果.目前可使用的阴影的效果分为两种:文本内容的阴影效果和元素的阴影效果. box-shadow CSS3的box-shadow属性是让元素具有阴影的效果,其语法如下:

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

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形 语法格式: border-radius:  水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角  右上角  右下角  左下角;  

Web 前端技术:CSS3---新属性,浏览器支持度,圆角边框(border-radius),阴影(box-shadow),文字与字体(text-shadow属性、word-wrap属性、@font-face规则),2D转换、过渡与动画(transform属性),3D变换

浏览器支持度 CSS3属性: columns:规定列的宽度和列数 默认宽度.列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1.border-radius属性(圆角边框) eg: 结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2.box-shadow属性(阴影) eg

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

CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径. 1.圆角边框语法 圆角边框属性 : border-radius 属性值 border-radius: 属性1,属性2,属性3,属性4 # 四个值:第一个值为左上角,第二个值为右上角,第三个值为

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

圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于可以快捷地设置圆角,而且通过这个属性我们还可以做出圆.半圆.四分一圆.椭圆等图形. 常用的圆角效果: div{border-radius: 15px;} 两个值时,分别指水平方向的半径和垂直方向的半径,用/号隔开,如: div{border-radius:5px 3px 4px 2px/1px 2p

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正方体则会是一个球,依靠这个属性我们可以不用ps6的情况下,做成一个较为美观的按钮或者控件,它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-righ

字体样式 圆角边框

字体样式: font-family: 属性值可以是中文或者英文 设置字体 例:font-family:Arial,“微软雅黑”; sans-serif:非衬线字体{没有笔锋} font-style:取值:italic 默认值:Nomal foot-weight:bold(加粗) line-height:height(行高 实现文本垂直居中) 引用字体: 1.下载字体文件,保存在项目中. 2.@font-face,新建字体. 3.使用字体. 圆角边框:最终展示在页面的是圆角的弧度 例:border

Swing圆角边框的实现

Swing圆角边框实现 Swing圆角边框的实现方法: package com.justplay.basic; import java.awt.Color; import java.awt.Component; import java.awt.Graphics; import java.awt.Insets; import javax.swing.border.Border; /**  * Swing  * 设置圆角边框(可以自定义边框的颜色)  * 可以为button,文本框等人以组件添加边框