Advertise here

Advertise here

Howdy, Stranger!

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

Sign In with Google Sign In with OpenID

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.