CALayer position 和 anchorPoint 的問(wèn)題

概要：

CALayer 的position白話來(lái)講：position就是layer 自身的anchorPoint相對(duì)于父superLayer的坐標(biāo)位置。
常規(guī)說(shuō)來(lái)，在iOS上，一個(gè)圖層的position位于父圖層的左上角
具體概念參考：這將是你最后一次糾結(jié)position與anchorPoint

關(guān)于畫(huà)曲線的角度參考圖：


正文：

需求是一個(gè)掃描匹配的動(dòng)畫(huà)：

hhhh.gif

如上展示的是最終的效果。這里主要用的是一個(gè)自定義view PulsingView，重寫(xiě) (void)drawRect:(CGRect)rect方法，在這個(gè)方法內(nèi)部去畫(huà)相應(yīng)的元素，主要包含：

  • 1.外部擴(kuò)散的脈沖layer。
  • 2.雷達(dá)掃面的內(nèi)圈layer。
  • 3.雷達(dá)掃描的扇形layer。

首先是外部的脈沖擴(kuò)散動(dòng)畫(huà)實(shí)現(xiàn)：
這個(gè)比較簡(jiǎn)單，參考網(wǎng)上的好多雷達(dá)掃描實(shí)現(xiàn)，PulsingView.m文件中 代碼如下：

    [super drawRect:rect];
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    UIImage * image = [UIImage imageNamed:@"radar_background"];
    [image drawInRect:rect];
    
    CGFloat pulsingWidth = rect.size.width / 2.5;
    CGFloat pulsingX = self.center.x - pulsingWidth * 0.5;
    CGFloat pulsingY = self.center.y - pulsingWidth * 0.5;
   
 // 脈沖layer
    CALayer * pulsingLayer = [CALayer layer];
    pulsingLayer.frame = CGRectMake(pulsingX, pulsingY, pulsingWidth, pulsingWidth);
    pulsingLayer.borderColor = [UIColor colorWithRed:201/255.0 green:201/255.0 blue:201/255.0 alpha:1].CGColor;
    pulsingLayer.cornerRadius = pulsingWidth * 0.5;
    pulsingLayer.backgroundColor = [UIColor whiteColor].CGColor;//這里必須設(shè)置layer層的背景顏色，默認(rèn)應(yīng)該是透明的，導(dǎo)致設(shè)置的陰影顏色無(wú)法顯示出來(lái)
    pulsingLayer.shadowColor = [UIColor blackColor].CGColor;
    pulsingLayer.shadowOffset = CGSizeMake(0, 0);
    pulsingLayer.shadowOpacity = 1;
    pulsingLayer.shadowRadius = 5;
    [self.layer addSublayer:pulsingLayer];
    
    // 縮放動(dòng)畫(huà)
    CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.autoreverses = false;
    scaleAnimation.fromValue = @1.0f;
    scaleAnimation.toValue = @2.0f;
    
    // 透明動(dòng)畫(huà)
    CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.keyTimes = @[@0,@0.1,@0.2,@0.3,@0.4,@0.5,@0.6,@0.7,@0.8,@0.9,@1];
    opacityAnimation.values = @[@1,@0.9,@0.8,@0.7,@0.6,@0.5,@0.4,@0.3,@0.2,@0.1,@0];
    
    CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
    animationGroup.beginTime = CACurrentMediaTime() + 1;
    animationGroup.fillMode = kCAFillModeBackwards;
    animationGroup.repeatCount = HUGE_VAL;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animationGroup.duration = 2;
    animationGroup.animations = @[scaleAnimation,opacityAnimation];
    [pulsingLayer addAnimation:animationGroup forKey:@"pulse"];

這一步做完會(huì)出來(lái)如下效果：

hhhh1.gif

接下來(lái)就是添加雷達(dá)的內(nèi)圈layer,繼續(xù)在上面的代碼下面添加如下代碼：

    // 中間圓環(huán)
    CALayer * middleCycle = [CALayer layer];
    middleCycle.frame = CGRectMake(pulsingX, pulsingY, pulsingWidth, pulsingWidth);
    middleCycle.cornerRadius = pulsingWidth * 0.5;
    middleCycle.borderColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
    middleCycle.backgroundColor = [UIColor whiteColor].CGColor;
    middleCycle.shadowOffset = CGSizeMake(0, 0);
    middleCycle.borderWidth = 1;
    middleCycle.shadowRadius = 3;
    middleCycle.shadowOpacity = 1;
    middleCycle.shadowColor = [UIColor lightGrayColor].CGColor;
    [self.layer addSublayer:middleCycle];

