动画 UIView 形状及其内容

Posted 2023-03-13

【中文标题】动画 UIView 形状及其内容

【英文标题】：Animating UIView shape and its content

【发布时间】：2013-07-12 08:55:05

【问题描述】：

在 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 的一个实例。 它可以工作，但视图内容也不是动画。

我需要把一个视图变成一个圆圈，然后让它缩小直到消失。

【参考方案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：

在 cmets 中回答你的问题：

您可以通过创建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 个动画，并在拉伸、收缩或您计划执行的任何操作时调整内容的大小；-)

【讨论】：

您好 wkberg，感谢您的快速回答！实际上我把我的任务简化得太多了，实际上动画要复杂得多，从矩形变成圆形只是一个（不好的）例子。我需要模拟一个动画，其中一个具有箭头形状的视图被吸入一个洞中。为了实现这一点，我正在考虑创建一组代表视图形状的贝塞尔曲线，然后让 Quartz 动画从一个到另一个。结果应该和ios6中的邮件等拉动刷新动画非常相似，但正如所说的要动画的视图有一些内容。

不客气 ;-) 所以实际上你正在创造一个洞。向它伸展你的箭头。将其作为the suction 移动到孔中，即sucked in。就像在向洞移动然后移除或只是不被看到？

我试图勾勒出我的想法，结果如下：img59.imageshack.us/img59/8690/t6au.jpg 孔是左边的圆圈，而要动画的视图是右边的箭头。希望很清楚:)

好的，我已经更新了我的答案：那么您只需要注意缩小 arrowView 中的内容即可。

如果我是对的，你写的两个动画只负责调整框架的大小，它仍然是一个矩形。我之前提到过贝塞尔曲线，以便能够在动画期间增加角圆度（通过控制点）并实现一种液体/流体效果，正如我试图在我的草图中描绘的那样 :)

【参考方案2】：

如果您想对形状的变化进行动画处理，您可以使用 CAShapeLayer。这需要一个描述要绘制的形状的 CGPath。它只能绘制1条路径，并且该绘制只能使用单一的线条颜色和单一的填充颜色。你不能用颜色 1 画一些线，用颜色 2 画其他线，等等。

一旦有了 CAShapeLayer，您就可以对与形状层关联的 CGPath 对象进行动画更改。让它工作的诀窍是开始和结束 CGPath 需要有相同数量的控制点。如果您使用具有 3 条链接贝塞尔路径的路径，则结束路径也需要使用 3 条链接贝塞尔路径，但您可以随意移动这些点。

我通过实验发现，您无法对贝塞尔曲线中的弧线进行动画更改。原因是系统内部会生成一系列贝塞尔曲线来创建圆弧，圆弧角度越大，贝塞尔曲线段越多。