iosanimationuiviewshadowpage-curl

page curl animation with transparent UIImageView (iOS)


I have a ribbon (bookmark) that I want to curl up, off of the screen. The ribbon has a V cut out of the bottom, which is a transparent section - a UIImageView with a transparent png.

When I perform a curl on the ribbon, the underlying shadow represents the entire View (which is technically square). I am trying to make this look as real as possible so if someone could point me in the right direction, that would be helpful.

I have tried - masking the view - tweaking open source page curl frameworks - replacing the viewAtIndex during a page curl - UIView animations

but they all result in a square shadow.

The best experience I can provide so far is a simple UIView animation while fading out the:

[UIView transitionWithView:_ribbonButton
                       duration:0.5f 
                        options:UIViewAnimationOptionTransitionCurlUp
                     animations:^{
                         [_ribbonButton setAlpha:0.0f];
                     } 
                     completion:^(BOOL completed){
                         [self animationCompleted:completed];
                     }];    

Here is an screenshot: http://livevision.us/wordpress/?attachment_id=60


Solution

  • I don't think that will be possible using UIViewAnimationOptionTransitionCurlUp. The view animations are based on the entire view bounds, not the contents of the view.

    I think you will have to code something yourself in OpenGL or a pre-rendered flip animation or something else. There are a number of existing OpenGL solutions you can download and customize.