Core Animation ---- CALayer之anchorPoint和position

在iOS当中，所有的视图都从一个叫做UIView的基类派生而来，UIView可以处理触摸事件，可以支持基于Core Graphics绘图，可以做仿射变换（例如旋转或者缩放），或者简单的类似于滑动或者渐变的动画。

CALayer属于QuartzCore框架(跨平台的)，CALayer类在概念上和UIView类似，可以包含一些内容（像图片，文本或者背景色），管理子图层的位置。它们有一些方法和属性用来做动画和变换。和UIView最大的不同是CALayer不处理用户的交互。CALayer并不清楚具体的响应链（iOS通过视图层级关系用来传送触摸事件的机制），于是它并不能够响应事件。

每一个UIView都包含一个layer，iOS基于UIView和CALayer提供两个平行的层级原因是要做职责分离，也能避免很多重复代码。

系统的学习请看：https://zsisme.gitbooks.io/ios-/content/index.html

 CALayer的两个属性​​​​​​​anchorPoint和position

我们先来看看文档上的解释：

 /* Defines the anchor point of the layer's bounds rect, as a point in
     * normalized layer coordinates - '(0, 0)' is the bottom left corner of
     * the bounds rect, '(1, 1)' is the top right corner. Defaults to
     * '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */
    
    open var anchorPoint: CGPoint


    /* The position in the superlayer that the anchor point of the layer's

     * bounds rect is aligned to. Defaults to the zero point. Animatable. */

    open var position: CGPoint

(1)、我们创建一个redView，通过改变anchorPoint来看看layer的position的值，未改变值

     let redView = UIView.init(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
     redView.backgroundColor = UIColor.red
     self.view.addSubview(redView)
        
        
     print("redView.frame = \(redView.frame)")
     print("redView.frame.center = \(redView.center)")
     print("redView.layer.anchorPoint = \(redView.layer.anchorPoint)")
     print("redView.layer.frame = \(redView.layer.frame)")
     print("redView.layer.position = \(redView.layer.position)")


     //结果
     redView.frame = (100.0, 100.0, 100.0, 100.0)
     redView.frame.center = (150.0, 150.0)
     redView.layer.anchorPoint = (0.5, 0.5)
     redView.layer.frame = (100.0, 100.0, 100.0, 100.0)
     redView.layer.position = (150.0, 150.0)

将anchorPoint改为（0.8，0.8）

        let redView = UIView.init(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        redView.backgroundColor = UIColor.red
        redView.layer.anchorPoint = CGPoint.init(x: 0.8, y: 0.8)
        self.view.addSubview(redView)
        
        
        print("redView.frame = \(redView.frame)")
        print("redView.frame.center = \(redView.center)")
        print("redView.layer.anchorPoint = \(redView.layer.anchorPoint)")
        print("redView.layer.frame = \(redView.layer.frame)")
        print("redView.layer.position = \(redView.layer.position)")

       
        
        //结果
        redView.frame = (70.0, 70.0, 100.0, 100.0)
        redView.frame.center = (150.0, 150.0)
        redView.layer.anchorPoint = (0.8, 0.8)
        redView.layer.frame = (70.0, 70.0, 100.0, 100.0)
        redView.layer.position = (150.0, 150.0)

将anchorPoint设置为(0,0)来看看

        let redView = UIView.init(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        redView.backgroundColor = UIColor.red
        redView.layer.anchorPoint = CGPoint.init(x: 0, y: 0)
        self.view.addSubview(redView)
        
        
        print("redView.frame = \(redView.frame)")
        print("redView.frame.center = \(redView.center)")
        print("redView.layer.anchorPoint = \(redView.layer.anchorPoint)")
        print("redView.layer.frame = \(redView.layer.frame)")
        print("redView.layer.position = \(redView.layer.position)")


        //结果
        redView.frame = (150.0, 150.0, 100.0, 100.0)
        redView.frame.center = (150.0, 150.0)
        redView.layer.anchorPoint = (0.0, 0.0)
        redView.layer.frame = (150.0, 150.0, 100.0, 100.0)
        redView.layer.position = (150.0, 150.0)

我们看到改变anchorPoint的值redView.frame.center和redView.layer.position的值并没有改变，反而改变了frame.origin的值，我们可以看出

position.x = frame.origin.x + anchorPoint.x*frame.size.width

position.y = frame.origin.y + anchorPoint.y*frame.size.height

（2）、这次我们改变position的值看看

        let redView = UIView.init(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        redView.backgroundColor = UIColor.red
        redView.layer.position = CGPoint.init(x: 50, y: 50)
        self.view.addSubview(redView)
        
    
        print("redView.frame = \(redView.frame)")
        print("redView.frame.center = \(redView.center)")
        print("redView.layer.anchorPoint = \(redView.layer.anchorPoint)")
        print("redView.layer.frame = \(redView.layer.frame)")
        print("redView.layer.position = \(redView.layer.position)")



        //结果
       redView.frame = (0.0, 0.0, 100.0, 100.0)
       redView.frame.center = (50.0, 50.0)
       redView.layer.anchorPoint = (0.5, 0.5)
       redView.layer.frame = (0.0, 0.0, 100.0, 100.0)
       redView.layer.position = (50.0, 50.0)

我们同样也没看到anchorPoint改变，同样的frame.origin的值改变了，anchorPoint和position的改变都影响了layer在父视图的origin

结论

分别改变anchorPoint和Position的值都不会影响对方的值，且

origin.x = position.x - anchorPoint.x * size.width

origin.y = position.y - anchorPoint.y * size.height