圓形動畫

Question

我想實現一個動畫，它從點視圖開始像循環展開並填充整個視圖。我已經實現了下面的代碼，但它不會循環地填充視圖。有任何想法嗎？

- (void)viewDidLoad { 
[super viewDidLoad]; 
myView =[[UIView alloc]init]; 
myView.frame=CGRectMake(self.view.frame.size.width/2,self.view.frame.size.height/2+100, .1, .1); 
myView.backgroundColor=[UIColor redColor]; 
[self.view addSubview:myView]; 
[self animate]; 
} 

-(void)animate{ 
[UIView animateWithDuration:1.0 
         delay: 0.0 
        options:UIViewAnimationOptionCurveEaseOut 
       animations:^{ 
        [self setRoundedView: myView toDiameter:1000]; 

       } 
       completion:nil]; 
} 


-(void)setRoundedView:(UIView *)roundedView toDiameter:(float)newSize; 
{ 
CGPoint saveCenter = roundedView.center; 
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x,  roundedView.frame.origin.y, newSize, newSize); 
roundedView.frame = newFrame; 
roundedView.layer.cornerRadius = newSize/2.0; 
roundedView.center = saveCenter; 
} 

Answer 1

您可以創建一個帶有圓形貝塞爾路徑的CAShape圖層併爲路徑屬性設置動畫。

CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath: @"path"]; 

點擊這裏瞭解更多詳情：Animating CAShapeLayer size change

如果你不想使用CAnimation你可以擴展您的圓潤觀點是這樣的：

[UIView animateWithDuration:1.0 
        delay: 0.0 
       options:UIViewAnimationOptionCurveEaseOut 
      animations:^{ 
       myView.transform = CGAffineTransformMakeScale(scaleX,scaleY); 

      } 
      completion:nil]; 

Answer 2

試試看看這個代碼。可能會有所幫助。

// Set up the shape of the circle 
    int radius = 100; 
    CAShapeLayer *circle = [CAShapeLayer layer]; 
    // Make a circular shape 
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) 
              cornerRadius:radius].CGPath; 
    // Center the shape in self.view 
    circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
            CGRectGetMidY(self.view.frame)-radius); 

    // Configure the apperence of the circle 
    circle.fillColor = [UIColor redColor].CGColor; 
    circle.strokeColor = [UIColor blackColor].CGColor; 
    circle.lineWidth = 5; 

    // Add to parent layer 
    [self.view.layer addSublayer:circle]; 

    // Configure animation 
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 10.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 

    // Animate from no part of the stroke being drawn to the entire stroke being drawn 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 

    // Experiment with timing to get the appearence to look the way you want 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 

    // Add the animation to the circle 
    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];