4

如何“动画”更改基于形状的自定义 UIView,从一种形状到另一种形状?

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

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

我正在阅读这些内容,但仍然不太了解:UIBezierPath、CAShapeLayer、CADisplayLink、

4

1 回答 1

8

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

要更改 a 的路径属性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 。它执行您在此动画中看到的操作。它并没有完全按照我期望的方式变形,但它提供了一个简洁的插图:在此处输入图像描述

于 2015-11-17T00:09:17.077 回答