Ios – Animated Images in a UIButton

iosuibuttonuiviewanimationxcode

What is the best way to animate images of a button?

Say I want to cycle through like 6 frames and have the user still be able to click the button?

Should I animate the images and just have an invisible button on top of it in interface builder?

Is there a way to animate them within defining the UIButton?

Or is it better to animate images and find the users touch point and act on that?

Best Answer

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];

Related Solutions

Ios – UIButton: Making the hit area larger than the default hit area

Since I am using a background image, none of these solutions worked well for me. Here is a solution that does some fun objective-c magic and offers a drop in solution with minimal code.

First, add a category to UIButton that overrides the hit test and also adds a property for expanding the hit test frame.

UIButton+Extensions.h

@interface UIButton (Extensions)

@property(nonatomic, assign) UIEdgeInsets hitTestEdgeInsets;

@end

UIButton+Extensions.m

#import "UIButton+Extensions.h"
#import <objc/runtime.h>

@implementation UIButton (Extensions)

@dynamic hitTestEdgeInsets;

static const NSString *KEY_HIT_TEST_EDGE_INSETS = @"HitTestEdgeInsets";

-(void)setHitTestEdgeInsets:(UIEdgeInsets)hitTestEdgeInsets {
    NSValue *value = [NSValue value:&hitTestEdgeInsets withObjCType:@encode(UIEdgeInsets)];
    objc_setAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS, value, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

-(UIEdgeInsets)hitTestEdgeInsets {
    NSValue *value = objc_getAssociatedObject(self, &KEY_HIT_TEST_EDGE_INSETS);
    if(value) {
        UIEdgeInsets edgeInsets; [value getValue:&edgeInsets]; return edgeInsets;
    }else {
        return UIEdgeInsetsZero;
    }
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    if(UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets, UIEdgeInsetsZero) || !self.enabled || self.hidden) {
        return [super pointInside:point withEvent:event];
    }

    CGRect relativeFrame = self.bounds;
    CGRect hitFrame = UIEdgeInsetsInsetRect(relativeFrame, self.hitTestEdgeInsets);

    return CGRectContainsPoint(hitFrame, point);
}

@end

Once this class is added, all you need to do is set the edge insets of your button. Note that I chose to add the insets so if you want to make the hit area larger, you must use negative numbers.

[button setHitTestEdgeInsets:UIEdgeInsetsMake(-10, -10, -10, -10)];

Note: Remember to import the category (#import "UIButton+Extensions.h") in your classes.

Objective-c – How to create a basic UIButton programmatically

Here's one:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self 
           action:@selector(aMethod:)
 forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Show View" forState:UIControlStateNormal];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[view addSubview:button];

Best Answer

Related Solutions

Ios – UIButton: Making the hit area larger than the default hit area

Objective-c – How to create a basic UIButton programmatically

Related Topic