apple watch - slow image animation first time

Question

I'm building a small app for apple watch. I have a Group and a Label inside of it. What I'm trying to do is:

• animate background image of the group
• fade in label after image animation ends

My code looks essentially like this:

        group.setBackgroundImageNamed("show_back-");
        group.startAnimatingWithImagesInRange(NSMakeRange(0, 39), duration: 1.5, repeatCount: 1);
        let delayTime = dispatch_time(DISPATCH_TIME_NOW, Int64(1.5 * Double(NSEC_PER_SEC)))
        dispatch_after(delayTime, dispatch_get_main_queue()) { () -> Void in
            self.animateWithDuration(1) { () -> Void in
                self.label.setAlpha(1)
            };
        };

The problem is that the first time this sequence is triggered, the image animation seems to run slower than 1.5 seconds, because the label starts fading in earlier than the images stop changing. If this is triggered again while the app is running, everything works as expected. I guess it has something to do with images preloading or something.

How can I make it work consistently? I couldn't find any sort of callback on image sequence animation end to subscribe to.

EDIT Another problem I've noticed: I have another case when bg is animated from a dispatch_after block, and when I leave the app by tapping the crown and return by double-tapping it, either the dispatch_after block is not triggered, or the background animation is not rendered correctly the first time it is invoked (I think the second, because I tried adding a breakpoint into the dispatch block and it triggered every time I tested). I'm running watchOS2, so maybe it is related to the beta state the OS is currently in?

Answer 1

I ran into the same issue as you.

This happens because on the first time you try it, the watch takes time to load the images. Also apple doesn't give us any 'pre load' method, so I came up with a little work around it: When my controller will be displayed:

func willActivate()

I play the animation sequence once in a background tread, this way when my user clicks on it the images are already loaded.

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,     0)) { [weak self] in
            if let uSelf = self {
                uSelf.statusAnimationImage.setImageNamed("my image name")
                uSelf.statusAnimationImage.startAnimatingWithImagesInRange(NSMakeRange(0, 359), duration: 0.5, repeatCount: 1)
            }
        } 

That was the best way I found to solve this problem and it works for me.

Answer 2

try doing

 group.setBackgroundImageNamed("show_back-");

 let delayTime = dispatch_time(DISPATCH_TIME_NOW, Int64(1.5 * Double(NSEC_PER_SEC)))

 dispatch_after(delayTime, dispatch_get_main_queue()) { () -> Void in
        self.animateWithDuration(1) { () -> Void in
             group.startAnimatingWithImagesInRange(NSMakeRange(0, 39), duration: 1.5, repeatCount: 1);
             self.label.setAlpha(1)
        };
    };

I'm not exactly sure what you're doing but also try doing animateWithDuration(0) or (1.5)