Binding des propriétés de mise en page

Le data binding des propriétés de mise en page permet de lier dynamiquement des propriétés telles que la position, la taille ou la rotation d’un élément à une source de données. Cela ouvre la voie à des interactions dynamiques et des animations fluides au sein de vos applications.

Voici quelques cas d’usage pour lesquels il est intéressant d’utiliser le binding des propriétés de mise en page :

• Déplacement interactif: déplacez un objet en fonction de la position d’un tap ou d’un objet physique.
• Animation et gestuelle: créez des rotations fluides basées sur des curseurs, des gestes ou des données externes.
• Interfaces physiques: synchronisez des données TUIO avec vos éléments pour des interactions tactiles immersives.

Binding de la position

Vous pouvez utiliser plusieurs types de données pour la Position:

• Point: représentation classique d’un point avec des coordonnées (x, y).
• Norm Point: représentation normalisée du point entre 0 et 1.

Utilisation du Norm Point

Pour le Norm Point, une valeur (0.5, 0.5) place l’élément au centre de son parent. Le point d’origine est toujours le centre de l’élément, ce qui simplifie le centrage et l’alignement dynamique.

En utilisant un Norm. Point, il est possible de lier la position d’un élément à un événement utilisateur, comme un tap. Dans l’exemple ci-dessous, l’objectif est d’afficher une animation à l’endroit où l’utilisateur tape, sachant qu’il peut taper où il veut sur l’écran.

Lorsque l’utilisateur effectue un tap sur la Zone interactive, la position du tap est exposée sous forme de deux Norm. Points :

• Global: par rapport à l’écran entier.
• Parent: par rapport au parent de l’élément.

Cette position peut être stockée dans une variable dans la base de données PandaSuite, qui sera ensuite bindée à la propriété Position d’un objet, ici l’animation Lottie.

Grâce à cette donnée, l’animation se déplace dynamiquement en fonction de la position du tap.

Binding de la rotation

La propriété Rotation peut être liée à une variable contenant un angle en degrés. Le comportement est basé sur le point d’origine, qui est toujours le centre de l’élément, tout comme pour la position. Cela garantit que les rotations se font de manière intuitive et prévisible.

Les points clés :

• Angle en degrés: vous pouvez binder un angle dynamiquement pour ajuster la rotation d’un élément.
• Point d’origine au centre: la rotation se fait autour du centre de l’élément, ce qui permet des animations et des interactions visuelles harmonieuses.

Lorsqu’un utilisateur fait glisser un curseur, l’angle de rotation peut être mis à jour dynamiquement en fonction de la valeur du curseur.

Une rotation à 0° correspond à l’orientation initiale, et une rotation positive ou négative ajustera l’élément autour de son centre.

Possibilités étendues : App-to-App et TUIO

Avec le composant App-to-App, il est possible de lier des données provenant d’un appareil externe ou d’un serveur local pour interagir avec vos éléments.

Les appareils compatibles TUIO fournissent des données, comme la position d’un objet physique, sous forme de Norm. Points.

En combinant ces données avec des propriétés bindées (par exemple, la position ou la rotation), vous pouvez synchroniser un objet virtuel avec son équivalent physique en temps réel.