平滑的形状移动动画

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

创建自定义路径动画

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