• 1月25号 CALayer


    UIView主要负责视图和用户的交互

    真正的内容显示是通过UIView里面的一个图层CALayer来完成的(没有交互能力)

    UIView和CALayer两者其实差不多,每一个UIView都有一个主CALayer。主CALayer上可以添加子CALayer,CALayer跟UIView一样有子类,有枝干。UIView上可以添加手势,CALayer是不可以的。但是也不是说它没什么用处,像很多动画效果,都是用它或者他的子类(子类一说有点不贴切)来完成的。打个容易理解的比分,UIView想到于一片叶子,而CALayer则相当于叶子一条条的经络。


    1.新建一个CALayer并且设置一些属性

        CALayer *layer = [CALayer layer];//新建一个图层

        layer.backgroundColor = [UIColor yellowColor].CGColor;//图层的背景颜色

        layer.bounds = CGRectMake(0, 0, 100, 100);//图层的尺寸

        layer.cornerRadius = 50;//圆角的半径  当值为宽度和高度的一半的时候就是一个圆形

        layer.borderColor = [UIColor blackColor].CGColor;//边缘颜色

        layer.borderWidth = 2.0;边缘的宽度

        layer.position = self.view.center;//图层的位置为当前视图的中点

        layer.anchorPoint = CGPointMake(0.5, 0.5);////使用anchorPoint一定要用到position   默认的position是(0, 0

        [self.view.layer addSublayer:layer];//把新建的图层加到当前视图的图层中

    这样子就把一个新建的图层添加上去了!

     

    2.CALayer中的两个重要属性

    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)

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

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

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

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

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

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

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

    3.改变transform的动画

    1 //旋转
    2 _layer.transform = CATransform3DRotate(_layer.transform, 10/180.0*M_PI, 0, 0, 1);
    3 //放大缩小
    4 _layer.transform = CATransform3DScale(_layer.transform, 2, 2, 2);
    5 //平移
    6 _layer.transform = CATransform3DTranslate(_layer.transform, 10, 10, 0);

    4.基本动画CABasicAnimation

     1 //渐变
     2 CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
     3 opacityAnimation.fromValue = @1;
     4 opacityAnimation.toValue = @0;
     5     
     6 //旋转
     7 CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
     8 rotateAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
     9 rotateAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(_layer.transform, M_PI, 0, 0, 1)];
    10     
    11 //放大缩小
    12 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    13 scaleAnimation.fromValue = @0.5;
    14 scaleAnimation.toValue = @2;
    15     
    16 //平移
    17 CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    18 moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

    5.组动画CAAnimationGroup

    当一次需要实现多个种类的动画效果是就需要用到组动画了

    1 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    2 groupAnimation.duration = 1;
    3 //groupAnimation.removedOnCompletion = NO;
    4 groupAnimation.fillMode = kCAFillModeBackwards;//用动画执行完毕前的画面作为当前画面
    5 groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    6 groupAnimation.animations = @[opacityAnimation, rotateAnimation, scaleAnimation, moveAnimation];
    7 [_layer addAnimation:groupAnimation forKey:nil];
  • 相关阅读:
    第一章 基础知识
    第1条:考虑用静态工厂方法代替构造器
    spring cloud(断路器——初学五)
    spring cloud(断路器——初学四)
    spring cloud(服务消费者(利用feign实现服务消费及负载均衡)——初学三)
    在阿里云的ubuntu服务器上安装xampp时出现unable to realloc unable to realloc 8380000 bytes错误
    laravel中ubuntu下执行php artisan migrate总是报错
    windows下安装php依赖关系管理工具composer
    apk下载的网址生成一个二维码
    android apk的签名和权限问题
  • 原文地址:https://www.cnblogs.com/hmzxwky/p/5158487.html
Copyright © 2020-2023  润新知