文档章节

iOS核心动画笔记3-视觉效果

hell03W
 hell03W
发布于 2016/08/01 15:12
字数 1088
阅读 16
收藏 0

视觉效果

1. 圆角

CALayer conrnerRadius属性控制图层角度的曲率. 浮点数, 默认是0, 这个曲率值只能影响背景颜色而不影响背景图片或是子图层.CALayer还有个maskToBounds属性,设置为YES时候,图层里面所有东西都会被截取.

2. 图层边框

CALayer另外两个非常有用的属性就是borderWidth,borderColor,这两个属性定义了图层边的绘制样式,这条线沿着图层的bounds绘制,同事也包含图层的角.

边框是绘制在图层边界里面的,而且在所有子内容之前,也在子图层之前.

3. 阴影

阴影相关的属性:

shadowRadius; //阴影虚化半径
shadowColor; //阴影颜色, 默认是黑色
shadowOffset; //阴影偏移
shadowOpacity; //阴影的不透明度
shadowPath; //阴影路径,CGPath类型
  • shadowOpacity: 表示不透明度,1:完全不透明; 0, 完全透明.
  • shadowOffset: 控制阴影的方向和距离,是一个CGSiz的值,宽度控制横向偏移,高度控制纵向偏移,默认值是{0, -3}, 相对y向上偏移3个点. 原因是shadow最初是在mac OS上面世的, 而Mac OS上,y轴方向和iOS上y轴方向是颠倒的, 在Mac上shadowOffset默认值是向下偏移的,所以造成iOS上默认值向上偏移.
  • shadowRadius: 通常, 越是需要让视图或者控件非常醒目独立于背景之外, 就应该给shadowRadius设置一个稍大的值, 阴影月模糊, 图层的深度看上去就会越明显.

4. 阴影裁剪

图层的边框继承自本图层的边框和cornerRadius,但是图层的阴影继承自内容的外形(包括子图层), 而不是根据边界和角半径来确定. 为了计算出阴影的形状,CoreAnimation会将寄宿图(包括子视图)考虑在内,然后通过这些来完美搭配图层形状从而创建一个阴影.

当阴影和裁剪扯上关系, 就会出现很麻烦的限制, 要裁剪的话, 在图层边框之外所有绘制都会被裁减掉, 包括阴影, 但是又需要阴影, 怎么办呢? 解决就是, 阴影图层作为容器图层, 裁剪图层作为子图层, 这样可以完美解决.

5. shadowPath属性

从上上一节已经了解到, 阴影并不总是方的, 而是根据图层以及子图层的内容计算出来的. 但是有时候计算阴影也是给长消耗资源的, 尤其是图层中有很多子图层时候.

如果我们事先知道阴影形状是什么样子的, 那么可以通过制定shadowPath来提高性能. 值是一个CGPathRef类型的. CGPath是 Core Graphics 对象, 可以制定任意的矢量图形. 我们可以通过这个属性独立于图层之外制定阴影的外形.

复杂的形状, 我们可以通过UIBezierPath来绘制.

6. 图层蒙版

CALayer有个mask属性, 这个属性本身是一个CALayer类型, 有和其它图层一样的绘制和布局属性. 它类似于一个子图层, mask图层中被绘制或者有内容的区域是透明的, 可以看到父图层上的内容, 就像是ps上的蒙版效果. mask图层定义了父图层的可见部分.

mask图层的color属性是不关紧要的, 重要的图层的轮廓, mask图层实心的部分就是父图层会被保留下来的部分.

示例代码:

    //测试mask属性
    CALayer *bgLayer = [CALayer layer];
    bgLayer.backgroundColor = [UIColor redColor].CGColor;
    bgLayer.frame = CGRectMake(0, 0, 100, 50);
    [self.maskView.layer addSublayer:bgLayer];
    
    self.maskView.backgroundColor = [UIColor blueColor];
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contentsGravity = kCAGravityCenter;
    maskLayer.contents = (__bridge id)image.CGImage;
    maskLayer.frame = self.layerView.bounds;
    self.maskView.layer.mask = maskLayer;
    /*
     看到这个属性, 猜测这个属性可以实现的功能:
        1. 文本, 一个文字, 一半一个颜色.
        2. maskView上放个shapeLayer, 有背景色, mask是一个被填充满的layer, 可以通过控制shapeLayer来控制被填充的程度, 这个可以实现很多功能, 比如 进度条, 比如按住开始录音那个动画效果, 等等等等.
     */

效果:

7. 拉伸过滤

这个还没看懂....

8. 组透明

这个文章最后一小节:

http://wiki.jikexueyuan.com/project/ios-core-animation/visual-effect.html

© 著作权归作者所有

共有 人打赏支持
hell03W
粉丝 9
博文 145
码字总数 109892
作品 0
朝阳
程序员
私信 提问
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
0
0
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
05/26
0
0
设计 iOS 应用时需要知道的 5 件事

根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事。虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台。 1. 了解您的媒体 这似...

oschina
2013/03/21
3.8K
7
UIView Animations 学习笔记(一)简介及API说明

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animation 学习笔记 应用示例 一、简介 随着iOS7的发布,动画与运动效果变成了Apple和第三方开发者进行app设计的中心。iOS7介绍...

灰大羊
2015/08/01
0
0
iO6 Programming pushing the limits 阅读笔记

目录 第一部分 iOS6新内容 第二部分 从每天工具中获取更多(介绍日常使用控件和框架的潜力) 第三部分 完成任务的正确工具(介绍不是那么常用的控件和框架) 第四部分 发挥到极限(深入理解i...

云飞扬v5
2015/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap源码解析

初始化 先看看ConcurrentHashMap中几个重要的属性: // 初始化容量大小static final int DEFAULT_INITIAL_CAPACITY = 16;//默认负载因子static final float DEFAULT_LOAD_FACTOR = 0.75f...

grace_233
11分钟前
0
0
java对象的浅拷贝和深拷贝

浅拷贝 java的数据类型有基本数据类型(如:int、long等)和引用数据类型。例如:对象1中有属性a(基本数据类型)和属性b(引用数据类型),在进行浅拷贝到对象2时,属性a复制属性的值给对象...

yangyangyyyy
12分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云云栖社区
13分钟前
0
0
ubuntu16.04 LNMP搭建 php7.1

sudo apt-get update sudo apt-get install mysql-server mysql-client sudo apt-add-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.1 php7.1-fpm php7.1-cgi p......

一千零一夜个为什么
19分钟前
0
0
阿里云高级技术专家带你全面了解云主机性能评测

钱超,花名西邪,阿里云高级技术专家,超12年老阿里,是云主机性能领域的知名专家。 在目前的云计算测评领域,很多性能测评存在营销的包装,容易引起误导:比如用瞬时性能引导读者得出结论,...

阿里云官方博客
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部