。這里的坑也是出現(xiàn)在這塊地方。因?yàn)樵谕獠恳?code>PulsingView的時(shí)候，設(shè)置的frame是控制器view的bounds,此時(shí)運(yùn)行出來(lái)的結(jié)果如下：

middleCycle.gif

接下來(lái)就是最后一步，添加扇形的layer 并添加掃描動(dòng)畫(huà)(一開(kāi)始扇形是打算做成漸變的效果的，不過(guò)這里沒(méi)有完美實(shí)現(xiàn)出來(lái)，一開(kāi)始使用了一個(gè)三方XHRadarView,單純的引用里面的扇形view的類(lèi)，這樣就可以直接使用他內(nèi)部的漸變color，不過(guò)出來(lái)并不是很完美，所以還是自己畫(huà)扇形，先不做漸變效果了。）此時(shí)就出現(xiàn)了關(guān)于position問(wèn)題導(dǎo)致的坑.
這里一開(kāi)的思路還是和之前一樣，繼續(xù)在self.layer上添加扇形的layer，以self.center為圓心，畫(huà)一個(gè)90度的曲線：

  CGPoint fanshapedCenter = self.center;
    UIBezierPath * fanshapedPath = [UIBezierPath bezierPath];
    [fanshapedPath addArcWithCenter:fanshapedCenter radius:(pulsingWidth + 20) * 0.5 startAngle:3 * M_PI / 2 endAngle:0 clockwise:YES];
    [fanshapedPath addLineToPoint:fanshapedCenter];
    [fanshapedPath closePath];
    CAShapeLayer * fanshapedLayer = [CAShapeLayer layer];
    fanshapedLayer.path = fanshapedPath.CGPath;
    fanshapedLayer.opacity = 0.7;
    fanshapedLayer.fillColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
    [self.layer addSublayer:fanshapedLayer];

此時(shí)運(yùn)行出來(lái)靜態(tài)情況下的都沒(méi)問(wèn)題：

middleCyclestatic.gif

然后添加旋轉(zhuǎn)動(dòng)畫(huà)，讓扇形繞著圓心進(jìn)行自轉(zhuǎn)：

  CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat: 3 * M_PI ];
    rotationAnimation.duration = 8;
    rotationAnimation.cumulative = YES;
    rotationAnimation.removedOnCompletion = NO;
    rotationAnimation.repeatCount = MAXFLOAT;
    rotationAnimation.fillMode = kCAFillModeForwards;
    [fanshapedLayer addAnimation:rotationAnimation forKey:@"rotation"];

然而運(yùn)行出來(lái)的結(jié)果并沒(méi)有和我們預(yù)期的一樣：

middleCycle.gif

仔細(xì)觀察可以發(fā)現(xiàn)，扇形是在圍繞著self的原點(diǎn)(0,0)點(diǎn)進(jìn)行公轉(zhuǎn)，一開(kāi)始一直以為是畫(huà)扇形的時(shí)候出的問(wèn)題，是不是畫(huà)法不對(duì)之類(lèi)的，還試過(guò)直接用Quaritz2D 去畫(huà)扇形，然而效果依然如此，經(jīng)過(guò)各種查找，才發(fā)現(xiàn)是position 導(dǎo)致的問(wèn)題，通過(guò)斷點(diǎn)，打印一下hanshapedLayer可以看到如下信息：

Printing description of fanshapedLayer:
<CAShapeLayer:0x608000233640; position = CGPoint (0 0); bounds = CGRect (0 0; 0 0); allowsGroupOpacity = YES; fillColor = <CGColor 0x6080000bef00> [<CGColorSpace 0x600000228940> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1; extended range)] ( 0.160784 0.596078 0.945098 1 ); opacity = 0.7; path = <CGPath 0x60800003bf20>>

可以看到hanshapedLayer的position 是 (0,0),也就是父控件的左上角原點(diǎn)，文章開(kāi)頭我們提到過(guò)，layer的position 就是自己anchorPoint 相對(duì)于父layer 的坐標(biāo)，而layer自身旋轉(zhuǎn)也是相對(duì)于anchorPoint 旋轉(zhuǎn)，這也就解釋了為什么我們上面會(huì)出現(xiàn)扇形繞著屏幕的最上角做公轉(zhuǎn)。所以我們就需要將hanshapedLayer 的 position 移到中心點(diǎn)的位置：

    fanshapedLayer.position = fanshapedCenter;

