Introduction

Animating a view or image along a curve is usually easier if you think in terms of a path instead of hand-calculating intermediate coordinates. On Apple platforms, the standard solution is to build a UIBezierPath and feed it to a keyframe animation.

Use a Path, Not Manual Frames

If you move a view by repeatedly changing frame.origin, you have to invent the curve math yourself. A path-based animation is cleaner because the curve shape is described once and Core Animation handles interpolation.

Here is a basic example that moves an UIImageView along a quadratic-style arc:

1import UIKit
2
3final class ViewController: UIViewController {
4    private let imageView = UIImageView(image: UIImage(systemName: "paperplane.fill"))
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        view.backgroundColor = .white
9
10        imageView.tintColor = .systemBlue
11        imageView.frame = CGRect(x: 40, y: 500, width: 40, height: 40)
12        view.addSubview(imageView)
13
14        animateAlongCurve()
15    }
16
17    private func animateAlongCurve() {
18        let path = UIBezierPath()
19        path.move(to: imageView.center)
20        path.addQuadCurve(
21            to: CGPoint(x: 320, y: 180),
22            controlPoint: CGPoint(x: 180, y: 40)
23        )
24
25        let animation = CAKeyframeAnimation(keyPath: "position")
26        animation.path = path.cgPath
27        animation.duration = 2.0
28        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
29        animation.fillMode = .forwards
30        animation.isRemovedOnCompletion = false
31
32        imageView.layer.add(animation, forKey: "curveMove")
33    }
34}

This creates the visual motion, but there is an important caveat: it animates the presentation layer, not the model layer's stored position.

Keep the Final Position in Sync

If you only add the animation, the image may snap back later when the layer redraws. To avoid that, update the real position too.

1private func animateAlongCurve() {
2    let finalPoint = CGPoint(x: 320, y: 180)
3
4    let path = UIBezierPath()
5    path.move(to: imageView.center)
6    path.addQuadCurve(
7        to: finalPoint,
8        controlPoint: CGPoint(x: 180, y: 40)
9    )
10
11    let animation = CAKeyframeAnimation(keyPath: "position")
12    animation.path = path.cgPath
13    animation.duration = 2.0
14    animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
15
16    imageView.layer.add(animation, forKey: "curveMove")
17    imageView.center = finalPoint
18}

That keeps the view's underlying state aligned with what the user saw.

Rotate Along the Curve

If you want the image to face the direction of travel, set the rotation mode:

animation.rotationMode = .rotateAuto

This works well for icons such as arrows, planes, or cars. For symmetric images such as circles, the rotation may not matter.

When to Use Keyframes vs Physics

Path animation is ideal when the motion is predetermined, like a tutorial hint, a send animation, or a decorative transition. If the motion depends on live user dragging, collision, or inertia, a physics-based approach is often more appropriate.

In other words:

• use a path when you know the route ahead of time
• use gesture or physics systems when the route emerges from interaction

You can also combine both approaches. For example, a drag interaction may decide the destination, and then a path animation can take over for the polished final travel arc.

Common Pitfalls

• Animating only the layer presentation and forgetting to update the actual view position.
• Using frame.origin when position or center is the property being animated.
• Expecting Auto Layout constraints to respect the animation automatically. If constraints control the final position, update them too.
• Drawing a path in the wrong coordinate space. The path points must match the animated layer's parent coordinate system.

Summary

• A curved motion animation is easiest with UIBezierPath and CAKeyframeAnimation.
• Animate the position key path for smooth movement along the path.
• Update the view's real final position so it does not snap back later.
• Use rotationMode if the image should face the direction of travel.
• Prefer path animation for predetermined motion and physics for interactive motion.