Swift: make image continuously loop in UIBezierPath(overInRect)

533 Views Asked by At

I have an image of a blue circle and I want to make it continuously loop in an elliptical path. I created a circle path first, and it was successful, but creating a oval path loops the circle but stops momentarily before it loops again. Is there something I am missing to make the oval path loop without the hesitation. Here is the code for both loops.

    func performRotation(){
    let path = UIBezierPath(ovalInRect: CGRectMake(50, 50, 220, 100)) 
    let anim = CAKeyframeAnimation(keyPath: "position")

    anim.path = path.CGPath
    anim.rotationMode = kCAAnimationLinear
    anim.repeatCount = Float.infinity
    anim.duration = 5.0

    //@IBOutlet weak var ball: UIImageView!
    ball.layer.addAnimation(anim, forKey: "animate position along path")

    //this is the circle path that loops without the stutter

    // let ovalStartAngle = CGFloat(90.01 * M_PI/180)
    // let ovalEndAngle = CGFloat(90 * M_PI/180)
    // let ovalRect = CGRectMake(97.5, 58.5, 125, 125)
    //let path = UIBezierPath()
    //path.moveToPoint(CGPoint(x: 200, y: 150))
    //path.addArcWithCenter(CGPointMake(CGRectGetMidX(ovalRect), CGRectGetMidY(ovalRect)),
     //radius: CGRectGetWidth(ovalRect) / 2,
     //startAngle: ovalStartAngle,
     //endAngle: ovalEndAngle, clockwise: true)

     //let anim = CAKeyframeAnimation(keyPath: "position")
     //anim.path = path.CGPath
     //anim.rotationMode = kCAAnimationLinear
     //anim.repeatCount = Float.infinity
     //anim.duration = 5.0
     //ball.layer.addAnimation(anim, forKey: "animate position along path")

    }
1

There are 1 best solutions below

0
On

Instead of setting the rotationMode, try setting the calculationMode,

anim.calculationMode = kCAAnimationPaced