CAlayer层

http://www.cnblogs.com/wendingding/p/3800736.html


iOS开发UI篇—CAlayer层的属性

一、position和anchorPoint

1.简单介绍

CALayer有2个非常重要的属性:position和anchorPoint

@property CGPoint position;

用来设置CALayer在父层中的位置

以父层的左上角为原点(0, 0)

 

@property CGPoint anchorPoint;

称为“定位点”、“锚点”

决定着CALayer身上的哪个点会在position属性所指的位置

以自己的左上角为原点(0, 0)

它的x、y取值范围都是0~1,默认值为(0.5, 0.5)

2.图示

anchorPoint

它的取值为0~1

 

红色图层的anchorPoint为(0,0)

红色图层的anchorPoint为(0.5,0.5)

红色图层的anchorPoint为(1,1)

红色图层的anchorPoint为(0.5,0)

position和anchorPoint

添加一个红色图层到绿色图层上,红色图层显示到什么位置,由position属性决定

假设红色图层的position是(100,100)

  到底把红色图层的哪个点移动到(100,100)的坐标位置,锚点。

  红色图层的锚点是(0,0)

红色图层的锚点是(0.5,0.5)

红色图层的锚点是(1,1)

红色图层的锚点是(0.5,0)

3.代码示例

(1)没有设置锚点。默认的锚点位置为(0.5,0.5)

复制代码
 1 //
 2 //  YYViewController.m
 3 //  03-锚点等属性
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 
13 @end
14 
15 @implementation YYViewController
16 
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20     //创建图层
21     CALayer *layer=[CALayer layer];
22     //设置图层的属性
23     layer.backgroundColor=[UIColor redColor].CGColor;
24     layer.bounds=CGRectMake(0, 0, 100, 100);
25     //添加图层
26     [self.view.layer addSublayer:layer];
27     
28 }
29 
30 @end
复制代码

显示效果:

         

(1)设置锚点位置为(0,0)

复制代码
 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     //创建图层
 5     CALayer *layer=[CALayer layer];
 6     //设置图层的属性
 7     layer.backgroundColor=[UIColor redColor].CGColor;
 8     layer.bounds=CGRectMake(0, 0, 100, 100);
 9     //设置锚点为(0,0)
10     layer.anchorPoint=CGPointZero;
11     //添加图层
12     [self.view.layer addSublayer:layer];
13 }
14 @end
复制代码

显示效果:

二、隐式动画

1.简单说明

每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)

所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画

什么是隐式动画?

当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果

而这些属性称为Animatable Properties(可动画属性)

 

列举几个常见的Animatable Properties:

bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画

backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画

position:用于设置CALayer的位置。修改这个属性会产生平移动画

2.代码示例

复制代码
 1 //
 2 //  YYViewController.m
 3 //  04-隐式动画
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 @property(nonatomic,strong)CALayer *layer;
13 @end
14 
15 @implementation YYViewController
16 
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20     //创建图层
21     CALayer *mylayer=[CALayer layer];
22     //设置图层属性
23     mylayer.backgroundColor=[UIColor brownColor].CGColor;
24     mylayer.bounds=CGRectMake(0, 0, 150, 100);
25     //显示位置
26     mylayer.position=CGPointMake(100, 100);
27     mylayer.anchorPoint=CGPointZero;
28     mylayer.cornerRadius=20;
29     //添加图层
30     [self.view.layer addSublayer:mylayer];
31     self.layer=mylayer;
32 }
33 
34 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
35 {
36     //隐式动画
37     self.layer.bounds=CGRectMake(0, 0, 200, 60);
38     self.layer.backgroundColor=[UIColor yellowColor].CGColor;
39 }
40 @end
复制代码

效果:

        

关闭隐式动画:

1     [CATransaction begin];
2     [CATransaction setDisableActions:YES];
3     //隐式动画
4     self.layer.bounds=CGRectMake(0, 0, 200, 60);
5     self.layer.backgroundColor=[UIColor yellowColor].CGColor;
6     [CATransaction commit];

3.如何查看CALayer的某个属性是否支持隐式动画?

  可以查看头文件,看有没有Animatable,如果有则表示支持。

也可以查看官方文档

文档中标明的这些属性都是支持隐式动画的


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为下列代码实现可暂停效果: import UIKit class ViewController: UIViewController { private let radarAnimation = "radarAnimation" private var animationLayer: CALayer? private var animationGroup: CAAnimationGroup? private var opBtn: UIButton! override func viewDidLoad() { super.viewDidLoad() let first = makeRadarAnimation(showRect: CGRect(x: 120, y: 100, width: 100, height: 100), isRound: true) view.layer.addSublayer(first) opBtn = UIButton(frame: CGRect(x: 100, y: 450, width: 80, height: 80)) opBtn.backgroundColor = UIColor.red opBtn.clipsToBounds = true opBtn.setTitle("Hsu", for: .normal) opBtn.layer.cornerRadius = 10 view.addSubview(opBtn) let second = makeRadarAnimation(showRect: opBtn.frame, isRound: false) view.layer.insertSublayer(second, below: opBtn.layer) } @IBAction func startAction(_ sender: UIButton) { animationLayer?.add(animationGroup!, forKey: radarAnimation) } @IBAction func stopAction(_ sender: UIButton) { animationLayer?.removeAnimation(forKey: radarAnimation) } private func makeRadarAnimation(showRect: CGRect, isRound: Bool) -> CALayer { // 1. 一个动态波 let shapeLayer = CAShapeLayer() shapeLayer.frame = showRect // showRect 最大内切圆 if isRound { shapeLayer.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height)).cgPath } else { // 矩形 shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: showRect.width, height: showRect.height), cornerRadius: 10).cgPath } shapeLayer.fillColor = UIColor.orange.cgColor // 默认初始颜色透明度 shapeLayer.opacity = 0.0 animationLayer = shapeLayer // 2. 需要重复的动态波,即创建副本 let replicator = CAReplicatorLayer() replicator.frame = shapeLayer.bounds replicator.instanceCount = 4 replicator.instanceDelay = 1.0 replicator.addSublayer(shapeLayer) // 3. 创建动画组 let opacityAnimation = CABasicAnimation(keyPath: "opacity") opacityAnimation.fromValue = NSNumber(floatLiteral: 1.0) // 开始透明度 opacityAnimation.toValue = NSNumber(floatLiteral: 0) // 结束时透明底 let scaleAnimation = CABasicAnimation(keyPath: "transform") if isRound { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 0, 0, 0)) // 缩放起始大小 } else { scaleAnimation.fromValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0)) // 缩放起始大小 } scaleAnimation.toValue = NSValue.init(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 0)) // 缩放结束大小 let animationGroup = CAAnimationGroup() animationGroup.animations = [opacityAnimation, scaleAnimation] animationGroup.duration = 3.0 // 动画执行时间 animationGroup.repeatCount = HUGE // 最大重复 animationGroup.autoreverses = false self.animationGroup = animationGroup shapeLayer.add(animationGroup, forKey: radarAnimation) return replicator } }
最新发布
06-03

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值