Анимируйте UIView, чтобы «прихлопнуть» свой путь к месту назначения вместо того, чтобы идти по прямой

Question

У меня есть такая анимация:

bubble.frame.origin = CGPoint(x: 75, y: -120)

UIView.animate(
    withDuration: 2.5,
    animations: {
        self.bubble.transform = CGAffineTransform(translationX: 0, y: self.view.frame.height * -1.3)
    }
)

Однако анимация идет по прямой линии.Я хочу, чтобы анимация выполняла небольшое движение назад и вперед по пути к месту назначения.Как пузырь.Есть идеи?

Answer 1

Если вы хотите анимировать вдоль пути, вы можете использовать CAKeyframeAnimation.Вопрос только в том, какого типа path вы хотите.Может быть достаточно демпфированной синусоиды:

func animate() {
    let box = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    box.backgroundColor = .blue
    box.center = bubblePoint(1)
    view.addSubview(box)

    let animation = CAKeyframeAnimation(keyPath: "position")
    animation.path = bubblePath().cgPath
    animation.duration = 5
    box.layer.add(animation, forKey: nil)
}

, где

private func bubblePath() -> UIBezierPath {
    let path = UIBezierPath()
    path.move(to: bubblePoint(0))
    for value in 1...100 {
        path.addLine(to: bubblePoint(CGFloat(value) / 100))
    }

    return path
}

/// Point on curve at moment in time.
///
/// - Parameter time: A value between 0 and 1.
/// - Returns: The corresponding `CGPoint`.

private func bubblePoint(_ time: CGFloat) -> CGPoint {
    let startY = view.bounds.maxY - 100
    let endY = view.bounds.minY + 100
    let rangeX = min(30, view.bounds.width * 0.4)
    let midX = view.bounds.midX

    let y = startY + (endY - startY) * time
    let x = sin(time * 4 * .pi) * rangeX * (0.1 + time * 0.9) + midX
    let point = CGPoint(x: x, y: y)
    return point
}

Выход: