Advertise here

Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Creating a UIButton with a page turn animation

fiftysixtyfiftysixty Posts: 310Registered Users
edited February 2011 in iPhone SDK Development

I just did this code for a UIButton that "page turns" away when pressed, and I thought I'd share it with you in case anybody needs something similar. You could use this for example to make a book with turning pages. Anyway, have fun and if you have any comments, fire away!
- (IBAction) openButton:(id)sender {
[INDENT]UIButton *button = (UIButton *)sender;
// disable the button so it’s not pressed again during the animation
((UIView *)sender).userInteractionEnabled = NO;
// Set the CALayer anchorPoint to the left edge and
// translate the button to account for the new
// anchorPoint. In case you want to reuse the animation
// for this button, we only do the translation and
// anchor point setting once.
if (button.layer.anchorPoint.x != 0.0f) {
button.layer.anchorPoint = CGPointMake(0.0f, 0.5f); = CGPointMake( – button.bounds.size.width/2.0f,;
// create an animation to hold the page turning
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion = NO;
transformAnimation.duration = 2.0f;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// start the animation from the current state
transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
// this is the basic rotation by 90 degree along the y-axis
CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
// these values control the 3D projection outlook
endTransform.m34 = 0.001f;
endTransform.m14 = -0.0015f;
transformAnimation.toValue = [NSValue valueWithCATransform3D:endTransform];
// Create an animation group to hold the rotation
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
// Set self as the delegate to receive notification when the animation finishes
theGroup.delegate = self;
theGroup.duration = 2.0;
// CAAnimation-objects support arbitrary Key-Value pairs, we add the UIView tag
// to identify the animation later when it finishes
[theGroup setValue:[NSNumber numberWithInt:button.tag] forKey:@”buttonTag”];
// Here you could add other animations to the array
theGroup.animations = [NSArray arrayWithObjects:transformAnimation, nil];
theGroup.removedOnCompletion = NO;
// Add the animation group to the layer
[button.layer addAnimation:theGroup forKey:@"flipButtonOpen"];

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
[INDENT]// Get the tag from the animation, we use it to find the
// animated UIView
NSNumber *tag = [theAnimation valueForKey:@"buttonTag"];
// Find the UIView with the tag and do what you want
for (UIView *subview in contents.subviews) {
[INDENT]if ([subview isKindOfClass:[UIButton class]]) {
[INDENT]if (subview.tag == [tag intValue])
[INDENT]subview.hidden = YES;[/INDENT]
Post edited by fiftysixty on
<a href="" target="_blank">Fifty Sixty Software</a><br />
<a href="" target="_blank">iPhone development tips and tutorials</a><br />
<br />
<b>Apps in store:</b><br />
<a href="htt


Sign In or Register to comment.