Animation event for "clockface shown"?

[SunsetRunner]

Hi everybody,

Is is possible to do a property animation of an UI element that is triggered by the watch moving from blank screen / show any menu to "show the clockface", ie. user sits there with black screen, moves wrist to look at watch, clockface appears and element animates from transparent to opaque. Activate/load/enable all don't seem to do the job...

Thanks!

Karlheinz

[qooApps · Accepted solution]

display.onchange = () => { 
  if (display.on) {
    startAnimation();
  }
}

This should work in your case.

[SunsetRunner]

Thanks, that did it!

So in more details I did the following (feel free to correct me if my conclusions are just coincidences)

Defined my "use" element in index.gui as the Animations Guide says:

<defs>
    <symbol id="stairrect">
      <rect id="stairs" x="5" y="0" width="44" height="100%" fill="grey" pointer-events="visible">
        <animate attributeName="opacity" begin="click" from="1" to="0" dur="0.3" final="keep" />
        <animate attributeName="opacity" begin="click+0.3" from="0" to="1" dur="0.3" final="keep" />
      </rect>
    </symbol>
  </defs>

And later:

    <use id="stairsuse" href="#stairrect" width="44" height="100%" />

Then in Javascript&colon;

import { display } from "display";

... your code to trigger the animation on the display.onchange event ...

function startAnimation() {
  stairsUse.animate("click");
}

It seems that the event to use (here: "click") can be anything; it just has to be consistent in index.gui and index.js, ie no matter what trigger I define in the JSON, that's the trigger to use for Javascript animation.