WatchOS background color animation

Question

I'm trying to make a simple animation in WatchKit. I want to blink the specific color, and then come back to black background. It all works fine... once. After this first blink nothing will happen. I've tried searching but couldn't find relevant answer. My guess it that I should somehow reset the state of the animation, but couldn't find any way to do that.

This is the code I'm using for the animation:

animate(withDuration: 0.2, animations: {
    //set first color
    //mainGroup is a WKInterfaceGroup
    self.mainGroup.setBackgroundColor(color)
    //set back black color
    self.mainGroup.setBackgroundColor(UIColor.black)
})

score 0 · Answer 1 · answered Jan 06 '19 at 13:11

I've researched a bit more. There are no options in animate function in WatchKit, and that is what makes it harder (can't use autoreverse). The solution is not perfect, but it more or less works. You need to first set the desired 'blink' color, and after that animate the transition to black.

self.mainGroup.setBackgroundColor(color)
animate(withDuration: 0.2, animations: {
    self.mainGroup.setBackgroundColor(UIColor.black)
})

score 0 · Answer 2 · answered Sep 27 '19 at 16:12

0

If you want a more complicated timing, e.g. smooth "in" animation, you can use delayed execution:

animate(withDuration: 0.2) {
    self.mainGroup.setBackgroundColor(color)
} 
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.21) {
    animate(withDuration: 0.2) {
        self.mainGroup.setBackgroundColor(.black)
    }
}

answered Sep 27 '19 at 16:12

kelin

11,323
6
67
104

I had the similar behavior (animation would only run once) until I embedded the animate in a DispatchQueue.main.async() block. Then it worked reliably. – Matt Mar 17 '21 at 22:01

WatchOS background color animation

2 Answers2