Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Newbie - Sweep Clock Second Hand Movement

Hi all, am a Newbie building fitbit clock faces.

 

Is there a way to get continuous, sweeping movement for second hand on the basic Analog clock?

https://dev.fitbit.com/build/guides/clockfaces/

Best Answer
0 Votes
2 REPLIES 2

There's a few ways you might be able to do it.  The limitations will be in what properties you can change in your JS code and how "jumpy" the animation may appear following adjustments.

 

  • One way may be to add an "animateTransform" element in the "secs" group.  This transformation would be set to "rotate" with a duration of 1 second.  You would then adjust the "to" and "from" rotation each tick and then trigger the rotation by invoking ".enable()" on that element.
  • If the above complains about adjusting the "to" and "from" properties, you could set a fixed "to" and "from" angles and instead rotate the entire group, much like in the provided example.
  • The final method I can think of throws all of that updating out.  You still include an animation, but instead you set it to rotate through all 360 degrees in a minute and set the animation to repeat indefinitely.  The secs group is then set to the initial angle for the second hand and the animation handles the rest.  This approach may need to be tweaked slightly if the display going to sleep doesn't continue to "redraw".

Check out this guide on animations for more details and ideas: https://dev.fitbit.com/build/guides/user-interface/animations/

Best Answer
0 Votes

If SVG animations can't do it, you could try requestAnimationFrame.

Peter McLennan
Gondwana Software
Best Answer
0 Votes