iphone - 平滑的变形动画

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

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

If the two paths have a different number of control points or segments the results are undefined.

你可以通过两种方式解决这个问题:或者

• 自己创建路径，确保路径数量相同
• 自己为路径转换创建自定义动画。

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

对于第一个选项，我将使用 addArcWithCenter:radius:startAngle:endAngle:clockwise: 四次来组成圆角矩形。 (它会自动将直线添加到您的路径中)。您可以在 "Thinking like Bézier paths" 中阅读更多关于贝塞尔路径构造的信息。 (我写的)。那里有一些交互式元素可以帮助您了解如何向路径添加弧线。

创建自定义路径动画

另一种选择是使用不同数量的控制点和/或段以您想要的任何方式创建路径，然后自己制作动画。 This is an excellent explanation了解如何使用形状图层制作您自己的路径动画。