剖析 CAlayer 的 position 与 anchorPoint（锚点）属性，巧妙掌控 CALayer 位置变换

2024-01-03 18:50:25

position：定位图层

position 属性，顾名思义，用来设置 CALayer 在父层中的位置。它是一个 CGPoint 类型，包含 x 和 y 两个值，分别代表图层的水平位置和垂直位置。从本质上说，position 属性定义了图层的中心点在父层坐标系中的坐标。

anchorPoint：定义旋转和缩放时的参考点

anchorPoint 属性定义了图层在旋转或缩放时所围绕的参考点。它也是一个 CGPoint 类型，同样包含 x 和 y 两个值，但它们分别代表参考点的水平位置和垂直位置，默认为 (0.5, 0.5)，即图层的中心点。

巧妙利用 position 和 anchorPoint 实现动画效果

理解了 position 和 anchorPoint 属性后，让我们一起来看看如何利用它们来实现动画效果。

图层移动： 通过改变 position 属性的值，可以轻松地使图层在父层中移动。
图层旋转： 改变 anchorPoint 属性的值，可以改变图层旋转时的参考点，实现不同的旋转效果。
图层缩放： 改变 anchorPoint 属性的值，可以改变图层缩放时的参考点，实现不同的缩放效果。
组合动画： 同时改变 position、anchorPoint 和 bounds 属性的值，可以实现更加复杂的动画效果。

实例演示

为了更好地理解 position 和 anchorPoint 属性的作用，我们来看一个简单的实例。假设我们有一个 UIView，它包含一个子 UIView。我们希望让子 UIView 绕着父 UIView 的中心旋转。

UIView *parentView = ...;
UIView *childView = ...;

// 将子 UIView 添加到父 UIView
[parentView addSubview:childView];

// 设置子 UIView 的 anchorPoint
childView.layer.anchorPoint = CGPointMake(0.5, 0.5);

// 设置子 UIView 的 position
childView.layer.position = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height / 2);

// 设置子 UIView 的旋转角度
childView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);