Как анимировать последовательно UIBezier линии

Question

Скажите пожалуйста как в Swift анимировать такую линию Я пробовал создавать маленькие UIView и анимировать их передвижение в UIView.animate также отдельно я рисовал линии UIBezier и прикреплял их так, чтобы они проходили через центры маленьких view. В методе CABasicAnimation создавал анимированные переходы "path" Но, как стало понятно, эта анимация подходит если они линейна (.curveLinear). Если мои анимированные view более динамичны (к примеру .curveEaseIn) то анимация линий смотрится нелепо т.к. не совпадает с анимацией маленьких Вью. Возможно есть способ создать эти маленькие Вьюшки, прикрепиться линиями к их центрам, и как бы их не анимировать - линии будут следовать ха ними

Answer 1

Используйте для таких нужд CAShapeLayer и анимируйте его path при помощи CABasicAnimation. Либо, если нужно вот такое дрожание - при помощи CASpringAnimation.

Простой пример в действии: есть некий layer с путем (0,0)-(1,0) и будет он анимирован до (0,0)-(1,1)

// Начальный путь, условно (0,0)-(1,0)
let initialPath = UIBezierPath()
initialPath.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
initialPath.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
diagramLayer.path = initialPath.cgPath

...

// Анимируем до конечного, (0,0)-(1,1)
let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = diagramLayer.path
let path = UIBezierPath()
path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
animation.toValue = path.cgPath
animation.duration = 0.5
CATransaction.begin()
CATransaction.setCompletionBlock { [self] in
    diagramLayer.path = path.cgPath
}
diagramLayer.add(animation, forKey: animation.keyPath)
CATransaction.commit()

Для дрожания в конце анимации нужно заменить CABasicAnimation на CASpringAnimation и переменными ниже можно регулировать поведение "пружины":

let animation = CASpringAnimation(keyPath: "path")
animation.damping = 5
animation.mass = 0.5
animation.initialVelocity = 0.1
animation.stiffness = 1500
// Остальное как в прошлом примере

Анимация сгенерированного пути посложнее:

Теперь добавление промежуточных, "переходных" путей для сгенерированного:

И наложение по таймингам:

P.S. Все эти коэффициенты, тайминг и прочее - это уже подбираете как хотите. Основное - есть вот такие инструменты для анимации и их можно применить как угодно.

БЛОГ НА HUSL

Как анимировать последовательно UIBezier линии

Ответы (1 шт):