平滑的形状移动动画

Question

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

脏代码：

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

结果很奇怪：

我希望形状缩小/扩展，而不是怪异的重绘。

Answer 1

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

  

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

你可以通过两种方式解决这个问题：

• 自己创建路径，以确保它们都具有相同数量的路径
• 自行为路径转换创建自定义动画。

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

对于第一个选项，我会使用addArcWithCenter:radius:startAngle:endAngle:clockwise:四次来组成圆角矩形。 （它会自动将直线添加到您的路径中）。您可以在"Thinking like Bézier paths"（由我编写）中详细了解Bézier路径的构造。那里有一些交互式元素可以帮助您弄清楚如何将弧添加到路径中。

创建自定义路径动画

另一个选项是使用不同数量的控制点和/或片段以任何方式创建路径，并自己动画。 This is an excellent explanation如何使用形状图层制作自己的路径动画。