文档章节

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
HTML 移动端框架 - Framework7

Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉...

匿名
2014/07/24
0
5
iO6 Programming pushing the limits 阅读笔记

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

云飞扬v5
2015/11/09
0
0
UIView Animations 学习笔记(一)简介及API说明

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

灰大羊
2015/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arcgis jsapi接口入门系列:总览

开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百直接运行,主要还是...

canneljls
1分钟前
0
0
月薪80k阿里架构师漫谈他是如何从一名小码农走到架构师的

01 刚当程序员时,我是属于那种勤勤恳恳类型的员工,工作态度用认真来形容不为过,每天我几乎是团队里最早到公司,又最晚下班的一个。而组员张工一般情况下都是准时上下班的,即使项目进度比...

Java填坑之路
4分钟前
0
0
oracle的resetlogs机制浅析

oracle的resetlogs机制浅析 alter database open resetlogs 这个命令我想大家都很熟悉了,那有没有想过这个resetlogs选项为什么要用?什么时候用? 它的原理机制是什么?他都起哪些作用? 我...

突突突酱
5分钟前
0
0
JAVA 获取两个日期间的所有日期

public static List<String> getDates(String startDate, String endDate){    Date d1 = new SimpleDateFormat("yyyyMMdd").parse(startDate);//定义起始日期    Date d2 = new Simple......

尘叙缘
12分钟前
0
0
Innodb中的事务隔离级别和锁的关系

#一次封锁or两段锁? 因为有大量的并发访问,为了预防死锁,一般应用中推荐使用一次封锁法,就是在方法的开始阶段,已经预先知道会用到哪些数据,然后全部锁住,在方法运行之后,再全部解锁。...

Skqing
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部