Swift Circular Movement Animation of an image [duplicate] - ios

Question

This question already has answers here:
UIView animation along a round path?
(3 answers)
Closed 4 years ago.
Creating an app where a an image moves upon the press of a button(repeated 3 times). The image currently has a linear movement but what I need is a circular movement animation for it.
The image should start from the left of the screen, go towards top and then to the right of the screen so there are 3 points where the image stops. This has to be done with a circular animation.
enum TimeOfDay: String {
case Dimineata = "Dimineata"
case Pranz = "Pranz"
case Seara = "Seara"
}
class ViewController: UIViewController {
#IBOutlet weak var timeOfDayLabel: UILabel!
#IBOutlet weak var sunImage: UIImageView!
var timeOfDay = TimeOfDay.Dimineata
override func viewDidLoad() {
super.viewDidLoad()
}
#IBAction func didTapNext(_ sender: Any) {
switch timeOfDay {
case .Dimineata:
timeOfDay = .Pranz
sunImage.image = UIImage(named: "LunchSun")
UIView.animate(withDuration: 1) {
self.sunImage.frame = CGRect(x: self.view.center.x-50, y: 120, width: 100, height: 100)
}
case .Pranz:
timeOfDay = .Seara
sunImage.image = UIImage(named: "NightSun")
UIView.animate(withDuration: 1) {
self.sunImage.frame = CGRect(x: self.view.frame.width-50, y: 166, width: 100, height: 100)
}
default:
timeOfDay = .Dimineata
sunImage.image = UIImage(named: "NightSun")
UIView.animate(withDuration: 1) {
self.sunImage.frame = CGRect(x: self.view.frame.origin.x-50, y: 166, width: 100, height: 100)
}
}
timeOfDayLabel.text = timeOfDay.rawValue.uppercased()
}
}

Answer 1

Create a circular path
Create a CAKeyframeAnimation
Set the animation.path to the circular path
Add that animation to the layer of the image view
Set the frame of image view to the last point in the path
Example code:
var imageView : UIImageView!
// Adapt these constants to your case
let initialX: CGFloat = 40
let imageViewWidth: CGFloat = 60
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
imageView = UIImageView()
imageView.backgroundColor = .red
imageView.frame = CGRect(x: initialX,
y: view.frame.height / 2.0 - 20,
width: 60,
height: 40)
imageView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imageView)
}
#IBAction func animate(_ sender: Any) {
//You can customize this path
let circularPath = UIBezierPath(arcCenter: view.center,
radius: view.frame.width / 2 - initialX - imageViewWidth / 2,
startAngle: -.pi,
endAngle: 0,
clockwise: true)
//Create the animation
let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
animation.duration = 2 // In seconds
animation.repeatCount = 1 //At maximum it could be MAXFLOAT if you want the animation to seem to loop forever
animation.path = circularPath.cgPath
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut) //Optional
//Add the animation to the layer of the image view
imageView.layer.add(animation, forKey: "myAnimation")
//prevent the imageView from going back to its original coordinates
imageView.frame.origin.x = circularPath.cgPath.currentPoint.x - imageView.frame.width / 2
imageView.frame.origin.y = circularPath.cgPath.currentPoint.y - imageView.frame.height / 2
}