zoukankan      html  css  js  c++  java
  • 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];
  • 相关阅读:
    【Python高级编程034 ● 静态web服务器 ● 静态Web服务器-返回固定页面数据】
    【Python高级编程033 ● 静态web服务器 ● 搭建Python自带静态Web服务器】
    【Python高级编程032 ● http协议 ● http响应报文】
    【Python高级编程031 ● http协议 ● http请求报文】
    做更好的自己:如何下得细功夫
    抓取图片视频等资源链接地址的Python小工具
    互联网应用服务端的常用技术思想与机制纲要
    《反脆弱》读书笔记
    错误启示录
    碎碎念集萃三九
  • 原文地址:https://www.cnblogs.com/hmzxwky/p/5158487.html
Copyright © 2011-2022 走看看