How to make an animated button in Apple WatchKit?

Question

I'd like to make a button with animation in WatchKit, but it seems I can't find a way to modify WKInterfaceButton or drag an image into button in storyboard. Any help is appreciated.

Answer 1

After some research I found the solution, it's pretty simple but easily ignored :)

First, drag a button into a scene created in storyboard.

Second, select button, modify its property content from Text to Group. If you can't find content property, click the Attributes Inspector button at top right of your screen, it looks like a breakpoint button or a down arrow with a bar.

Now you can control group created inside your button. You need to add a reference of this WKInterfaceGroup inside your controller code. Here is an example:

@interface AAPLButtonDetailController()
@property (weak, nonatomic) IBOutlet WKInterfaceGroup *buttonGroup;   
@end


@implementation AAPLButtonDetailController

- (instancetype)init {
    self = [super init];

    if (self) {
        // Initialize variables here.
        // Configure interface objects here.
        [_buttonGroup setBackgroundImageNamed:@"Bus"];
        [_buttonGroup startAnimating];
    }

    return self;
}

So the button animation will be played after scene initialized. Remember only frame animation is supported for now, all frames in one animation should be named like "Bus0.png", "Bus1.png"....

Hope this can help :)