UIView三个比较重要的布局属性：frame、bounds、center, 对应的CALayer对应的frame、bounds、position。
这里的图层（CALayer）用了position，其实和视图的center代表的是相同的值。
在这里center和position都代表了相对于父图层anchorPoint（锚点）所在的位置。这个anchorPoint稍后介绍。
下图显示了这些属性的依赖关系：
图层
输出的信息：
视图：
视图位置属性
图层：
图层位置属性
视图的frame,bounds,center属性仅是存取方法，当操纵视图的frame，实际上是在改变视图下方的CALayer的frame，不能独立与图层之外改变视图的frame.
对于图层或者视图来说、frame并不是一个非常清晰的属性，他其实是一个虚拟属性，是根据bounds，position和anchorPoint来确定的。这三个值改变其中一个，frame的值都会发生改变，相反改变frame也会影响到他们的值。
so当对视图做变换的时候，比如旋转或缩放，frame实际上代表了图旋转之后的整个横纵轴对其的矩形区域，此时frame和bounds可能不相等了，
为了证明这点，我们将图层旋转：
View旋转后位置信息
输出的信息：
视图：
视图位置信息
这里可以看出视图的frame比bounds要大。
图层：
图层位置信息
什么是锚点：
视图的center属性和图层的position属性都指定了anchorPoint相对于父图层的位置。图层的anchorPoint通过position来控制frame的位置。
默认来说，anchorPoint位于图层的中点。属性并没有被UIView接口暴露出来，这也是视图的position属性被叫做center的原因。因为在默认情况下，anchorPoint在图层的中点时，图层的position的值和视图的center值是相同的。
但是图层的anchorPoint是可以被移动的，比如你可以他把至于图层frame的左上角，于是图层的内容将会在右下角的position方向移动，而不是居中了。
此图来源于iOS核心动画高级技巧书中
anchorPoint是用单位坐标来描述的，也就是图层的相对坐标，图层的左上角是{0,0}，右下角是{1,1},默认是{0.5,0.5}，即默认在图层的中点。（这个锚点就像图层的一个位置参照点，锚点的位置不变，图层的位置根据锚点anchorPoint参数的设置来决定位移方向和距离）。anchorPoint也可以通过制定x,y值小于0或者大于1，使他放置于图层之外。
应用
什么时候会有此应用场景呢？何时需要更改 anchorPoint来随意改变图层的位置。
这里我根据书籍做了一个钟表盘demo。如下图效果：
效果动态图
这里为了方便我使用了storyboard画了一个钟表视图：
图可以在http://www.iconfont.cn/里找到适合的图片，首先创建4个UIImageView，分别是表盘、时针、分钟、秒钟。如下图。但是生活中的钟表盘里的指针并不是像下图中那样的处在中心点的位置，显然这不是我们想要的结果。但是如果我们直接布局将指针一端位于表盘的中心，初始时感觉是对了，但是指针在旋转的时候则是已指针的中心点旋转而不是以指针的一端为中旋转。
UI布局图
这时，我们可以利用图层的anchorPoint来实现，将三个指针的图层向上偏移，是指针的一端处于表盘的中心点。
/**
时针
*/
@property (weak, nonatomic) IBOutlet UIImageView *hourImage;
/**
分钟
*/
@property (weak, nonatomic) IBOutlet UIImageView *minuteImage;
/**
秒钟
*/
@property (weak, nonatomic) IBOutlet UIImageView *secondsImage;
/**
表盘
*/
@property (weak, nonatomic) IBOutlet UIView *orangeView;
设置锚点，这里x值我们保持不边，为了让图层向上偏移90%，我们设置y为0.9
//调整三个指针的锚点
self.hourImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.minuteImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.secondsImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
效果如何：
设置锚点后效果图
现在要实现的就是如何让钟表跑起来，这里我们用NSTimer来更新钟表。
- (void)viewDidLoad {
[super viewDidLoad];
//调整三个指针的锚点
self.hourImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.minuteImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.secondsImage.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerTick) userInfo:nil repeats:YES];
[self.timer fire];
}
-(void)timerTick{
NSLog(@"timerTick");
self.hourImage.transform = CGAffineTransformRotate(self.hourImage.transform, M_PI/(30*60*60));
self.minuteImage.transform = CGAffineTransformRotate(self.minuteImage.transform, M_PI/(30*60));
self.secondsImage.transform = CGAffineTransformRotate(self.secondsImage.transform, M_PI/30);
}
到这里我们的需求就完成了。
网友评论