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
Hi,

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);
button.center = CGPointMake(button.center.x – button.bounds.size.width/2.0f,
button.center.y);
}
// 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,
0.0f,
-1.0f,
0.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"];
[/INDENT]
}

- (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]
[/INDENT]}
[/INDENT]}[/INDENT]
}
Post edited by fiftysixty on
<a href="http://www.fiftysixtysoftware.com" target="_blank">Fifty Sixty Software</a><br />
<a href="http://www.fiftysixtysoftware.com/blog" target="_blank">iPhone development tips and tutorials</a><br />
<br />
<b>Apps in store:</b><br />
<a href="htt
· ·

Replies

  • LiquidChazLiquidChaz Posts: 53Registered Users @
    edited November 2009
    Wouldn't it be a whole lot easier and faster to put the button in it's unique UIView in IB and then use one of the predefined view transition animations?
    · ·
  • fiftysixtyfiftysixty Posts: 310Registered Users
    edited November 2009
    First, there's no need to put the button in a UIView because UIButton is a subclass of UIView, you can use the predefined view transitions straight out of the box. Second, none of the predefined transitions do this kind of "book page turn" transition: page flip from right or left turns the page along the center vertical axis, and page curl is more akin to tearing a page off a calendar. If you want to go beyond the predefined transitions, you have to code things yourself, and that's what I wanted and did.
    <a href="http://www.fiftysixtysoftware.com" target="_blank">Fifty Sixty Software</a><br />
    <a href="http://www.fiftysixtysoftware.com/blog" target="_blank">iPhone development tips and tutorials</a><br />
    <br />
    <b>Apps in store:</b><br />
    <a href="htt
    · ·
  • rocotilosrocotilos Posts: 3,292iPhone Dev SDK Supporter, Registered Users @ @ @ @ @
    edited November 2009
    fiftysixty wrote: »
    First, there's no need to put the button in a UIView because UIButton is a subclass of UIView, you can use the predefined view transitions straight out of the box. Second, none of the predefined transitions do this kind of "book page turn" transition: page flip from right or left turns the page along the center vertical axis, and page curl is more akin to tearing a page off a calendar. If you want to go beyond the predefined transitions, you have to code things yourself, and that's what I wanted and did.

    Thank you fiftysixty. This is nice to share. Perhaps the forum moderator could move this thread to "Tutorial" section.
    · ·
  • dmsherdmsher Posts: 1New Users
    edited November 2009
    Could you post a sample XCode project utilizing this code?
    · ·
  • appkovappkov Posts: 22Registered Users
    edited November 2009
    I would also love a sample project please :)

    fiftysixty wrote: »
    Hi,

    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);
    button.center = CGPointMake(button.center.x – button.bounds.size.width/2.0f,
    button.center.y);
    }
    // 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,
    0.0f,
    -1.0f,
    0.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"];
    [/INDENT]
    }
    
    - (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]
    [/INDENT]}
    [/INDENT]}[/INDENT]
    }
    

    :)
    · ·
  • fiftysixtyfiftysixty Posts: 310Registered Users
    edited November 2009
    Hi,

    I just wanted to let you know that I posted a sample XCode project using this code:

    fiftysixtysoftware.com Blog Archive UIView PageOpen sample project

    Feel free to download the project and use it in your Apps as you wish.
    <a href="http://www.fiftysixtysoftware.com" target="_blank">Fifty Sixty Software</a><br />
    <a href="http://www.fiftysixtysoftware.com/blog" target="_blank">iPhone development tips and tutorials</a><br />
    <br />
    <b>Apps in store:</b><br />
    <a href="htt
    · ·
  • ttefabbobttefabbob Posts: 2New Users
    edited April 2010
    fiftysixty wrote: »
    Hi,

    I just wanted to let you know that I posted a sample XCode project using this code:

    fiftysixtysoftware.com Blog Archive UIView PageOpen sample project

    Feel free to download the project and use it in your Apps as you wish.

    Mikko,
    Hello and thanks for your code! I am trying to rotate the button counterclockwise along the y-axis but it doesn't seem to be working... Any idea why? I understand that I should just need to change the sign of the y-axis vector, but it still has not changed direction. Here is my code:

    //set the anchor point to the right side of the button(334 is the width)
    if (button.layer.anchorPoint.x != 0.0f) {
    button.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
    button.center = CGPointMake(334.0f, button.center.y);
    }


    // create an animation to hold the page turning
    CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    transformAnimation.removedOnCompletion = NO;
    transformAnimation.duration = 1.5f;
    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.14, 0.0f, 1.0f, 0.0f);
    · ·
  • lokidillokidil Posts: 112Registered Users
    edited May 2010
    Hi I need animation of 180º of rotation, that is after the animation the view should be of mirror like appearance. I had change the degree to 180º in your code but the animation stops in the middle say like 120º of angle. How to rotation it to 180º
    plz help me.

    Thanks for helps and suggestions,
    Regards,
    · ·
  • RockStrongoRockStrongo Posts: 176Registered Users
    edited May 2010
    Anyone know the values to "reverse" the flipping? I have been playing around with it for a couple days and just cannot get it to reverse!

    Any help is appreciated.
    · ·
  • lokidillokidil Posts: 112Registered Users
    edited May 2010
    Yeah that could be another issue with that animation, I too tried a hard to reverse the animation but I can't, Did you find any solution???

    Thanks for helps and suggestions,
    Regards,
    Anyone know the values to "reverse" the flipping? I have been playing around with it for a couple days and just cannot get it to reverse!

    Any help is appreciated.
    · ·
  • RockStrongoRockStrongo Posts: 176Registered Users
    edited May 2010
    Nope, didnt figure it out. Also, on the device, I am getting a "flicker" when I remove the subview. I have tried numerous things and it just will not go away.
    · ·
  • RockStrongoRockStrongo Posts: 176Registered Users
    edited May 2010
    Anyone have problem with this animation flickering? I cant seem to figure out why it is doing it.
    · ·
  • TheFabolusBensunTheFabolusBensun Posts: 62Registered Users
    edited May 2010
    yes it flicker and me and my mate have tryed to work it out for days please someone tell us :mad:
    <a href="http://itunes.apple.com/gb/app/cockney/id370135803?mt=8" target="_blank"><br />
    COCKNEY DICTIONARY<br />
    mzl.cmfsrfku.175x175-75.jpg<br />
    View In iTunes</a>
    · ·
  • TheFabolusBensunTheFabolusBensun Posts: 62Registered Users
    edited May 2010
    NO MORE FLICKER:

    theGroup.fillMode = kCAFillModeBoth;

    theGroup not transformAnimation :D
    <a href="http://itunes.apple.com/gb/app/cockney/id370135803?mt=8" target="_blank"><br />
    COCKNEY DICTIONARY<br />
    mzl.cmfsrfku.175x175-75.jpg<br />
    View In iTunes</a>
    · ·
  • RockStrongoRockStrongo Posts: 176Registered Users
    edited May 2010
    NO MORE FLICKER:

    theGroup.fillMode = kCAFillModeBoth;

    theGroup not transformAnimation :D

    very nice....you the man!
    · ·
  • eyestealeyesteal Posts: 6New Users
    edited May 2010
    How would you go about running the animation with the splash page as the entire image and making it flip after a specified sleep period? sleep(2);

    I've tried a few things but I can't get it to work!
    · ·
  • Robert PaulsonRobert Paulson Posts: 492Registered Users
    edited May 2010
    I don't know whether you can act on the splash screen like that. I don't think you can.

    One work-around might be to have a view controller that shows nothing else than your splash screen PNG (i.e. looks exactly like your splash screen) load first. Then, after the wanted interval, you can move from that fake view controller to your real first view controller and have that transmission animated. Does that make sense?

    Hope this helps.

    Cheers,
    Bob
    <i>We are God’s middle children, according to Tyler Durden, with no special place in history and no special attention.</i><br />
    <br />
    Consider saying <i>thanks</i> by buying <a href="http://www.qego.com/thecolor.html" target="_blank">my app</a>. :]
    · ·
  • EPage_EdEPage_Ed Posts: 54Registered Users
    edited July 2010
    To reverse the animation, just reverse the from and to parameters.
    · ·
  • __SUPERMAN____SUPERMAN__ Posts: 33Registered Users
    edited October 2010
    Anyone have the value for the reverse fliP?
    · ·
  • pravspravs Posts: 1New Users
    edited February 2011
    Anyone have the value for the reverse fliP?

    Here you can find a very easy page curl effect.

    YouTube - Iphone Ebook Page Curl Effect

    i used it very easy to integrate.
    · ·
Sign In or Register to comment.