动画 UIView 从圆到针

Question

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

最后看起来像：

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

Answer 1

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

来实现形状变形动画

首先创建两条贝塞尔曲线路径来定义圆形和图钉的形状

1. 首先准备一个定义pin的UIBezierPath。您可能需要多次调用 addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint) 才能获得完美的形状。假设这个 UIBezierPath 为 pinPath,

2. 在第二步中，您需要通过移动点或更改用于为 pin 创建贝塞尔曲线路径的曲线来为 circle 创建另一个形状。确保 points/curves 的数量在两条路径中完全相同，变化将在位置或控制点。我们将此贝塞尔曲线路径称为 circlePath.

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

在自定义 UIControl 上添加您的形状，它将充当滑块。

假设您的拇指层被称为 thumbLayer。

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

从圆形到图钉形状的动画

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)

我希望这个 example gist 对您理解使用 UIBezierPath 的形状变形动画的基本概念有所帮助。