CAShapeLayer和動畫位置問題

Question

我正在製作一個iPhone應用程序，在屏幕上繪製一個圓圈。我使用一個計時器（每5秒鐘），這樣我就可以「成長」這個圈子，然後等待5秒鐘，然後再次增長。現在我在動畫增加圓的大小時遇到​​了麻煩（我使用路徑和CAShapeLayer圖層）。動畫的大小（從和到）都很好，只要它開始圓圈移動到左上角並從那裏增長。任何幫助或建議都會很棒。謝謝

這是實施的類是一個UIControl，它被添加到UIView。

//Called in init method 
(void) initalPop { 
    //Circle 
    self.bubble = [CAShapeLayer layer]; 
    self.bubble.bounds = self.bounds; 
    self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)); 
    self.bubble.fillColor = [ 
    [UIColor greenColor] CGColor 
    ]; 
    self.bubble.strokeColor = [ 
    [UIColor greenColor] CGColor 
    ]; 
    self.bubble.lineWidth = 4.0; 
    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathAddEllipseInRect(path, nil, self.bounds); 
    self.bubble.path = path; 
    [self.layer addSublayer: self.bubble]; 
} 
//Called when timer goes off 
- (void) StageGrow { 
    CGFloat growSize = 50.0; 
    //Change the size of us and center the circle (but dont want to animate this 
    [CATransaction begin]; 
    [CATransaction setValue: (id) kCFBooleanTrue forKey: kCATransactionDisableActions]; 
    self.bounds = CGRectMake(0, 0, self.bounds.size.width + growSize, self.bounds.size.height + growSize); 
    self.bubble.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)); 
    [CATransaction commit]; 
    [self ActualGrowCircle]; 
} - (void) ActualGrowCircle { 
    CGMutablePathRef oldPath = CGPathCreateMutable(); 
    CGPathAddEllipseInRect(oldPath, nil, self.bubble.bounds); 
    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathAddEllipseInRect(path, nil, self.bounds); 
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @"path"]; 
    animation.duration = 2.0; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; 
    animation.repeatCount = 1; 
    animation.delegate = self; 
    animation.autoreverses = NO; 
    animation.fromValue = (__bridge id) oldPath; 
    animation.toValue = (__bridge id) path; 
    self.bubble.bounds = self.bounds; 
    self.bubble.path = path; 
    [self.bubble addAnimation: animation forKey: @"animatePath"]; 
} 

Answer 1

解決了它。從長遠來看，我將動畫分組在一起，一切都變好了（見下面的代碼）。感謝您的幫助Rob。

-(void)ActualGrowCircle { 
    CGMutablePathRef newPath = CGPathCreateMutable(); 
    CGPathAddEllipseInRect(newPath, nil, self.bounds); 

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    animation.repeatCount = 1; 
    animation.autoreverses = NO; 
    animation.fromValue = (__bridge id)self.bubble.path; 
    animation.toValue = (__bridge id)newPath; 

    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds"]; 
    animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    animation2.repeatCount = 1; 
    animation2.autoreverses = NO; 
    animation2.fromValue = [NSValue valueWithCGRect:self.bubble.bounds]; 
    animation2.toValue = [NSValue valueWithCGRect:self.bounds]; 

    CAAnimationGroup *group = [CAAnimationGroup animation]; 
    [group setAnimations:[NSArray arrayWithObjects: animation2, animation, nil]]; 
    group.duration = 0.5; 
    group.delegate = self; 

    self.bubble.bounds = self.bounds; 
    self.bubble.path = newPath; 
    [self.bubble addAnimation:group forKey:@"animateGroup"]; 

    CGPathRelease(newPath); 


} 

Answer 2

假設您正在將泡泡從尺寸（100,100）擴大到尺寸（150,150）。

在矩形（0，0，100，100）中創建oldPath作爲橢圓。

在矩形（0,0,150,150）中創建path作爲橢圓。

您將氣泡圖層的邊界設置爲（0,0,150,150），並且不會爲此更改設置動畫。

這意味着oldPath將看起來與氣泡層的頂部和左邊緣對齊。解決這個問題

一種方法是在在氣泡的新邊界爲中心的矩形創建oldPath：

CGRect oldBubbleRect = CGRectInset(self.bounds, growSize/2, growSize/2); 
CGPathRef oldPath = CGPathCreateWithEllipseInRect(oldBubbleRect, NULL); 

順便說一句，你是泄露你創建的路徑。完成它們之後，你需要在它們上面調用CGPathRelease。