平滑的形状移动动画

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

脏代码：

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:四次以组成圆角矩形。 （它会自动将直线添加到您的路径中）。 您可以在“思考像贝西尔路径” （由我编写）中阅读更多关于Bézier路径构造的信息。 那里有一些交互元素可以帮助您弄清楚如何将弧添加到路径中。

创建自定义路径动画

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