Layer Position jumps at start of (Core) Animation

Question

So, I'm trying to create a tile flipping effect, like on Windows Phone 7.

So far I have the following code, but I have a couple of queries.

CALayer *layer = self.theRedSquare.layer;
CATransform3D initialTransform = self.theRedSquare.layer.transform;
initialTransform.m34 = 1.0 / -1000;

[UIView beginAnimations:@"Scale" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
layer.transform = initialTransform;
layer.anchorPoint = CGPointMake(-0.3, 0.5);

CATransform3D rotationAndPerspectiveTransform = self.theRedSquare.layer.transform;

rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -self.theRedSquare.bounds.size.height/2, 0);

layer.transform = rotationAndPerspectiveTransform;

[UIView setAnimationDelegate:self];
[UIView commitAnimations];

1. How come my my red square (a simple UI view) translates to the right at the start of the animation?

2. For the anchor point is it possible to set a position on the parent view? At the moment I am arbitrarily setting it relative to the current view.

Thanks in advance for any pointers.

Before animation

Before

During animation (notice the square has shifted right)

During

After animation (notice the square has shifted right)

After

Video added: example video

This helped me: https://medium.com/@filippotosetto/animate-cashapelayer-6fa54adb22eb — AnupamChugh, Jul 09 '20 at 08:06

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

-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);

    CGPoint position = view.layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

-(void)animateView:(UIView *)theRedSquare
{
    CALayer *layer = theRedSquare.layer;
    CATransform3D initialTransform = theRedSquare.layer.transform;
    initialTransform.m34 = 1.0 / -1000;

    [self setAnchorPoint:CGPointMake(-0.3, 0.5) forView:theRedSquare];


    [UIView beginAnimations:@"Scale" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
    layer.transform = initialTransform;


    CATransform3D rotationAndPerspectiveTransform = theRedSquare.layer.transform;

    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -theRedSquare.bounds.size.height/2, 0);

    layer.transform = rotationAndPerspectiveTransform;

    [UIView setAnimationDelegate:self];
    [UIView commitAnimations];
}

Taken from This, and slightly tweaked.. Hopefully it helps Changing my CALayer's anchorPoint moves the view

How do you get the animation to just animate in? (That Flip in) I've been trying for hours to figure this out. — Frankrockz, May 05 '12 at 18:33

score 3 · Answer 2 · answered Feb 07 '12 at 20:25

3

If you make the square its own view, flipping is built-in

[UIView beginAnimations:@"flip" context:nil];
[UIView setAnimationDuration:.35f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
     forView:self.window cache:YES];

// change to the new view (make this one hidden, the other not)

[UIView commitAnimations];

answered Feb 07 '12 at 20:25

Lou Franco

87,846
14
132
192

I appreciate it wasn't overly obvious from my description, but I'm not after flipping from the spot. I want to flip around the left hand edge of my red square (which is already a UIView). See the following video fro the kind of effect I am after : http://www.youtube.com/watch?v=wgoGDPF_NGo – JonB Feb 07 '12 at 23:15

score 2 · Answer 3 · answered Feb 07 '12 at 20:23

2

The acceptable range of the anchorPoint of a CALayer is [0,1]. In your case, where you are attempting to flip around the Y axis, your layer's anchor point should be [0, 0.5].

answered Feb 07 '12 at 20:23

Mark Adams

30,776
11
77
77

I had this working fine, but the red UIView shifts right before even starting the animation. I'll try and get a video. Interestingly -0.3 for the anchorPoint works, it rotates around the y-axis offset to the left. – JonB Feb 07 '12 at 23:18
have added a video to show the problem. on the first run of the animation the square shifts right a number of pixels. can't seem to work it out. – JonB Feb 07 '12 at 23:50

Layer Position jumps at start of (Core) Animation

3 Answers3

Linked