6

如何改变形状（从椭圆形到矩形，反之亦然）动画？

脏代码：

UIBezierPath *roundedRectBezierPath = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:10];
UIBezierPath *ovalBezierPath = [UIBezierPath bezierPathWithOvalInRect:newRect];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 3;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

if (isRect) {

    self.shapeLayer.path = roundedRectBezierPath.CGPath;
    animation.fromValue = (__bridge id)(ovalBezierPath.CGPath);
    animation.toValue = (__bridge id)(roundedRectBezierPath.CGPath);

} else {

    self.shapeLayer.path = ovalBezierPath.CGPath;
    animation.fromValue = (__bridge id)(roundedRectBezierPath.CGPath);
    animation.toValue = (__bridge id)(ovalBezierPath.CGPath);

}    

[self.shapeLayer addAnimation:animation forKey:@"animatePath"];

结果很奇怪：

糟糕的动画

我希望形状会缩小/扩大，而不是奇怪的重绘。

4

1 回答 1

12

如果您查看文档，这正是您应该期望的行为。从文档：

如果两条路径具有不同数量的控制点或段，则结果未定义。

您可以通过两种方式解决此问题：

  • 以您可以保证它们都具有相同数量的路径的方式自己创建路径
  • 自己为路径转换创建自定义动画。

创建具有相同数量的段和控制点的路径

对于第一个选项，我将使用addArcWithCenter:radius:startAngle:endAngle:clockwise:四次来组成圆角矩形。（它会自动将直线添加到您的路径中）。您可以在“像 Bézier 路径一样思考”（由我编写）中阅读有关 Bézier 路径构造的更多信息。那里有一些交互式元素可以帮助您了解如何将弧线添加到路径中。      

创建自定义路径动画

另一种选择是使用不同数量的控制点和/或段以任何方式创建路径，并自己制作动画。这是对如何使用形状图层制作自己的路径动画的一个很好的解释。

于 2013-07-03T11:14:55.187 回答