iPhone SDK : UIImageView - Collapsing animation

Question

Hi All,

I'm trying to animating across the screen a horizontal bar with a color gradient. For simplicity, I chose to make a png of the fully extended bar, assign it to a UIImageView, and (attempt to) animate resizing of it using a UIView animation. The problem is that in the "closed" state of the Image, the portion of the image showing is not the part that I want. The image is arranged so that from L to R, a white to red color gradient occurs. The right side (about 20 pixels) is solid red and is the part I want to show when the bar is "collapsed". I'm trying to extend the image out by about 100 pixels to its full width. I referenced the "Buy Now" button example for my code as it seemed relevant"

http://stackoverflow.com/questions/1669804/uibutton-appstore-buy-button-animation

My code:

[UIView beginAnimations:@"barAnimation" context:nil];
[UIView setAnimationDuration:0.6];

CGRect barFrame = bookBar.bounds;

if (fExtendBar)
{
    barFrame.origin.x -= 100;
    barFrame.size.width += 100;

}
else
{
    barFrame.origin.x += 100;
    barFrame.size.width -= 100;
}

    bookBar.frame = barFrame;
[UIView commitAnimations];

I feel like this should be possible, maybe by setting an "offsetOfImage" to display in the UIImageView, but I can't seem to make it work. Also, I've noticed that the behavior is kind of consistent with what happens in Interface Builder when you resize an image. Then again, I would think there would be a way to override this behavior programmatically. Any suggestions (including other approaches) are welcome.

Thanks, chris.o.

Answer 1

I am facing a slightly more complex version of the same issue. Have you tried using a CALayer and setting the contentsGravity property?