iOS Core Animation - 图层几何学

最新推荐文章于 2025-07-28 20:38:05 发布

原创最新推荐文章于 2025-07-28 20:38:05 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios

CoreAnimation 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了iOS开发中frame、bounds、center、position和anchorPoint的概念及作用，通过时钟界面实例展示了如何利用这些属性实现精确的UI布局与动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一布局

frame:代表了图层的外部坐标（相对于父视图）；

bounds:内部坐标相对于自己；

center,positinon:都代表了相对不父图层锚点的位置。

发生旋转的时候frame会改变bounds，center,positinon，不会改变

二锚点

anchorPoint:锚点用来移动图层的把柄，默认位于图层的中心。锚点可以被移动，frame也会相对移动

通过一个钟表小示例演示下锚点作用。

xib布局UI界面，时分秒针重合了，

- (void)viewDidLoad {
    [super viewDidLoad];
    self.panVIew.layer.cornerRadius = 150;
   // self.panVIew.layer.anchorPoint = CGPointMake(0, 0);改变锚点frame会变；
    [self tick];
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];
    
    
    
}
-(void)tick{
    NSCalendar *calender = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    NSCalendarUnit units = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
    NSDateComponents *compents = [calender components:units fromDate:[NSDate date]];
    self.time.text = [NSString stringWithFormat:@"%ld:%ld:%ld",(long)compents.hour,(long)compents.minute,(long)compents.second];
    
    CGFloat hourAngle = (compents.hour/12.0)*M_PI*2.0;
    CGFloat minuteAngle = (compents.minute/60.0)*M_PI*2.0;
    CGFloat secondAngle = (compents.second/60.0)*M_PI*2.0;
    self.hourView.transform = CGAffineTransformMakeRotation(hourAngle);
    self.minuteView.transform = CGAffineTransformMakeRotation(minuteAngle);
    self.secondView.transform = CGAffineTransformMakeRotation(secondAngle);
    
    
}

效果：

很明显指针是围绕着中心旋转的，需要改变旋转的锚点，可以加到viewDidLoad里面

    self.hourView.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    self.minuteView.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
    self.secondView.layer.anchorPoint = CGPointMake(0.5f, 0.9f);

看下改变后的效果：