iOS UIView Animation CATransform3DMakeRotation confusion

Question

I have a UIView that I am trying to animate flipping down, while having its axis at the bottom of the view. E.g.:

enter image description here

To do this, I am trying to use a UIView animation:

[UIView animateWithDuration:3 delay:0 options:UIViewAnimationCurveEaseOut animations:^{

     // Flip Down
     top3.layer.anchorPoint = CGPointMake(0.5, 1.0);
     top3.layer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);

 } completion:^(BOOL finished) {

     // Reset?
     //top3.transform = CGAffineTransformMakeScale(1, 1);

 }];

Right now it isn't working how I want, it seems like the view is animating AWAY from the user rather then toward. It does't seem to give a 3D effect that makes it look closer to the user when rotating down, as shown in my image. I am positive that this is because of my lack of understanding how to use CATransform3DMakeRotation.

Questions:

How can I make the view appear closer to the user as it drops? Such as skewing it as in my image example?
When I set my anchorPoint it shifts my view down, how can I prevent this and still set my anchorPoint?
~~With UIView animation, can I use easing settings?~~ Used UIViewAnimationCurveEaseOut in options.
Can I use gravity settings?

`M_PI / 2` is = to 90 degrees. Should answer your stopping half way through for a start — Paul.s, Dec 13 '11 at 18:36
Thanks, I fixed that in my question and tested and it works. But I still have the remaining issues. — Nic Hubbard, Dec 13 '11 at 18:38

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

It’s not completely clear from your question, but it sounds like you’re not seeing a perspective distortion during the animation—the view’s staying rectangular as it rotates, right? For a CALayer to display with perspective, its transform needs to have the m34 element set, as described here.
To compensate for the anchorPoint moving your view’s layer, you need to change the view’s original position.
Yes. There are several animation options in addition to the one you’re using, and you can combine them like this (for example): UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction.
Core Animation doesn’t really have any concept of physics. Depending on the effect you’re going for, you can achieve it by chaining multiple animations together with particular easing settings—for instance, a falling object that hits a solid surface would use an “ease in” animation on its way down, then an “ease out” if it then bounced back up.

edited May 23 '17 at 12:19

Community

1
1

answered Dec 13 '11 at 19:03

Noah Witherspoon

57,021
16
130
131

Thanks, setting the m34 element worked and it looks much better. I also fixed my orig. position so that the anchor works. Looks like all my problems are solved. Thanks! – Nic Hubbard Dec 13 '11 at 20:03
Also, is there a way to know when I am halfway through the animation? I want to change the UIView background color at the half-way point. – Nic Hubbard Dec 13 '11 at 20:16
1

There isn’t—about all a UIView animation will inform you of is when it’s done—but you can accomplish the same effect by animating it in two phases, first running the 0°–90° part, then switching the background color, then running the 90°–180° part. If you use the right interpolations—an ease-in curve for the first half and an ease-out or linear curve for the second—then the effect should be seamless. – Noah Witherspoon Dec 13 '11 at 22:50
Noah - On the second animation block, how could I rotate my view 180 degrees, without using animation? Basically, when it hits the second animation block, I need the view to be changed 180 degrees instantly, so the user never notices it. I tried adding some new transform options but it really makes things crazy. – Nic Hubbard Dec 14 '11 at 00:38

iOS UIView Animation CATransform3DMakeRotation confusion

1 Answers1

Linked