jerky animation using Core Animation

Question

In my iPhone app, I am trying to get some red and white stripes that are scrolling across the screen to animate smoothly when the speed of the stripes gets high. In my app the user starts the animation and changes the scrolling speed by a finger swipe and changes the width of the stripes by a two finger pinch. Animation is stopped in response to a double tap. If the speed gets high or the stripes get narrow the animation is no longer smooth to the eye. The edges of the stripes seem to jump around.

The animation is simple. I draw the stripes in a layer that's a bit larger than the screen. I then set up an animation that moves the layer position by exactly the distance from one red stripe to the next. The duration is set by the speed of the finger swipe and the repeat count is 1. When the animation stops the delegate checks a flag to see if the user wants to stop the scrolling. If not, the animation is restarted again for one cycle. Are there better ways of doing this so that the animation is smooth at high speeds or with narrow stripes?

Thanks--

Answer 1

Off hand guess: since each animation covers the distance of one pair of stripes, as you decrease the width of the stripes, the number of animations per second will go up, so the proportion of time spent setting up a new animation and resetting the layer goes up as width goes down.

The fix then would be to increase the distance covered by each animation as the stripes get narrow. So, instead of animating from one red stripe to the next, you animate to the nth one. If you increase n as the strips get smaller, you'll be able to hold the animations per second roughly steady.

In terms of animations per second, increasing the speed is the same as narrowing the strips. So the fix is the same: As the speed goes up, increase n.