平滑的形状移动动画 [英] Smooth shape shift animation

问题描述

如何移动形状（从椭圆形变为直角，反之亦然）？

How to shift shape (from oval to rect and vice versa) animated?

脏代码：

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

结果很奇怪：

img src =https://i.stack.imgur.com/xJWN4.gifalt =坏动画>

我期望形状缩小/不奇怪的重画。

I expect shape to shrink/expand, not weird redraw.

推荐答案

如果你看看文档，这正是你应该期待的行为。从文档：

If you look at the documentation this is exactly the behavior that you should expect. From the docs:

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

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

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

You can get around this in two ways: either

• 路径自己的方式，你可以保证他们都有相同数量的路径


• 自己创建一个自定义动画的路径转换。

第一个选项我将使用 addArcWithCenter：radius：startAngle：endAngle：clockwise：四次来组成圆角矩形。 （它将自动添加直线到您的路径）。您可以在像Bézier路径一样思考（由我撰写）中详细了解Bézier路径的构建）。有一些交互式元素，应该可以帮助你找出如何添加弧路径工程。

For the first option I would use addArcWithCenter:radius:startAngle:endAngle:clockwise: four times to make up the rounded rect. (It will automatically add the straight lines to your path). You can read more about the construction of Bézier paths in "Thinking like Bézier paths" (written by me). There are some interactive elements there that should help you figure out how adding arcs to a path works.      

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

The other option is to create the paths any way you want with different numbers of control points and/or segments and do the animation yourself. This is an excellent explanation of how to do your own path animations with shape layers.

这篇关于平滑的形状移动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！