圆形动画

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

试试这段代码。可能会有帮助。

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

Answer 2

您可以使用圆形贝塞尔曲线路径创建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];