Simple animated progress indicator

Just something I came up with this morning. Simple “breathing” progress indicator - note the heart ring. Feel free to play with it - formula is in the arc/shadow internal/external radius. I’m just learning facer creator so please bear with me.

I had to redo the progress indicator myself, as the radii of the normal progress indicator cannot depend on tags (and so can’t be animated).

This is currently my watch face as it does everything I need it to do and is sort of “always on”. Unfortunately (fortunately for the watch battery life) you can’t have animations in the AOD.

Edit:
Another playground watchface where I had another similar idea to animate the progress ring with a gif. Looks pretty neat when it’s smaller. Can be made to breathe too I guess.

I got the gif from gify - please don’t use without the proper attribution, not sure who the original author is.

3 Likes

Looks relaxing…neat! If you want us to play with it though you need to allow us to inspect it. When you share it, check the make inspectable box.

3 Likes

@shakinghead. Cool. Post the othe link. As @kirium0212 says. Inspection on then we can really see how clever you are. Use New Shape Layer Arcs they are more robust and if you want a background make another. Have fun.

2 Likes

That is true, but you can use two arc shapes instead (one semitransparent as background filled to 1 and another with fill ratio same as you would put in the progress bar.) and “animate” them radius with formula.

2 Likes

Nicely done and Inspection is On guys -

1 Like

Sadly on GW4 the Zooming ring is a NOP . We have a Topic going on the subject . Works fine on Tizen . I don’t know about Pre WOS3 . I can not test that .

3 Likes

So cool! Nice and interesting effect.

I’ve added one more effect:
red is copy of yours
green one is with pulsating effect in the rhythm of the heartbeat

Used 0-200 heartbeats range.

Sadly, as russellcresser said: doesn’t work on Watch 4. Pity. I’m sad now.

2 Likes

@masterboyhr @icrltd4 . I think this Work is very Powerful We should ask those who will participate which watches will show it .

So

YES
Tizen

NOP
GW 4/5 WOS 3
Fossil Carlyle with WearOS 2
TickWatch

3 Likes

Very cool stuff! Looks like you and I could have some things to talk about.
As mentioned above, I’ve been having some problems with dynamic radii on my design. Looks fine on the UI, but won’t show on my TicWatch.

As soon as my watch recharges, I’ll take a look at yours and see if that works. Then I’m getting mean and dirty on the whole dynamic arc business.

2 Likes

@rasmusbak.jepsen Do not Bust a Gut trying to get it to work . Sadly there are many bits of the UI that do not work . If one made a list on the community it would get lost in the Topic Hijacking and after a while the list would become un-editable . I would think that Facer and Samsung will work together to get it sorted as it is a good selling point for Facer like Curved text is for WFS .

Thanks! And indeed, I turned on inspection last night but for some reason I still can’t see the little rocket so I thought I’d investigate later, but left the edit in. Glad to see that it worked!

2 Likes

Nice! Similarly I was thinking about pulsating on BPM.

1 Like

I actually came across your watch hand design before and I love it!

3 Likes

Just saw now that you’re animating the shaded ring with the same frequency as the progress ring. I have a frequency offset of pi/3 (or was it pi/1.5) which I thought made it a little more fun, and didn’t even try without it - so thanks for showing what it looks like in sync, it’s actually pretty nice.

3 Likes

I tested it on my Fossil Carlyle with WearOS 2. It’s a “no go” there also.

3 Likes

@masterboyhr & @russellcresser
On the pulsing progress rings could you add multiple concentric stacked progress rings coming and going using an expression moving them on and off screen when needed? I can see it easily being done in steps of maybe one- or two-pixel radius segment widths. Done with the right timing it could look like breathing. Maybe add one to the inside and one to the outside with each step thicker. “When all else fails, use multiple layers.” :grin:

3 Likes

Yeah zooming dot or nice glow .

Same for H and W

(33+(22+((sin(rad((#DWFSS#)*#ZHR#)))*22)))

1 Like

This is a very rough example of my idea. Don’t laugh, I know its crude as hades.

2 Likes

Well you Have to Laugh . A fine example of disappearing some thing that can not have Opacity and Radius Tags . Good Job I say don’t know when I will stop Laughing .

200w

1 Like

Don’t know what to do with them but here are 2 more effects.

Also looks a bit different on a watch, watch turns them upside down at the minimum size point.
Cannot imagine why.

2 Likes