Использование UIBezierPath
(Не забудьте добавить ссылку, а затем import QuartzCore, если вы используете iOS 6 или более раннюю версию)
Пример кода
Вы можете использовать анимацию, которая будет следовать по пути, достаточно удобно, CAKeyframeAnimation поддерживает CGPath, который можно получить из UIBezierPath. Свифт 3
func animate(view : UIView, fromPoint start : CGPoint, toPoint end: CGPoint)
{
// The animation
let animation = CAKeyframeAnimation(keyPath: "position")
// Animation's path
let path = UIBezierPath()
// Move the "cursor" to the start
path.move(to: start)
// Calculate the control points
let c1 = CGPoint(x: start.x + 64, y: start.y)
let c2 = CGPoint(x: end.x, y: end.y - 128)
// Draw a curve towards the end, using control points
path.addCurve(to: end, controlPoint1: c1, controlPoint2: c2)
// Use this path as the animation's path (casted to CGPath)
animation.path = path.cgPath;
// The other animations properties
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name:kCAMediaTimingFunctionEaseIn)
// Apply it
view.layer.add(animation, forKey:"trash")
}
Понимание UIBezierPath
Пути Безье (или Кривые Безье , если быть точным) работают точно так же, как те, которые вы найдете в фотошопе, фейерверке, эскизе ... У них есть две "контрольные точки", по одной на каждую вершину , Например, анимация, которую я только что сделал:
Так работает путь Безье. См. документацию по специфике , но в основном это две точки, которые "тянут" дугу в определенном направлении.
Рисование дорожки
Одна замечательная особенность UIBezierPath заключается в том, что вы можете рисовать их на экране с помощью CAShapeLayer, таким образом, помогая вам визуализировать путь, которым он будет следовать.
// Drawing the path
let *layer = CAShapeLayer()
layer.path = path.cgPath
layer.strokeColor = UIColor.black.cgColor
layer.lineWidth = 1.0
layer.fillColor = nil
self.view.layer.addSublayer(layer)
Улучшение исходного примера
Идея вычисления вашего собственного пути Безье состоит в том, что вы можете сделать полностью динамический, таким образом, анимация может изменить кривую, которую она собирается сделать, основываясь на нескольких факторах, а не просто жестко кодировать, как я делал в Например, контрольные точки могут быть рассчитаны следующим образом:
// Calculate the control points
let factor : CGFloat = 0.5
let deltaX : CGFloat = end.x - start.x
let deltaY : CGFloat = end.y - start.y
let c1 = CGPoint(x: start.x + deltaX * factor, y: start.y)
let c2 = CGPoint(x: end.x , y: end.y - deltaY * factor)
Этот последний бит кода делает так, чтобы точки были похожи на предыдущий рисунок, но в переменном количестве по отношению к треугольнику, который формируют точки, умноженному на коэффициент, который был бы эквивалентен значению "натяжения" .