[SYNAPP] Acteur Bouton de navigation (Animation CSS)

[JeremieDENAEGEL]

Bonjour,

Je cherche à faire clignoter la bordure d'un acteur Bouton de navigation suivant un lien qui peut être une synthèse d'alarme.
Pour cela, je pense devoir utiliser une animation CSS qui se déclenche suivant une variable logique.

Quelqu'un aurait la méthode pour la saisir?

Merci d'avance
Jérémie DENAEGEL
GAEM

[manufitoussiwit]

C'est un très bon cas de programmation synapps en CSS/HTML:
Le principe pour y arriver est le suivant :

• ajouter une bordure transparente au bouton
• ajouter un acteur html avec le contenu suivant :

<style>
@keyframes alarm-blinking {
  50% {
    border-color: red;
  }
}
</style>

• ajouter sur le bouton dans la section Effet, dans la propriété animation :
  alarm-blinking 500ms infinite alternate linear lorsqu'on veut qu'il clignote et enlever lorsqu'on ne veut pas.

REMARQUE : S'il y a d'autres boutons dans la même page qu'on veut faire clignoter, un seul acteur html suffit.

Et voici un exemple avec deux boutons qui clignote et la couleur paramétrable (à copier/coller dans une scène) :

SYNAPPS-STUDIO-ACTOR|{"type":"layout/stack","key":"stack1","children":[{"type":"display/html","key":"blinkingStyle","properties":{"content":"<style>\n  @keyframes alarm-blinking {\n    50% {\n      border-color: {{blinkColor}};\n    }\n  }\n</style>"},"additionalDefs":{"blinkColor":{"type":"color"}},"additionals":{"blinkColor":"rgba(232, 93, 47, 1)"}},{"type":"input/button","key":"button1","properties":{"content":"Button","borderWidth":"3px","borderStyle":"solid","borderColor":"rgba(255, 255, 255, 0)","animation":"alarm-blinking 500ms infinite alternate linear","marginTop":"37px"}},{"type":"input/button","key":"button2","properties":{"content":"Button","borderWidth":"3px","borderStyle":"solid","borderColor":"rgba(255, 255, 255, 0)","animation":"alarm-blinking 500ms infinite alternate linear","marginTop":"25px"}}],"properties":{"width":"360px"}}