ios动画 calyer-旋转,缩放,裁剪,阴影,平移等

最新推荐文章于 2022-02-27 19:35:32 发布

原创最新推荐文章于 2022-02-27 19:35:32 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

ios动画系列/Quartz2D/事件专栏收录该内容

14 篇文章

订阅专栏

本文详细阐述了CALayer与UIView的关系及其核心功能，包括CALayer如何实现UIView的显示，以及关键属性如position和anchorPoint的作用。同时介绍了CALayer的一些基本属性和隐式动画的概念。

CALayer和UIView的关系

(1)CALayer负责视图中显示的内容和动画

(2)UIView负责监听和响应事件

position和anchorPoint的作用

CALayer:

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层

在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层

@property(nonatomic,readonly,retain)CALayer *layer;

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示

换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

CALayer的属性:

宽度和高度 @propertyCGRectbounds;

位置(默认指中点，具体由anchorPoint决定) : @propertyCGPointposition;

锚点(x,y的范围都是0-1)，决定了position的含义 :@propertyCGPointanchorPoint;

背景颜色(CGColorRef类型) :@propertyCGColorRefbackgroundColor;

形变属性:@property CATransform3Dtransform;

边框颜色(CGColorRef类型) @propertyCGColorRefborderColor;

边框宽度 @propertyCGFloatborderWidth;

圆角半径 @propertyCGFloatcornerRadius;

内容(比如设置为图片CGImageRef) @property(retain)idcontents;
关于CALayer的疑惑

首先

CALayer是定义在QuartzCore框架中的(Core Animation)

CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的

UIColor、UIImage是定义在UIKit框架中的

其次

QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用

但是UIKit只能在iOS中使用

为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

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

@propertyCGPointposition;

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

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

@propertyCGPointanchorPoint;

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

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

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

它的x、y取值范围都是0~1，默认值为（0.5,0.5），意味着锚点在layer的中间

什么是隐式动画？

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

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

列举几个常见的Animatable Properties：

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

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

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

可以通过动画事务(CATransaction)关闭默认的隐式动画效果

[CATransactionbegin];

[CATransactionsetDisableActions:YES];

self.myview.layer.position = CGPointMake(10,10);

[CATransactioncommit];

demo:

@interface HMViewController ()
@property (weak, nonatomic) IBOutlet UIView *redView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end
@implementation HMViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:1 animations:^{
        [self imageLayer];
        [self viewLayer];
        
        // 缩放
       // _imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
        // 平移
      //  _imageView.layer.transform = CATransform3DMakeTranslation(200, 200, 0);
        
        // 缩放
//        _imageView.layer.transform = CATransform3DMakeScale(1, 0.5, 1);
        
    // 利用KVC改变形变
        
//     NSValue *rotation = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
//        
//        [_imageView.layer setValue:rotation forKeyPath:@"transform"];
//        
//        [_imageView.layer setValue:@M_PI forKeyPath:@"transform.rotation"];
//        
//        [_imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
        
        // 平移x轴
       // [_imageView.layer setValue:@200 forKeyPath:@"transform.translation.x"];
 
    }];
}
/**
 利用layer将图片裁剪成圆形图片
 **/
- (void)imageLayer
{
    // 圆形裁剪
    _imageView.layer.cornerRadius = 50;
    // 超出layer边框的全部裁剪掉
    _imageView.layer.masksToBounds = YES;
    _imageView.layer.borderColor = [UIColor grayColor].CGColor;
    _imageView.layer.borderWidth = 1;
}
/**
 利用layer将view变成圆形
 **/
- (void)viewLayer
{
    // 设置阴影透明度
    _redView.layer.shadowOpacity = 1;
    // 设置阴影颜色
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;
    // 设置阴影圆角半径
    _redView.layer.shadowRadius = 10;
    // 设置圆角半径
    _redView.layer.cornerRadius = 50;
    // 设置边框半径
    _redView.layer.borderColor = [UIColor whiteColor].CGColor;
    // 设置边框半径
    _redView.layer.borderWidth = 2;
}

自定义图层:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // 创建一个图层
    CALayer *layer = [CALayer layer];
    // 设置尺寸
    layer.bounds = CGRectMake(0, 0, 100, 100);
    // 设置位置
    layer.position = CGPointMake(100, 100);
    // 设置颜色
    layer.backgroundColor = [UIColor redColor].CGColor;
    // 设置内容
    layer.contents = (__bridge id)[UIImage imageNamed:@"阿狸头像"].CGImage;
    [self.view.layer addSublayer:layer];
}