How to animate text

[SunsetRunner]

I have successfully created a watch face for my Ionic, and have my current pulse rate as the central item.

What I want to do is make it "flash" so switch between bold and normal twice per second 

I know this should be possible but am struggling for any guides of sample code that will achieve this

Any ideas

[JonFitbit]

Probably the easiest way would be to have 2 text elements, one bold, one not. Then toggle the visibility of each.

https://dev.fitbit.com/build/guides/user-interface/javascript/#hiding-showing-an-element

You can use setInterval() to to make it happen every 500ms, but make sure you stop the timer when the screen is turned off, otherwise it will drain the battery.

Something like:

import { display } from "display";

let myTimer = {
 watchID: null,
 start: function() {
   if (!this.watchID) {
     this.watchID = setInterval(this.doInterval.bind(this), 500);
   }
 },
 stop: function() {
   clearInterval(this.watchID);
   this.watchID = null;
 },
 doInterval: function() {
    // TOGGLE ELEMENTS HERE
 },
 wake: function() {
   this.doInterval();
   this.start();
 }
}

myTimer.start();

display.onchange = function() {
 if (display.on) {
   myTimer.wake();
 } else {
   myTimer.stop();
 }
}

[SunsetRunner · Accepted solution]

Thanks for the speedy response, I will give that a go and report back on how I get on

[SunsetRunner]

Thanks for your pointers, the link to the animation page in particular helped. I solved the requirement by adding this code to index.gui, which put a flashing heart symbol in front of the HR value

<image x="55" y="40%" fill="red" href="Heart.png" height="48" width="48" load="sync" >
<animate attributeName="fill-opacity" begin="load" repeatCount="indefinite" from="1" to="0.5" dur="1" />
</image>