圆形动画

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"];