Smooth animation for CAKeyframeAnimation for CATransform3D animations

Question

I created my own transition animation between views. I am animating two properties, position and transformation, to provide a cubic transition between views. The frame uses CABasicAnimation , while the conversion uses a 2-stage CAKeyframeAnimation . Everything works fine except for one small detail that I cannot understand. In my transition, I apply CATransform3DScale to the middle CATransform3DScale to create a zoom / zoom effect. This works great, except that the animation looks slightly jerky. This is an animation between keyframes in a linear way, and I would like to smooth it out. Now CAKeyframeAnimation has a way to do this using calculationMode , but it does not work for transforms. I tried setting it to kCAAnimationCubic and kCAAnimationCubicPaced with no effect.

Here is the code that animates one kind of transformation (a similar block of code animates another view):

  CAKeyframeAnimation *aTransform = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; CATransform3D transform1 = RotateOnX(toView, M_PI_4); transform1 = CATransform3DScale(transform1, RotationalZoom, RotationalZoom, RotationalZoom); [aTransform setValues:Array([NSValue valueWithCATransform3D:RotateOnX(toView, M_PI_2)], [NSValue valueWithCATransform3D:transform1], [NSValue valueWithCATransform3D:RotateOnX(toView, 0)])]; [toView.layer addAnimation:aTransform forKey:@"transform"]; 

Note: RotateOnX(UIView *, CGFloat) is a block that returns a transform for a view rotated by X with the desired radians.

As you can see, I am just setting up the scaling transformation in the middle keyframe. In addition, the rotation of the view is completely smooth, it is only scaling, which seems to be a “jerk” when it changes direction.

Does anyone have any ideas on how to smooth scaling / scaling?

Answer 1

Try the timingFunctions property. Since you have 3 keyframes, you need two synchronization functions: one for animating from keyframe 0 to keyframe 1, and the other for animating from keyframe 1 to keyframe 2.

 aTransform.timingFunctions = [NSArray arrayWithObjects: [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInOut], nil];