Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Smooth horizontal flip using CATransform3DMakeRotation

I have set up the following animation to rotate between views of different sizes. The midpoint of the animation seems to have a flicker as the new, taller view comes into view. Is there anything I can do to smoothen the transition.

newView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 1.0, 0.0);

[UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{oldView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, -1.0, 0.0);}
                     completion:^(BOOL finished) {

                         [oldView removeFromSuperview];
                         [UIView animateWithDuration:0.5
                                               delay:0
                                             options:UIViewAnimationOptionCurveLinear
                                          animations:^{newView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 0.0);}
                                          completion:nil];

    }];
like image 716
RunLoop Avatar asked Sep 16 '25 22:09

RunLoop


2 Answers

Got this working thanks to this thread, so I thought I'd share my to-from 3D transform using the m34 matrix.

enter image description here

    UIView *toView = // show this
    UIView *fromView = // hide this one

    // set up from
    CATransform3D fromViewRotationPerspectiveTrans = CATransform3DIdentity;
    fromViewRotationPerspectiveTrans.m34 = -0.003; // 3D ish effect
    fromViewRotationPerspectiveTrans = CATransform3DRotate(fromViewRotationPerspectiveTrans, M_PI_2, 0.0f, -1.0f, 0.0f);

    // set up to
    CATransform3D toViewRotationPerspectiveTrans = CATransform3DIdentity;
    toViewRotationPerspectiveTrans.m34 = -0.003;
    toViewRotationPerspectiveTrans = CATransform3DRotate(toViewRotationPerspectiveTrans, M_PI_2, 0.0f, 1.0f, 0.0f);

    toView.layer.transform = toViewRotationPerspectiveTrans;

    [UIView animateWithDuration:1.0
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{fromView.layer.transform = fromViewRotationPerspectiveTrans; }
                     completion:^(BOOL finished) {

                         [fromView removeFromSuperview];
                         [UIView animateWithDuration:1.0
                                               delay:0
                                             options:UIViewAnimationOptionCurveLinear
                                          animations:^{toView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 0.0);}
                                          completion:nil];

                     }];
like image 81
DogCoffee Avatar answered Sep 19 '25 17:09

DogCoffee


I was halfway there, but the missing piece, setting the m34 cell value of the transformation matrix, did the trick.

like image 27
RunLoop Avatar answered Sep 19 '25 17:09

RunLoop