Widget “flip” behavior in Core Animation/Cocoa

Question

I\'m trying to make a Card class that duplicates the behavior of Dashboard widgets in that you can put controls or images or whatever on two sides of the card and flip betwe

Answer 1

There's a complete open source implementation of this by the guys at Mizage.

You can check it out here: https://github.com/mizage/Flip-Animation

Answer 2

If you are able to do this with images, perhaps you can keep all of your controls in an NSView object (as usual), and then render the NSView into a bitmap image using cacheDisplayInRect:toBitmapImageRep: just prior to executing the flip effect. The steps would be:

1. Render the NSView to a bitmap
2. Display that bitmap in a layer suitable for the flip effect
3. Hide the NSView and expose the image layer
4. Perform the flip effect

Answer 3

I know this is late but Apple has an example project here that may be of help to anyone still stumbling upon this question.

https://developer.apple.com/library/mac/#samplecode/ImageTransition/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010277

Answer 4

Mike Lee has an implementation of the flip effect for which he has released some sample code. (Unfortunately, this is no longer available online, but Drew McCormack built off of that in his own implementation.) It appears that he grabs the layers for the "background" and "foreground" views to be swapped, uses a CATransform3D to rotate the two views in the animation, and then swaps the views once the animation has completed.

By using the layers from the views, you avoid needing to cache into a bitmap, since that's what the layers are doing anyways. In any case, his view controller looks to be a good drop-in solution for what you want.

Answer 5

It's overkill for your purposes (as it contains a largely-complete board and card game reference app), but check out this sample from ADC. The card games included with it do that flip effect quite nicely.

Answer 6

Probably not the case in 2008 when this question was asked, but this is pretty easy these days:

[UIView animateWithDuration:0.5 animations:^{
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.iconView cache:YES];
    /* changes to the view made here will be reflected on the flipped to side */
}];

Note: Apparently, this only works on iOS.