rotation - iOS CAKeyframeAnimation rotationMode on UIImageView

Question

I am experimenting with Key Frame animation of the position of a UIImageView object moving along a bezier path. This pic shows the initial state before animation. The blue line is the path - initially moving straight up, the light green box is the initial bounding box or the image, and the dark green "ghost" is the image that I am moving:

When I kick off the animation with rotationMode set to nil, the image keeps the same orientation all the way through the path as expected.

But when I kick off the animation with rotationMode set to kCAAnimationRotateAuto, the image immediately rotates 90 degrees anti-clockwise and keeps this orientation all the way through the path. When it reaches the end of the path it redraws in the correct orientation (well it actually shows the UIImageView that I repositioned in the final location)

I was naively expecting that the rotationMode would orientate the image to the tangent of the path and not to the normal, especially when the Apple docs for the CAKeyframeAnimation rotationMode state

Determines whether objects animating along the path rotate to match the path tangent.

So what is the solution here? Do I have to pre-rotate the image by 90 degrees clockwise? Or is there something that I am missing?

Thanks for your help.

---

Edit 2nd March

I added a rotation step before the path animation using an Affine rotation like:

theImage.transform = CGAffineTransformRotate(theImage.transform,90.0*M_PI/180);

and then after the path animation, resetting the rotation with:

theImage.transform = CGAffineTransformIdentity;

This makes the image follow the path in the expected manner. However I am now running into a different problem of the image flickering. I am already looking for a solution to the flickering issue in this SO question:

iOS CAKeyFrameAnimation scaling flickers at animation end

So now I don't know if I have made things better or worse!

---

Edit March 12

While Caleb pointed out that yes, I did have to pre rotate my image, Rob provided an awesome package of code that almost completely solved my problems. The only thing that Rob didn't do was compensating for my assets being drawn with a vertical rather than horizontal orientation, thus still requiring to preRotate them by 90 degrees before doing the animation. But hey, its only fair that I have to do some of the work to get things running.

So my slight changes to Rob's solution to suite my requirements are:

1. When I add the UIView, I pre Rotate it to counter the inherent rotation added by setting the rotationMode:

   theImage.transform = CGAffineTransformMakeRotation(90*M_PI/180.0);

2. I need to keep that rotation at the end of the animation, so instead of just blasting the view's transform with a new scale factor after the completion block is defined, I build the scale based on the current transform:

   theImage.transform = CGAffineTransformScale(theImage.transform, scaleFactor, scaleFactor);

And that's all I had to do to get my image to follow the path as I expected!

---

Edit March 22

I have just uploaded to GitHub a demo project that shows off the moving of an object along a bezier path. The code can be found at PathMove

I also wrote about it in my blog at Moving objects along a bezier path in iOS

Answer 1

The issue here is that Core Animation's autorotation keeps the horizontal axis of the view parallel to the path's tangent. That's just how it works.

If you want your view's vertical axis to follow the path's tangent instead, rotating the contents of the view as you're currently doing is the reasonable thing to do.