编辑1：

Question

在iPhone应用中，您如何为UIView的形状设置动画，例如从矩形变为圆形？

我试过了：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 20.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge_transfer id)aPath;
animation.toValue = (__bridge_transfer id)anotherPath;
[myShapeLayer addAnimation:animation forKey:@"animatePath"];

其中myShapeLayer是CAShapeLayer和aPath以及anotherPath CGMutablePathRef的实例。它可以工作，但视图内容也没有动画。

我需要将视图转换为圆形，然后让它缩小直到它消失。

Answer 1

尝试这样的事情： animeView是你的UIView

CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim1.fromValue = [NSNumber numberWithFloat:0.0f];
anim1.toValue = [NSNumber numberWithFloat:50.0f]; //Half the size of your UIView
anim1.duration = 2.0;
[animeView.layer addAnimation:anim1 forKey:@"cornerRadius"];

[UIView animateWithDuration:10.0 delay:2 options:UIViewAnimationOptionCurveEaseInOut animations:^{

    animeView.layer.cornerRadius = 50; //Half the size of your UIView
    CGRect reduceRect = animeView.frame;
    reduceRect.size.height = 0;
    reduceRect.size.width = 0;
    [animeView setFrame:reduceRect];
    animeView.alpha = 0;
                    } completion:nil];

可能需要在这里和那里进行一些调整; - ）

编辑1：

好的，那么使用两个UIView animations怎么样？第一个是shrink，strech和move您的观点。第二个是shrink，slink和remove您的观点。

[UIView animateWithDuration:2.0 delay:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{

    CGRect moveRect = animeView.frame;
    moveRect.origin.x = 0;
    moveRect.origin.y = (animeView.center.y -20); //Half the size of height reduction
    moveRect.size.height = (animeView.bounds.size.height -40); // height reduction
    moveRect.size.width = (animeView.bounds.size.width +20);
    [animeView setFrame:moveRect];

} completion:^(BOOL finished){
    [UIView animateWithDuration:2.0 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        CGRect reduceRect = animeView.frame;
        reduceRect.size.height = 0;
        reduceRect.size.width = 0;
        reduceRect.origin.x = -50;
        reduceRect.origin.y = animeView.center.y;
        animeView.alpha = 0;
        [animeView setFrame:reduceRect];
    } completion:nil];

}];

编辑2：

在评论中回答你的问题：

您可以通过创建CAAnimationGroup来同时执行动画。此外，我正在使用图像来创建resize of content效果。例如：

//Create a screenshot of your UIView... Still animeView in this example
UIGraphicsBeginImageContext(animeView.bounds.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[animeView.layer renderInContext:context];
UIImage *screenShot = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

//Add the image as subview:
UIImageView * imageView = [[UIImageView alloc] initWithImage:screenShot];
[animeView addSubview:imageView];

//A cornerRadius animation:
CABasicAnimation *radiusAni = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
radiusAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
radiusAni.fromValue = [NSNumber numberWithFloat:0.0f];
radiusAni.toValue = [NSNumber numberWithFloat:50.0f];

//A stretch animation:
CABasicAnimation *stretchAni = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
stretchAni.fromValue = [NSNumber numberWithDouble:1];
stretchAni.toValue = [NSNumber numberWithDouble:(animeView.frame.size.width+100)/animeView.frame.size.width];

//A slide animation:
CABasicAnimation *slideAni = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
slideAni.fromValue = [NSNumber numberWithDouble:0];
slideAni.toValue = [NSNumber numberWithDouble:-100];

//A opacity animation:
CABasicAnimation *opacityAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
opacityAni.fromValue = [NSNumber numberWithFloat:1];
opacityAni.toValue = [NSNumber numberWithFloat:0];

//The animationgroup
CAAnimationGroup *animGroup = [CAAnimationGroup animation];

//Add them to the group:
[animGroup setAnimations:[NSArray arrayWithObjects:radiusAni, opacityAni, slideAni, stretchAni, nil]];
//Set the properties:
[animGroup setDuration:3.0];
[animGroup setRemovedOnCompletion:NO];
[animGroup setFillMode:kCAFillModeForwards];

//Execute all the animations in the group:
[animeView.layer addAnimation:animGroup forKey:nil];

然后，您将同时执行4个动画，并在拉伸，缩小或您打算做的任何事情时调整内容的大小; - ）

Answer 2

如果要为形状更改设置动画，可以使用CAShapeLayer。这需要一个描述要绘制的形状的CGPath。它只能绘制1个路径，并且该绘图只能使用单行颜色和单个填充颜色。你不能用颜色1绘制一些线条，用颜色2等绘制其他线条

获得CAShapeLayer后，您可以对与形状图层关联的CGPath对象进行动画处理。使其工作的技巧是起始和结束CGPath需要具有相同数量的控制点。如果您使用具有3个链接的贝塞尔曲线路径的路径，则结束路径也需要使用3个链接的贝塞尔曲线路径，但您可以根据需要移动这些点。

我通过实验发现，您无法在贝塞尔曲线中为弧线设置动画。原因在于，在内部，系统会生成一系列贝塞尔曲线来创建圆弧，并且弧形角度越大，贝塞尔曲线越多。

动画UIView形状及其内容

2 个答案:

编辑1：

编辑2：