uiview - 如何 'animate' 在 IOS 中改变 View 的形状？ (即改变它的路径从一个到另一个)

Question

一个“动画”如何根据形状更改自定义 UIView，从一种形状到另一种形状？

假设例如创建一个 UIView，它看起来像一个形状，使用 UIBezierPath 创建。但是，您希望此 View 对象以“动画”样式从自定义形状 1 更改为自定义形状 2？所以我可以使用 UIBezierPath 创建两个单独的路径来表示两个形状，但我不清楚如何“动画”从一个移动到另一个？

也不确定“动画”是否是正确的术语。例如，如果这本质上是不可动画的，那么也许我的意思是“视觉上改变”对象的 View 从一个到另一个。

我正在阅读这些但仍然不太明白如何:UIBezierPath、CAShapeLayer、CADisplayLink、

Answer 1

您可以简单地更改 path CAShapeLayer 的属性它将使用隐式动画制作动画。动画不需要显示链接，因为核心动画子系统会为您处理一切。显示链接适用于需要与显示器刷新率同步的高性能/精度计时器。

更改 CAShapeLayer 的路径属性，您可以使用 UIBezierPath 建立路径对象，然后返回其 CGPath。类似(在 Swift 中)

let bezier = UIBezierPath()
bezier.moveToPoint(CGPointMake(100.0, 100.0))
bezier.addLineToPoint(CGPointMake(150.0, 90.0))
...
bezier.closePath()

let shapeLayer = CAShapeLayer()
shapeLayer.path = bezier.CGPath

请记住，这是真正的代码，但是，您需要构建用于显示的形状图层的属性，例如边界和位置，并且至少需要设置形状图层的 strokeColor所以你可以看到发生了什么。 fillColor出于同样的原因，属性也可以很好地设置。

一旦您建立了初始形状(路径)，您就可以创建第二条贝塞尔曲线路径，您的路径可以将其设置为动画。不过，这就是问题所在。如果新路径的点数与之前路径的点数不同，则动画可能不会按照您的预期执行。

巧的是，我最近一直在玩这种东西，只是为了好玩。我写了一些代码来看看它是如何工作的。你可以在这里获取(Swift)代码: https://github.com/perlmunger/Morph .它做你在这个动画中看到的。它并没有完全按照我期望的方式变形，但它提供了一个简洁的插图: