问题描述
我需要实现一个动画，其中我从圆圈开始变成大头针。 长按圆圈时，动画将开始，圆圈将变为大头针。当我释放视图时，图钉将返回其初始形式（圆圈）
最后，它看起来像：
实现此目标的最佳方法是什么？
解决方法
这可能有点复杂，您需要使用两组UIBezierPath来实现形状变形动画。
首先创建两个贝塞尔曲线路径，以定义圆形和大头针的形状
-
首先准备定义
UIBezierPath的{{1}}。您可能需要多次致电pin才能获得完美的形状。假设addQuadCurve(to endPoint: CGPoint,controlPoint: CGPoint)为UIBezierPath， -
第二步，您需要为
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)
进行形状变形动画的基本思想。
