View transformation taking place after animation

Question

I have a view which I've rotated:

self.mainView.layer.transform = CATransform3DRotate(self.mainView.layer.transform, -M_PI / 2, 0, 0, 1);

I apply a CAKeyFrameAnimation to it:

    CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    bounceAnimation.fillMode = kCAFillModeBoth;
    bounceAnimation.removedOnCompletion = YES;
    bounceAnimation.duration = 0.4;
    bounceAnimation.values = @[
                               //[NSValue valueWithCATransform3D:CATransform3DMakeRotation(-M_PI / 2.0f, 0.0f, 0.0f, 1.0f)]
                               [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01f, 0.01f, 0.01f)],
                               [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.1f)],
                               [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9f, 0.9f, 0.9f)],
                               [NSValue valueWithCATransform3D:CATransform3DIdentity]];
    bounceAnimation.keyTimes = @[@0.0f, @0.5f, @0.75f, @1.0f];
    bounceAnimation.timingFunctions = @[
                                        [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                        [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                        [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [self.mainView.layer addAnimation:bounceAnimation forKey:@"bounce"];

And when I attach the view to its superview, the animation is applied to the view BEFORE my initial rotation is applied to it, and after the animation is done, then the rotation is applied.

How would I go about making it so my rotation from the first bit of code I posted is applied before the animation takes place? So when the view is attached to its superview, it already appears rotated, and then the animation is conducted?

Answer 1

Your parameters actually will be setting the transform value, so you need to use a combined transform of what you want.

You should combine your rotation with your transform3D like this:

CATransform3D tranform1 = CATransform3DMakeScale(0.01f, 0.01f, 0.01f);
transform1 = CATransform3DRotate(transform1, -m_PI / 2.0f, 0.0f, 0.0f, 1.0f);
CATransform3D tranform2 = CATransform3DMakeScale(1.1f, 1.1f, 1.1f);
transform2 = CATransform3DRotate(transform2, -m_PI / 2.0f, 0.0f, 0.0f, 1.0f);
CATransform3D tranform3 = CATransform3DMakeScale(0.9f, 0.9f, 0.9f);
transform3 = CATransform3DRotate(transform3, -m_PI / 2.0f, 0.0f, 0.0f, 1.0f);

    bounceAnimation.values = @[
      [NSValue valueWithCATransform3D:transform1],
      [NSValue valueWithCATransform3D:transform2],
      [NSValue valueWithCATransform3D:transform3]];