iphone - why is this flip animation using layers not working?

Posted by Digital Robot on Stack Overflow See other posts from Stack Overflow or by Digital Robot
Published on 2011-01-01T17:33:11Z Indexed on 2011/01/01 21:54 UTC
Read the original article Hit count: 309

Filed under:

I would like to make an animation that goes like this: imagine a picture sitting on a shelve. It drops from the shelve and as it falls it rotates along the horizontal axis and translates along the vertical axis.

I would like to do this with perspective and the back side should be the image reversed, like the picture is a kind of slide.

I have done this:

CALayer* layer = myImageView.layer;
layer.doubleSided = YES;


    CAKeyframeAnimation* animationTransform = 
        [CAKeyframeAnimation animationWithKeyPath:@"transform"];

    CATransform3D startTransform = CATransform3DIdentity;
    CATransform3D endTransform =
        CATransform3DTranslate (layer.transform, 0.0f, 200.0f, 0.0f);

    endTransform =
        CATransform3DRotate (endTransform, degreesToRadian(350.0f), 1.0f, 0.0f, 0.0f);
    endTransform.m34 = 1.0 / -500;


    NSArray *values = [NSArray arrayWithObjects:
                        [NSValue valueWithCATransform3D:startTransform],
                        [NSValue valueWithCATransform3D:endTransform], nil];
    [animationTransform setValues:values];

    NSArray *tempos = [NSArray arrayWithObjects:
                       [NSNumber numberWithFloat:0.0f],
                       [NSNumber numberWithFloat:0.7f], nil];    
    [animationTransform setKeyTimes:tempos];

    NSArray *timing = [NSArray arrayWithObjects:
                       [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], nil];

    [animationTransform setTimingFunctions:timing];
    animationTransform.fillMode = kCAFillModeRemoved;
    animationTransform.removedOnCompletion = YES;
    animationTransform.repeatCount = 1;
    animationTransform.duration = 3.7f;
    animationTransform.cumulative = YES;

the result of this has nothing to do with anything. The result is: the image translates down an inch on the screen and then up half inch. Then it disappears and appears at its starting position again.

What am I missing?

thanks

© Stack Overflow or respective owner

Related posts about iphone