How to Animate a Uibutton Between Two Png Images

How do I animate a UIButton between two PNG images?

You can use animationImages property of your button's imageView:

myButton.imageView.animationImages =
[NSArray arrayWithObjects:[UIImage imageNamed:@"image1.png"],
                          [UIImage imageNamed:@"image2.png"],
                          nil];
myButton.imageView.animationDuration = 0.5; //whatever you want (in seconds)
[myButton.imageView startAnimating];

Your button will switch between your two images.

EDIT: As @tidbeck pointed the button needs to have an image assigned to create the imageview property.

fade between two UIButton images

You could try to transition the alpha values like this to get the effect that you want:

trans_img = [UIImage imageNamed:@"fav_on.png"];

NSArray *subviews = [owningCell subviews];
UIButton *favbutton = [subviews objectAtIndex:2];
[UIView animateWithDuration:0.5 animations:^{
    favbutton.alpha = 0.0f;
} completion:^(BOOL finished) {
    favbutton.imageView.animationImages = [NSArray arrayWithObjects:trans_img,nil];
    [favbutton.imageView startAnimating];
    [UIView animateWithDuration:0.5 animations:^{
        favbutton.alpha = 1.0f;
    }];
}];

Animated Images in a UIButton

You can do this using the imageView property of UIButton. This will allow the button to behave as it normally would with your images animating on it. Here's an example:

NSMutableArray *imageArray = [NSMutableArray new];

for (int i = 1; i < 4; i ++) {
    [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d.png",i]]];
}

[myButton setImage:[UIImage imageNamed:@"1.png"] forState:UIControlStateNormal];

[myButton.imageView setAnimationImages:[imageArray copy]];
[myButton.imageView setAnimationDuration:0.5];

[myButton.imageView startAnimating];

How to create an animation by changing images after a certain amount of time

I want you to give you a solution to show you the right direction to think. That is, why I developed a small test project in Xcode and I controlled that this code really works.

First: forget NSTimers for this animation!

The idea is, that you "play" around with subviews, because you can change their alpha properties from 0.0 (invisible) to 1.0 (fully opaque), which are supported by the SDK's view animations.

Please change the image names according to your own file names (I've used my own here).

The following method checks, if the button's image is that one that shall invoke an animation - exactly what you did before. If this condition is met, it visually animates the change of the button's image to another image:

- (IBAction)balloonBursting:(UIButton *)sender
{
    BOOL doAnimate = NO;

    UIImageView *ivOldBubbleImage;
    UIImageView *ivNewBubbleImage;

    if ([[UIImage imageNamed:@"BalloonYellow.png"] isEqual:sender.currentImage]) {
        NSLog(@"will animate");
        doAnimate = YES;

        UIImage *newImage = [UIImage imageNamed:@"BalloonPurple.png"];
        ivNewBubbleImage = [[UIImageView alloc] initWithImage:newImage];
        ivNewBubbleImage.alpha = 0.0;
        ivOldBubbleImage = sender.imageView;
        [sender addSubview:ivNewBubbleImage];
    }

    if (doAnimate) {
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView animateWithDuration:1.0f animations:^(){
            // define animation
            ivOldBubbleImage.alpha = 0.0;
            ivNewBubbleImage.alpha = 1.0;
        }
                         completion:^(BOOL finished){
                             [sender setImage:ivNewBubbleImage.image forState:UIControlStateNormal];
                             [ivNewBubbleImage removeFromSuperview];
                         }];
    }
}

---

Related Topics