Ios 为UIView从圆到销设置动画

我需要实现一个动画，我从一个圆开始进入一个引脚。 动画将开始时，我长按圆圈，圆圈将成为一个引脚。当我释放视图时，销将返回其初始形式（圆形）

最后，它将看起来像：

---

实现这一点的最佳方法是什么？

这可能有点复杂，您需要使用两组

UIBezierPath

实现形状变形动画

首先创建两个bezier路径以定义圆和销的形状

首先准备一个定义

pin的
UIBezierPath
。您可能需要多次调用
addQuadCurve（到endPoint:CGPoint，controlPoint:CGPoint）
以获得完美的形状。让我们把这个
UIBezierPath
说成
pinPath

在第二步中，只需移动点或更改为

管脚创建贝塞尔路径时使用的曲线，即可为
圆创建另一个形状。确保两条路径中的点/曲线数量完全相同，变化将发生在位置或控制点上。让我们将此贝塞尔路径称为
circlePath

[您可能需要与设计师密切合作才能创建这两个形状，您可以将这些形状导出为SVG文件，并使用http://svg-converter.kyome.io/]

在自定义

UIControl

上添加形状，该形状将用作滑块。 假设您的拇指层被称为

thumbLayer

let thumbLayer = CAShapeLayer()
thumbLayer.frame = ...
thumbLayer.fillColor = ...
thumbLayer.strokeColor = ...
thumbLayer.path = circlePath.cgPath
myCustomSlider.layer.addSublayer(thumbLayer)

从圆到针形设置动画 我希望这将有助于您理解使用

UIBezierPath

进行形状变形动画的基本思想

let animation = CABasicAnimation(keyPath: "path")
animation.toValue = pinPath.cgPath
animation.duration = 1
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.isRemovedOnCompletion = false
thumbLayer.add(animation, forKey: animation.keyPath)