此時(shí)我們?cè)賮?lái)看運(yùn)行結(jié)果：

middleCycle.gif

此時(shí)扇形確實(shí)是繞著中心點(diǎn)開(kāi)始轉(zhuǎn)了，但是并不是我們想要的結(jié)果。。。此時(shí)內(nèi)心是崩潰的。所以放棄了這種動(dòng)畫(huà)的方式，直接將扇形fanshapedLayer添加到中間的內(nèi)圈layer上，然后讓內(nèi)圈layer自轉(zhuǎn)
，最后可以實(shí)現(xiàn)最終的效果。

// 掃描的扇形
     UIBezierPath * fanshapedPath = [UIBezierPath bezierPath];
     [fanshapedPath addArcWithCenter:CGPointMake(middleCycle.frame.size.width * 0.5, middleCycle.frame.size.height * 0.5) radius:(pulsingWidth + 30) * 0.5 startAngle:3 * M_PI / 2 endAngle:0 clockwise:YES];
     [fanshapedPath addLineToPoint:CGPointMake(middleCycle.frame.size.width * 0.5, middleCycle.frame.size.height * 0.5)];
     CAShapeLayer * fanshaped = [CAShapeLayer layer];
     fanshaped.fillColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
     fanshaped.opacity = 0.7;
     [fanshapedPath closePath];
     fanshaped.path = fanshapedPath.CGPath;
     [middleCycle addSublayer:fanshaped];

然后將動(dòng)畫(huà)添加到middleCycle上：
     [middleCycle addAnimation:rotationAnimation forKey:@"rotation"];

后來(lái)在簡(jiǎn)書(shū)上又看到以篇博客也遇到了公轉(zhuǎn)的問(wèn)題 CALayer旋轉(zhuǎn)動(dòng)畫(huà)
參考這位 渣孩子博主的作法，將畫(huà)扇形的代碼作如下修改：

   [fanshapedPath addArcWithCenter:CGPointZero radius:(pulsingWidth + 20) * 0.5 startAngle:3 * M_PI / 2 endAngle:0 clockwise:YES];
    [fanshapedPath addLineToPoint:CGPointZero];

現(xiàn)在原點(diǎn)位置畫(huà)出扇形，然后再設(shè)置potisionfanshapedLayer.position = fanshapedCenter;最后終于解決了這個(gè)問(wèn)題。

