谈谈position和anchorPoint

最近在学习SpriteKit框架，涉及SKSpriteNode position属性设置，也有对anchorPoint做一些设置。之前对这两个重要的属性用的不是很多，有些知识点还是有点模糊，特此记录一下。

UIView坐标系

关键点：

• position和anchorPoint都是layer属性，都是CGPoint类型
• layer显示到什么位置，由position决定。position是相对于父坐标系
• anchorPoint是相对于自身坐标系
• 自身的anchorPoint和自身的position必须重合

position：

用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

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

决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5）

栗子

截图自该篇文章，感谢网友分享

SpriteKit坐标系

关键点

• SKView坐标系，坐标远点(0,0)在左下角，往上y加 往右x加
• position和anchorPoint都是node的属性
• anchorPoint原点(0,0)在自身左下角，x和y范围都是0-1，x往右加，y往上加
• 和UIView一样，postion是相对于父坐标系，anchorPoint相对于自身坐标系
• position和anchorPoint必须重合
• 动画是以anchorPoint为基准

来看下以下代码加深下印象

func createCircle() {
        backgroundColor = .orange
        
        let circle1 = SKSpriteNode(color: .blue, size: CGSize(width: 100, height: 100))
        circle1.position = view!.center
        circle1.anchorPoint = CGPoint(x: 0, y: 0)
        addChild(circle1)
//        animateNodes(circle1, type: .rotation)
        
        
        let circle2 = SKSpriteNode(color: .red, size: CGSize(width: 100, height: 100))
        circle2.position = view!.center
//        circle2.anchorPoint = CGPoint(x: 0, y: 1)
        addChild(circle2)
//        animateNodes(circle2, type: .rotation)
        
        let circle3 = SKSpriteNode(color: .purple, size: CGSize(width: 100, height: 100))
        circle3.position = view!.center
        circle3.anchorPoint = CGPoint(x: 1, y: 1)
        addChild(circle3)
//        animateNodes(circle3, type: .rotation)
        
        let circle4 = SKSpriteNode(color: .green, size: CGSize(width: 100, height: 100))
        circle4.position = view!.center
        circle4.anchorPoint = CGPoint(x: 1, y: 0)
        addChild(circle4)
//        animateNodes(circle4, type: .rotation)

    }

运行后的效果如下（根据颜色对应一下）

加上动画后的效果：