核心动画-图层结构讲解

741 阅读3分钟

一.了解CoreAnimation

核心动画的内部实现架构, 是基于OpenGL/OpenGL ES, Core Graphics/ Metal 基础上封装的, OpenGL/OpenGL ES, Core Graphics/ Metal使用成本都很高,苹果未来更好的让开发者做出好的动画效果,封装出CoreAnimation 截屏2022-09-23 21.15.50.png截屏2022-09-23 21.16.24.png

二 Core Animation Introduction

  • 简单易易⽤用的⾼高性能混合编程模型\
  • ⽤用类似于视图⼀一样,使⽤用图层来创建复杂的编程接⼝口
  • 轻量量化的数据结构,它可以同时显示让上百个图层产⽣生动画效果
  • 一套⾮非常较简单的动画接⼝口,能让动画运⾏行行在独⽴立的线程中,并可以独⽴立于主线程之外. 
  • 一旦动画配置完成并启动,核⼼心动画就能独⽴立并完全控制相应的动画帧.
  •  提⾼高应⽤用性能.应⽤用程序只有当发⽣生改变的时候才会重绘内容. 使⽤用Core Animation 可以不不使⽤用其他图形API,例例如 OpenGL 来获取⾼高效的动画性能.
  •  灵活的布局管理理模型,允许图层相对同级图层的关系来设置属性的位置和⼤大⼩小

三 Core Animation 分类

截屏2022-09-23 21.24.48.png

what’s the UIView ? what’s the CALayer ? 为什么要将UIView与CALayer提供2个平级层级关系

答:截屏2022-09-23 21.29.39.png

为何开发者需要使用CALayer

答: 截屏2022-09-23 21.33.13.png

四: Core Animation Class

截屏2022-09-23 21.34.48.png

图层几何 截屏2022-09-23 21.37.29.png 旋转时: frame的宽高是会变化的

截屏2022-09-23 21.37.49.png

截屏2022-09-23 21.38.16.png

五: CALayer常用属性

  • Hit Testing Hit Test 底层实现思路
  • 常见的视图不相应事件情况

截屏2022-09-23 22.41.05.png

截屏2022-09-23 22.41.33.png

截屏2022-09-23 21.40.51.png

截屏2022-09-23 21.41.00.png

使用场景截屏2022-09-23 21.42.18.png

  1. 事件穿透。 自己不影响,让父视图响应 本类中实现 截屏2022-09-23 21.41.57.png

  2. 子视图超过父视图(子视图响应)

本类中实现 截屏2022-09-23 21.44.04.png

  • contents 设置view背景
self.view.layer.contents = (__bridge id)image.CGImage;
self.view.contentMode  // 可以设置图片显示模式
  • contentsScale
self.view.layer.contentsScale = [UIScreen mainScreen].scale
/// 会影响图片显示的清晰度
  • zPosition:z轴坐标 涉及到OpenGL SL的知识,请移步,说简单点就是面向屏幕的坐标,平时默认是0, 可以通过这个属性,让图层渲染展示在前还是后 截屏2022-09-23 22.33.24.png

六 : 动画实例

隐式动画: blog.csdn.net/u013248706/… 设置非关联layer的背景颜色,apha等,回产生隐式动画 ,默认0.25s UIVview的layer是关联的,默认隐式动画关闭 非关联就是单独创建的layer

//动画2

    //begin a new transaction
    [CATransaction begin];

    //set the animation duration to 2 second
    [CATransaction setAnimationDuration:2.0];

    _layer.backgroundColor = [UIColor orangeColor].CGColor;
    [CATransaction commit];

显示动画

//动画1
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"position.y";
    animation.toValue = @600;
    animation.duration = 1;
    //解决动画恢复到初始位置
    animation.removedOnCompletion = **NO**;
    animation.fillMode = kCAFillModeForwards;
    [_redView.layer addAnimation:animation forKey:**nil**];

IMG_6639.GIF

CALayer家族

截屏2022-09-23 23.04.09.png

代码

#import "ViewController.h"

/*

 动画添加步骤:

 1.找演员CALayer,确定动画主角

 2.写剧本CAAnimation,规定动画怎么样变换

 3.开拍AddAnimation,开始执行

 */

**@interface** ViewController ()

**@property** (**weak**, **nonatomic**) **IBOutlet** UIView *redView;

**@property** (**nonatomic**,**strong**) CALayer *layer;

**@property** (**nonatomic**,**strong**) UIView *layer3;

\


**@end**

\


**@implementation** ViewController

\


- (**void**)viewDidLoad {

    [**super** viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    CALayer *layer = [CALayer layer];

    layer.frame = CGRectMake(100, 100, 100, 100);

    layer.backgroundColor = [UIColor greenColor].CGColor;

    _layer = layer;

    [**self**.view.layer addSublayer:layer];

\


    _layer3 = [UIView new];

    _layer3.frame = CGRectMake(150, 100, 100, 100);

    _layer3.backgroundColor = [UIColor yellowColor];

//    _layer3.layer.zPosition = -2.0;

    [**self**.view addSubview:_layer3];

}

\


- (**void**)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event

{

    _layer3.layer.zPosition = -2.0;

    //动画1

    CABasicAnimation *animation = [CABasicAnimation animation];

    animation.keyPath = @"position.y";

    animation.toValue = @600;

    animation.duration = 1;

\


    //解决动画恢复到初始位置

    animation.removedOnCompletion = **NO**;

    animation.fillMode = kCAFillModeForwards;

    [_redView.layer addAnimation:animation forKey:**nil**];

    //动画2

    //begin a new transaction

    [CATransaction begin];

    

    //set the animation duration to 1 second

    [CATransaction setAnimationDuration:2.0];

    

    _layer.backgroundColor = [UIColor orangeColor].CGColor;

        

    [CATransaction setCompletionBlock:^{

        //rotate the layer 90 degrees

        CGAffineTransform transform = **self**.layer.affineTransform;

        transform = CGAffineTransformRotate(transform, M_PI_2 * 0.5);

        **self**.layer.affineTransform = transform;

    }];

//    //commit the transaction

    [CATransaction commit];

}