Improving Smoothness of Simple Animations

Question

I am developing my first iPhone application, and I have made it past the "machinery" and now I am wrapping up fit & finish details.

I have a view that slides in from the bottom of the screen for my settings pane. The view itself has an opacity of 0, and has a UIImageView view inside of it with a PNG creating the actual background for the view, behind the controls. I am using the built in animation calls for UIView, as in;

[self.view addSubview:settingsViewController.view];

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

frame.origin.y = 200.0;
settingsViewController.view.frame = frame;

[UIView commitAnimations];

Unfortunately, the animation on the device is choppy. The PNG I am using as my background is transparent only in the uppermost 30 pixels across it's width. If I use a PNG with no transparency, the animation is smooth.

The application itself is highly graphical, so the view is animating out over top of a screen full of other PNGs.

I would be extremely surprised if the device can't handle this type of animation smoothly, which leads me to believe I need to refine my approach. Thoughts I had so far include;

Perhaps I need to use Core Animation directly? Would caching the view behind the settings pane before animating be beneficial somehow?

This is new territory for me, and I know there must be ways to optimize that are considered good practice. Thanks for your time!

Answer 1

I've had some issues with animating the frame in the past, try animating the center property instead.

Also what do you need the transparency in the background image for? Won't it be possible for you to just use that image as the background of the containing view and eliminate the need for the UIImageView?

Answer 2

It won't matter if you use Core Animation "directly" or animate the center property: it is choppy because the graphics hardware has to composite the transparent image with the background on every frame of the animation. You said yourself that using a completely opaque PNG makes the animation smooth.

Try running the app under Instruments, the Core Animation tool has some checkboxes which highlight composited areas in real time and that might give you some hints about re-doing your drawing.

If only the top 30 pixels need to be transparent, it might be worth splitting the background into two views, one 30 pixel strip at the top (transparent) and the rest (opaque). If it is compositing the entire view every frame, that change might be enough to let it know it only has to composite only the 30 pixels at the top.