最后，貼上draw 方法里的全部代碼：
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [super drawRect:rect];
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    UIImage * image = [UIImage imageNamed:@"radar_background"];
    [image drawInRect:rect];
    
    CGFloat pulsingWidth = rect.size.width / 2.5;
    CGFloat pulsingX = self.center.x - pulsingWidth * 0.5;
    CGFloat pulsingY = self.center.y - pulsingWidth * 0.5;
    // 脈沖layer
    CALayer * pulsingLayer = [CALayer layer];
    pulsingLayer.frame = CGRectMake(pulsingX, pulsingY, pulsingWidth, pulsingWidth);
    pulsingLayer.borderColor = [UIColor colorWithRed:201/255.0 green:201/255.0 blue:201/255.0 alpha:1].CGColor;
    pulsingLayer.cornerRadius = pulsingWidth * 0.5;
    pulsingLayer.backgroundColor = [UIColor whiteColor].CGColor;//這里必須設(shè)置layer層的背景顏色，默認(rèn)應(yīng)該是透明的，導(dǎo)致設(shè)置的陰影顏色無(wú)法顯示出來(lái)
    pulsingLayer.shadowColor = [UIColor blackColor].CGColor;
    pulsingLayer.shadowOffset = CGSizeMake(0, 0);
    pulsingLayer.shadowOpacity = 1;
    pulsingLayer.shadowRadius = 5;
    [self.layer addSublayer:pulsingLayer];
    
    // 縮放動(dòng)畫(huà)
    CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.autoreverses = false;
    scaleAnimation.fromValue = @1.0f;
    scaleAnimation.toValue = @2.0f;
    
    // 透明動(dòng)畫(huà)
    CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.keyTimes = @[@0,@0.1,@0.2,@0.3,@0.4,@0.5,@0.6,@0.7,@0.8,@0.9,@1];
    opacityAnimation.values = @[@1,@0.9,@0.8,@0.7,@0.6,@0.5,@0.4,@0.3,@0.2,@0.1,@0];
    
    CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
    animationGroup.beginTime = CACurrentMediaTime() + 1;
    animationGroup.fillMode = kCAFillModeBackwards;
    animationGroup.repeatCount = HUGE_VAL;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animationGroup.duration = 2;
    animationGroup.animations = @[scaleAnimation,opacityAnimation];
    [pulsingLayer addAnimation:animationGroup forKey:@"pulse"];
    
    
    // 中間圓環(huán)
    CALayer * middleCycle = [CALayer layer];
    middleCycle.frame = CGRectMake(pulsingX, pulsingY, pulsingWidth, pulsingWidth);
    middleCycle.cornerRadius = pulsingWidth * 0.5;
    middleCycle.borderColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
    middleCycle.backgroundColor = [UIColor whiteColor].CGColor;
    middleCycle.shadowOffset = CGSizeMake(0, 0);
    middleCycle.borderWidth = 1;
    middleCycle.shadowRadius = 3;
    middleCycle.shadowOpacity = 1;
    middleCycle.shadowColor = [UIColor lightGrayColor].CGColor;
    [self.layer addSublayer:middleCycle];
    
    
    // 添加到self.layer上
    CGPoint fanshapedCenter = self.center;
    UIBezierPath * fanshapedPath = [UIBezierPath bezierPath];
    [fanshapedPath addArcWithCenter:CGPointZero radius:(pulsingWidth + 20) * 0.5 startAngle:3 * M_PI / 2 endAngle:0 clockwise:YES];
    [fanshapedPath addLineToPoint:CGPointZero];
    [fanshapedPath closePath];
    CAShapeLayer * fanshapedLayer = [CAShapeLayer layer];
    fanshapedLayer.path = fanshapedPath.CGPath;
    fanshapedLayer.opacity = 0.7;
    fanshapedLayer.position = fanshapedCenter;
    fanshapedLayer.fillColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
    [self.layer addSublayer:fanshapedLayer];
  
    // 添加到middleCycle上
//    [fanshapedPath addArcWithCenter:CGPointMake(0,0) radius:(pulsingWidth + 20) * 0.5 startAngle:3 * M_PI / 2 endAngle:0 clockwise:YES];
//    [fanshapedPath addLineToPoint:CGPointZero];
//    CAShapeLayer * fanshaped = [CAShapeLayer layer];
//    fanshaped.fillColor = [UIColor colorWithRed:41/255.0 green:152/255.0 blue:241/255.0 alpha:1].CGColor;
//    fanshaped.opacity = 0.7;
//    fanshaped.position = CGPointMake(middleCycle.frame.size.width * 0.5, middleCycle.frame.size.height * 0.5);
//    [fanshapedPath closePath];
//    fanshaped.path = fanshapedPath.CGPath;
//    [middleCycle addSublayer:fanshaped];
//    NSLog(@"fanshaped==== frame:%@,anchorPoint:%@,bounds:%@,position:%@",NSStringFromCGRect(fanshaped.frame),NSStringFromCGPoint(fanshaped.anchorPoint),NSStringFromCGRect(fanshaped.bounds),NSStringFromCGPoint(fanshaped.position));
 
    
    CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat: 3 * M_PI ];
    rotationAnimation.duration = 8;
    rotationAnimation.cumulative = YES;
    rotationAnimation.removedOnCompletion = NO;
    rotationAnimation.repeatCount = MAXFLOAT;
    rotationAnimation.fillMode = kCAFillModeForwards;
    //    [middleCycle addAnimation:rotationAnimation forKey:@"rotation"];

    [fanshapedLayer addAnimation:rotationAnimation forKey:@"rotation"];
    
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評(píng)論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,141評(píng)論 5贊 13
  • 轉(zhuǎn)載：http://www.lxweimin.com/p/32fcadd12108 每個(gè)UIView有一個(gè)伙伴稱(chēng)為l...
    F麥子閱讀 6,307評(píng)論 0贊 13
  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種：UIView動(dòng)畫(huà)，核心動(dòng)畫(huà)，幀動(dòng)畫(huà)，自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,159評(píng)論 1贊 23
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你...
    被吹落的風(fēng)閱讀 1,602評(píng)論 1贊 2