How to move a view along a curved path in iOS

Question

How to animate/move the view in the curve path, is it possible to do using UIAnimation.

Like moving a view in the path as in the image.

Crossbench

Answer 1

You can do it using Core Animation and CAKeyFrameAnimation to define the curve points. See this tutorial: http://nachbaur.com/2011/01/07/core-animation-part-4/

Lith

That example refers to animating layers, not whole views. I have a case where I need to move a whole UIView along a path. I can easily use animateWithDuration to get it from here to there, but I can't see how to use that to get it from here to there using a given path. When I try to string together a bunch of animateWithDuration calls, the last call always cancels the earlier ones. – Spicer

Answer 2

Above one can be achived by:-

i)CAKeyframeAnimation ii)Create Curve Path iii)Animate layer of Custom View

import UIKit
import CoreGraphics
class ViewController: UIViewController {

    var moveAlongPath:CAAnimation!

    override func viewDidLoad() {
        super.viewDidLoad()

        addAnimation()
        initiateAnimation()
    }

    func curevedPath() -> UIBezierPath {

        let path = createCurvePath()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = 1.0
        self.view.layer.addSublayer(shapeLayer)
        return path
    }


    func addAnimation() {
        let moveAlongPath = CAKeyframeAnimation(keyPath: "position")
        moveAlongPath.path = curevedPath().cgPath
        moveAlongPath.duration = 5
        moveAlongPath.repeatCount = HUGE
        moveAlongPath.calculationMode = kCAAnimationPaced
        moveAlongPath.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
        self.moveAlongPath = moveAlongPath
    }

    func initiateAnimation() {
        let layer = createLayer()
        layer.add(moveAlongPath, forKey: "animate along Path")
    }

    //MARK:- Custom View Path
    func createLayer() -> CALayer {
        let customView  = CustomView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        self.view.addSubview(customView)
        let customlayer = customView.layer
        customlayer.bounds = CGRect(x: 0, y: 0, width: 50, height: 50)
        customlayer.position = CGPoint(x: 25, y: 25)
        return customlayer
      }

    //MARK:- Custom Curve Path
    func createCurvePath() -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 10, y: 200))
        path.addQuadCurve(to: CGPoint(x: 300, y: 200), controlPoint: CGPoint(x: 150, y: 10) )
        return path
    }

}


class CustomView:UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpView()
    }

    func setUpView() {
        let image = UIImage(named: "Go.png")
        let imageView = UIImageView(image: image)
        imageView.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
        addSubview(imageView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

Demo Reference

Formality

Answer 3

You can stack animations by nesting them in the completion clause.

Dragonroot