Animate WKInterfaceLabel with text change apple watch swift

Question

I am working on an apple watch application. In the application, I have a view where the user may swipe left and right between 3 given results. I am using WKInterfaceLabel to show result information. On each swipe, labels are updated with new text.

View screenshot:

I want to animate the change of text on swipe. How can I do this?

Any help provided will be appreciated. Thanks!

Do I understand you right that you have a single page, and you want to change the content of the label by swiping left and right? — Reinhard Männer, Sep 20 '17 at 19:21
Have you tried to add a `WKSwipeGestureRecognizer`(docu [here](https://developer.apple.com/documentation/watchkit/wkswipegesturerecognizer)) to your page? — Reinhard Männer, Sep 20 '17 at 19:29
I am using that for swipe but I want to add animation effect on the change of text for labels. — Akshay Sunderwani, Sep 20 '17 at 19:30
Sorry, I did not understand this. But what kind of animation do you imagine? — Reinhard Männer, Sep 20 '17 at 19:34
I don't have any specific animation requirement but move in move out animation will work. This might give you some idea about animations I am looking for https://stackoverflow.com/questions/3073520/animate-text-change-in-uilabel — Akshay Sunderwani, Sep 20 '17 at 19:43

score 2 · Answer 1 · answered Sep 20 '17 at 20:04

2

This is not very elegant, but it should work:
You can fade out the contents of a WKInterfaceLabel, and fade in another label in its place. So, place 2 WKInterfaceLabel objects at the same place. One of them is visible (alpha = 1.0) and the other invisible (alpha = 0.0).
When you swipe, determine the new value that should be shown, and set it to the invisible label.
Then, animate the transition using the function animate(withDuration:animations:) of the WKInterfaceController. In the animation block, change the alpha values as required, something like

animateWithDuration(1.0) {
    self.visibleLabel.setAlpha(0.0)
    self.invisibleLabel.setAlpha(1.0)
}

Hope this helps!

answered Sep 20 '17 at 20:04

Reinhard Männer

11,202
4
45
85

I got that. It is kind of workaround but it will work. Nice idea though. Thanks! – Akshay Sunderwani Sep 20 '17 at 20:33
I will award bounty in the grace period. I will wait if I get an any better solution. Hope you understand! – Akshay Sunderwani Sep 20 '17 at 20:35
No problem! And, of course, it is enough to change the alpha value of the upper label... – Reinhard Männer Sep 21 '17 at 06:07
I tried this, but it didn't work out so well. Do you have any more suggestion. Thanks! – Akshay Sunderwani Sep 22 '17 at 00:49

score 0 · Answer 2 · answered Sep 22 '17 at 11:26

try:-

 func labelimage(img: UIImageView) {
        print(labelrate.hidden)
        if (labelrate.hidden) {
            UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
                self.labelrate.alpha = 1
            }, completion: nil)
        }
        else {
            UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
                self.labelrate.alpha = 0
            }, completion: nil)
        }
        self.labelrate.hidden = !self.labelrate.hidden
    }

I am doing this work in watchOS and uiimageview and uiview are not available in watchOS. Can you provide any other solution? Also, what is labelrate? And why are you passing img in function? — Akshay Sunderwani, Sep 22 '17 at 11:39

Animate WKInterfaceLabel with text change apple watch swift

2 Answers2