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

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 的属性:

宽度和 高度 @property CGRect bounds ;

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

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

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

形变属性 :@property CATransform3D transform;

边框颜 色 ( CGColorRef 类型 ) @property CGColorRef borderColor;

边框宽度 @property CGFloat borderWidth ;

圆 角 半径   @property CGFloat cornerRadius ;

内容 ( 比如设置为图片 CGImageRef )   @property ( retain ) id contents;
关于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

@property CGPoint position ;

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

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

@ property CGPoint anchorPoint ;

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

  决 定着 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];
}