CATransform3D animation with 2 steps not working

Question

I have a seque animation that I am trying to do. It has two steps.

Step 1: I take the layer and change the perspective a little so it looks like the layer's top is moving back. sourceViewController.view.layer.transform CATransform3DMakePerspective(0, 0.003, CATransform3DIdentity);

Step 2: I change the scale to 80% and put the perspective back to normal. This giving it like a slight swing zoom out animation.

sourceViewController.view.layer.transform = CATransform3DScale(sourceViewController.view.layer.transform, 0.8, 0.8, 1);

sourceViewController.view.layer.transform CATransform3DMakePerspective(0, 0, sourceViewController.view.layer.transform);

My biggest issue is this. I can't do 2 animations on the layer at the same time. It automatically starts at the end of the first transform instead of doing both at the same time. That could be fixed by concat but since I want step 1 top happen, then the layer saves it state so step 2 can happen, I can't concat all three.

How do I go about creating a multistep animation that has 1 or more transforms on the same layer? Like I said in the example below it will skip step 1 and start as if the step was already done. I know semi confusing to explain. Here's my animation.

[UIView animateWithDuration:2.0
                        delay:0.0
                        options:UIViewAnimationCurveEaseIn 
                     animations:^{
                         sourceViewController.view.layer.transform = CATransform3DMakePerspective(0, 0.003, sourceViewController.view.layer.transform);
                         [UIView animateWithDuration:1.0
                                               delay:1.0
                                             options:UIViewAnimationCurveEaseOut 
                                          animations:^{
                                              sourceViewController.view.layer.transform = CATransform3DConcat(CATransform3DScale(sourceViewController.view.layer.transform, 0.8, 0.8, 1),CATransform3DMakePerspective(0, 0, sourceViewController.view.layer.transform));

                                          } 
                                          completion:nil];
                     } 
                     completion:^(BOOL finished){
                     }];

I've googled and tried everything. There has to be a way to do successive animations on the same layer that start at the place where the last elft off. I'm passing in the layer instead of CATransform3DIdentity because I read that Identity reverts back to the starting state instead of where the layer was transformed to.

rob mayoff rob mayoff · Accepted Answer · 2012-10-06T18:20:37

You don't want to start the second animation until the first animation is complete. That's what the completion block is for.

[UIView animateWithDuration:2 delay:0 options:UIViewAnimationCurveEaseIn animations:^{
    sourceViewController.view.layer.transform = CATransform3DMakePerspective(
        0, 0.003, sourceViewController.view.layer.transform);
} completion:^(BOOL finished) {
    [UIView animateWithDuration:1 delay:0 options:UIViewAnimationCurveEaseOut animations:^{
        sourceViewController.view.layer.transform = CATransform3DConcat(
            CATransform3DScale(sourceViewController.view.layer.transform, 0.8, 0.8, 1),
            CATransform3DMakePerspective(0, 0, sourceViewController.view.layer.transform));
    } completion:nil];
}];

CATransform3D animation with 2 steps not working

2 Answers