Блог

Мне нужно реализовать анимацию, в которой я начинаю с круга в вывод. Анимация начнется, когда я долго нажимаю на круг, круг станет pin-кодом. Когда я отпущу view, pin-код вернется к своей первоначальной форме (circle)

В конце это будет выглядеть:

Каков наилучший способ добиться этого?

Это может быть немного сложно, вам нужно реализовать анимацию преобразования формы с использованием двух наборов UIBezierPath .

Сначала создайте два контура Безье, чтобы определить формы для круга и булавки

1. Сначала подготовьте, UIBezierPath который определяет pin . Возможно, вам потребуется выполнить несколько вызовов addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint) для достижения идеальной формы. Давайте скажем это UIBezierPath как pinPath ,

2. На втором шаге вам нужно создать другую фигуру для circle , просто переместив точки или изменив кривые, используемые при создании контура Безье для pin . Убедитесь, что количество точек / кривых будет точно таким же в обоих путях, изменение будет в указателях или контрольных точках. Давайте назовем это bezier paths как circlePath .

[ВОЗМОЖНО, ВАМ ПОТРЕБУЕТСЯ ТЕСНО СОТРУДНИЧАТЬ С ВАШИМ ДИЗАЙНЕРОМ ДЛЯ СОЗДАНИЯ ЭТИХ ДВУХ ФИГУР, вы можете экспортировать эти фигуры в виде SVG-файлов и преобразовать их в UIBezierPath с помощью http://svg-converter.kyome.io /]

Добавьте свою фигуру на пользовательский UIControl , который будет действовать как слайдер.

Допустим, ваш слой thumb вызывается как 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)
  

Я надеюсь, что этот пример поможет вам понять основную идею анимации преобразования формы с помощью UIBezierPath .