Question

I’m developing a Cocoa application and want to be able to click a button in one of the views in my NSCollectionView and have a details view flip open and position to the middle of the screen like it does in iPhoto 09 when you click the “i” in the bottom-right hand corner of a photo. The photo “flips” and grows, centered on the window to reveal details about the photo.

I’m guessing they’re using Core Animation to achieve this. I’ve been looking at the Lemur Flip example, but when I try to modify it to add repositioning code to the animation, it throws off the flip.

Here is the positioning code I’ve added to the – (IBAction)flip:(id)sender; code of LemurFlip:

...
[CATransaction begin]; {
NSSize supersize = contentView.frame.size; // Size of window content view
NSSize subsize = frontView.frame.size; // Size of view we're flipping out
if(!frontView.isHidden)
{
    // Move views to middle of the window
    [[backView animator] setFrameOrigin:NSMakePoint((supersize.width / 2) - (subsize.width / 2), (supersize.height / 2) - (subsize.height / 2))];
    [[frontView animator] setFrameOrigin:NSMakePoint((supersize.width / 2) - (subsize.width / 2), (supersize.height / 2) - (subsize.height / 2))];
}
else {
    // Return views to point of origin
    [[backView animator] setFrameOrigin:NSMakePoint(0, 0)];
    [[frontView animator] setFrameOrigin:NSMakePoint(0, 0)];
}
    [hiddenLayer addAnimation:[self _flipAnimationWithDuration:flipDuration isFront:NO] forKey:@"flipGroup"];
    [visibleLayer addAnimation:[self _flipAnimationWithDuration:flipDuration isFront:YES] forKey:@"flipGroup"];
} [CATransaction commit];
...

Is there a good example of how to do this or some rules for combining these sort of animations?

Answer 1

Instead of

[[backView animator] setFrameOrigin:];
[[frontView animator] setFrameOrigin:];

You want

[hiddenLayer setPosition:];
[visibleLayer setPosition:];

You will want to tweak the animations values, maybe by using a CABasicAnimation