How to make an animated button in Apple WatchKit?

Question

I want to make an animation button in WatchKit, but it seems I can’t find a way to change the WKInterfaceButton or drag the image into the button in the storyboard. Any help is appreciated.

Answer 1

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

First drag the button to the scene created in the storyboard.

Secondly, select the button, change its content property from Text to Group . If you cannot find the content property, click the Attributes Inspector button in the upper right corner of the screen, it looks like a breakpoint button or a down arrow with a line.

Now you can manage the group created inside your button. You must add a link to 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; } 

Thus, the button animation will play after the scene is initialized. Remember that while only frame animation is supported, all frames in one animation should be called "Bus0.png", "Bus1.png" ....

Hope this helps :)

Answer 2

The Reck post worked for me when I needed to control the number of retries or the duration of a retry. If you just want to start or stop the animation for a button, the following works for me, where twoButton is WKInterfaceButton and I have a set of images named [e-mail] , [e-mail] , etc.

 - (void)startButtonAnimating { // This works, but can't control repeat counts or duration [self.twoButton setBackgroundImageNamed:@"Bus"]; // But you can stop after a delay by setting background image nil [self performSelector:@selector(stopGroupButtonAnimating) withObject:nil afterDelay:1.5]; } - (void)stopButtonAnimating { [self.twoButton setBackgroundImage:nil]; }