从圆到脚对UIView进行动画处理 首先创建两个贝塞尔曲线路径，以定义圆形和大头针的形状在将用作滑块的自定义UIBezierPath上添加形状从圆形到大头针形动画

如何解决从圆到脚对UIView进行动画处理 首先创建两个贝塞尔曲线路径，以定义圆形和大头针的形状在将用作滑块的自定义UIBezierPath上添加形状从圆形到大头针形动画

我需要实现一个动画，其中我从圆圈开始变成大头针。 长按圆圈时，动画将开始，圆圈将变为大头针。当我释放视图时，图钉将返回其初始形式（圆圈）

最后，它看起来像：

实现此目标的最佳方法是什么？

解决方法

这可能有点复杂，您需要使用两组UIBezierPath来实现形状变形动画。

首先创建两个贝塞尔曲线路径，以定义圆形和大头针的形状

1. 首先准备定义UIBezierPath的{​​{1}}。您可能需要多次致电pin才能获得完美的形状。假设addQuadCurve(to endPoint: CGPoint,controlPoint: CGPoint)为UIBezierPath，

2. 第二步，您需要为pinPath创建另一种形状，只需移动点或更改为circle创建贝塞尔曲线时使用的曲线。确保两条路径中的点/曲线数完全相同，更改将在位置或控制点中进行。我们将此贝塞尔曲线称为pin。

[您可能需要与您的设计师紧密合作以创建这两种形状，您可以将这些形状导出为SVG文件，并使用http://svg-converter.kyome.io/将其转换为circlePath

在将用作滑块的自定义UIBezierPath上添加形状。

假设您的拇指层称为UIControl。

thumbLayer

从圆形到大头针形动画

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

我希望这个example gist有助于您了解使用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) 进行形状变形动画的基本思想。