Dans le monde de l’affichage dynamique, le dynamisme est essentiel. Contrairement à la communication traditionnelle sur papier, les vidéos et animations jouent un rôle crucial pour capter l’attention et transmettre le message de manière efficace. Ce texte se concentre sur les animations liées au contenu dynamique, et non sur celles intégrées dans les vidéos pré-rendues. Pour explorer cette distinction, vous pouvez consulter notre article vidéo vs scène.

Les familles d’animation dans Disign

Dans Disign, nous distinguons principalement deux grandes familles d’animations :

1. Les animations de transitions : Elles interviennent entre différents éléments sur l’écran. Ces animations permettent de fluidifier le passage d’un contenu à un autre, créant une expérience utilisateur plus cohérente.
2. Les animations d’élément : Elles se concentrent sur l’animation d’un seul élément. Ces animations peuvent enrichir le contenu en ajoutant des effets visuels qui attirent l'œil et renforcent le message.

Ces deux types d'animations contribuent à rendre votre affichage dynamique plus attrayant et visible. Pour les applications hybrides combinant affichage dynamique et contenu tactile interactif avec Disign Studio, les animations jouent également un rôle crucial en apportant des informations utiles à l’utilisateur. Elles sont essentielles pour l'ergonomie et l'interface utilisateur (IHM).

Un conseil fréquent pour nos Disigners : il est crucial de ne pas abuser des animations. Une utilisation excessive peut surcharger la lisibilité du message. Utilisez-les avec parcimonie pour maximiser leur efficacité sans compromettre la clarté.

Améliorations du moteur de rendu d’animation

Nous avons récemment mis à jour le moteur de rendu d’animation de Disign pour offrir des performances accrues. Cet article, bien que technique, peut intéresser les développeurs et les utilisateurs avancés qui souhaitent comprendre les évolutions récentes.

Performance optimisée

Disign est conçu pour être performant. Pour garantir une fluidité optimale des applications web, nous visons à atteindre 60 images par seconde (fps). Chaque développement dans Disign est orienté vers cet objectif, en veillant à ce que le code soit exécuté en 16 millisecondes par image.

Pour répondre à cette exigence de performance, nous employons diverses technologies avancées, telles que les Web Workers, les iframe sandboxés, le WebAssembly (WASM), et le cache. Ces technologies permettent d'utiliser les ressources de la machine de manière optimale sans compromettre l’affichage. Même si ces termes vous semblent complexes, sachez que nous faisons tout ce qui est en notre pouvoir pour assurer une performance fluide et sans accroc.

Nouvelle technologie de rendu

Le nouveau moteur de rendu utilise les Web Animation API des navigateurs, une technologie similaire à celle du CSS mais avec une personnalisation et une programmabilité accrues grâce à JavaScript (JS). L’ancien moteur de Disign utilisait du JS pour animer des propriétés CSS accélérées par GPU (telles que transform et opacity). Cependant, cela pouvait affecter l’animation si le CPU était entièrement sollicité.

Avec la Web Animation API, nous déléguons le travail d’animation au GPU, permettant au CPU de se concentrer sur l’orchestration. Résultat : les animations sont désormais plus fluides, même lors d'une sollicitation élevée de Disign.

En résumé, les améliorations apportées au moteur de rendu d’animation assurent une expérience utilisateur plus fluide et réactive. Nos efforts pour optimiser les performances garantissent que les animations enrichissent votre affichage dynamique sans compromis sur la qualité.