Use interval for animation and timeout for time to ensure that the time changes precisely.

apps/cassioWatch/app.js

@@ -1,15 +1,9 @@
 const storage = require('Storage');
-const locale = require('locale');
 
 require("Font6x12").add(Graphics);
 require("Font8x12").add(Graphics);
 require("Font7x11Numeric7Seg").add(Graphics);
 
-
-let ClockInterval;
-let RocketInterval;
-let BatteryInterval;
-
 function bigThenSmall(big, small, x, y) {
   g.setFont("7x11Numeric7Seg", 2);
   g.drawString(big, x, y);
@@ -18,16 +12,6 @@ function bigThenSmall(big, small, x, y) {
   g.drawString(small, x, y);
 }
 
-function ClearIntervals(inoreclock) {
-  if (RocketInterval) clearInterval(RocketInterval);
-  if (BatteryInterval) clearInterval(BatteryInterval);
-  RocketInterval = undefined;
-  BatteryInterval = undefined;
-  if (inoreclock) return;
-  if (ClockInterval) clearInterval(ClockInterval);
-  ClockInterval = undefined;
-}
-
 function getBackgroundImage() {
   return require("heatshrink").decompress(atob("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"));
 }
@@ -45,15 +29,31 @@ function getRocketSequences() {
   };
 }
 
-let rocket_sequence = 1;
+let rocketSequence = 1;
-
 let settings = storage.readJSON("cassioWatch.settings.json", true) || {};
 let rocketSpeed = settings.rocketSpeed || 700;
 delete settings;
 
-g.clear();
+// schedule a draw for the next minute
+let rocketInterval;
+var drawTimeout;
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
 
-function DrawClock() {
+
+function clearIntervals() {
+  if (rocketInterval) clearInterval(rocketInterval);
+  rocketInterval = undefined;
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = undefined;
+}
+
+function drawClock() {
   g.setFont("7x11Numeric7Seg", 3);
   g.clearRect(80, 57, 170, 96);
   g.setColor(0, 255, 255);
@@ -70,20 +70,20 @@ function DrawClock() {
   g.drawString(time < 10 ? "0" + time : time, 78, 137);
 }
 
-function DrawBattery() {
+function drawBattery() {
   bigThenSmall(E.getBattery(), "%", 135, 21);
 }
 
-function DrawRocket() {
+function drawRocket() {
   let Rocket = getRocketSequences();
   g.clearRect(5, 62, 63, 115);
   g.setColor(0, 255, 255);
   g.drawRect(5, 62, 63, 115);
   g.fillRect(5, 62, 63, 115);
-  g.drawImage(Rocket[rocket_sequence], 5, 65, { scale: 0.7 });
+  g.drawImage(Rocket[rocketSequence], 5, 65, { scale: 0.7 });
   g.setColor(0, 0, 0);
-  rocket_sequence = rocket_sequence + 1;
+  rocketSequence = rocketSequence + 1;
-  if (rocket_sequence > 8) rocket_sequence = 1;
+  if(rocketSequence > 8) rocketSequence = 1;
 }
 
 function getTemperature(){
@@ -123,7 +123,9 @@ function getSteps() {
 }
 
 
-function DrawScene() {
+function draw() {
+  queueDraw();
+
   g.reset();
   g.clear();
   g.setColor(0, 255, 255);
@@ -143,42 +145,36 @@ function DrawScene() {
   g.drawString(getSteps(), 158, 98);
 
   g.setFontAlign(-1,-1);
-  ClockInterval = setInterval(DrawClock, 30000);
+  drawClock();
-  DrawClock();
+  drawRocket();
-  RocketInterval = setInterval(DrawRocket, rocketSpeed);
+  rocketSequence -= 1;   // This avoids a "jump" in the animation
-  DrawRocket();
+  drawBattery();
-  BatteryInterval = setInterval(DrawBattery, 5 * 60000);
-  DrawBattery();
 
   for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";}
 }
 
 Bangle.on("lcdPower", (on) => {
-  if (!on) {
+  if (on) {
-    g.clear();
+    draw();
-    ClearIntervals(true);
+  } else {
+    clearIntervals();
   }
 });
 
+
 Bangle.on("lock", (locked) => {
-  if (locked) {
+  clearIntervals();
-    ClearIntervals(true);
+  draw();
-  } else {
+  if (!locked) {
-    ClearIntervals();
+    rocketInterval = setInterval(drawRocket, rocketSpeed);
-    DrawScene();
   }
 });
 
 
 // Load widgets, but don't show them
 Bangle.loadWidgets();
-
+Bangle.setUI("clock");
 
 g.reset();
 g.clear();
-Bangle.setUI("clock");
+draw();
-DrawScene();
-
-if (Bangle.isLocked()) {
-  ClearIntervals(true);
-}