views:

493

answers:

0

I am trying to animate a piece of text being pasted on to a view as a post-it note. I have a view with a yellow background, which contains a text view and a close button, initially set to be hidden. I animate it onto the main view like this:

[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:postitView cache:NO];
postitView.hidden=NO;
CGRect frame = postitView.frame;
frame.size.height=40;
postitView.frame=frame;
frame.size.height=265;
postitView.frame=frame;   
cancelButton.hidden=NO;
[description flashScrollIndicators];

This seems to work and looks very close to what I want, however the note itself is not very realistic, though the animation helps the illusion that it's a postit. If I try to make the postit note look a bit more realistic by using a background image of a note instead of a yellow background to the view, the shadows look wrong during the animation. In this case it still uses a square shadow related to the view size, rather than a shadow related to the shape of the background image. Is there something else I need to do to make CoreAnimation do the right thing with a background image?

Any ideas for how to make this look more realistic? Failing being able to use a background image, I'd like to add a shadow to the bottom edge of the note view to make it look like it curls up a little when the animation is over - is this possible?

Some other things I've noticed/tried: I had to animate the frame size as in the code above to make any kind of reasonable animation happen, which feels wrong even though it looks roughly right. The approach I've seen to transitions in examples is something like this:

[emptyView removeFromSuperview];
[self.view addSubview:postitView];

But when I try variations on that, it doesn't work at all for me (animations happen but look totally wrong).

I've also tried variations on this to fake the note being pasted at a slight random angle, but again the shadows/animation look wrong when doing this (it's also a bit pixellated):

float   angle = (random()/(float)RAND_MAX*4.0f-2.0f)*(M_PI/180.0f);  
postitView.layer.transform = CATransform3DMakeRotation(angle, 0, 0.0, 1.0);