# Binding de la mise en page

> Découvrez comment le data binding des propriétés de mise en page peut améliorer les interactions dynamiques et les animations fluides dans vos applications avec des exemples d'utilisation pour le déplacement interactif, l'animation, les interfaces physiques et les possibilités étendues avec App-to-App et TUIO.

https://docs.pandasuite.com/fr/essentials/layout/layout-properties-binding/

**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](https://docs.pandasuite.com/fr/essentials/data/data-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](https://docs.pandasuite.com/fr/essentials/components/app-to-app/) 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 (**Depuis l'événement sélectionné** dans la fenêtre de données) :

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

[Image : Tap sur une Zone interactive d'un écran d'abeilles : la fenêtre de données affiche Trigger › Gesture, avec les Norm. Points Global et Parent encadrés]

Cette position peut être stockée dans une variable dans le [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/), qui sera ensuite bindée à la propriété **Position** d'un objet, ici l'animation Lottie.

[Image : Animation Lottie sélectionnée dans PandaSuite Studio, sa propriété Position bindée à la donnée Touch Norm Point]

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

[Modèle : On Tap Animation](https://pandasuite.com/dashboard/use-template/R_QquogB5IBMJWwg1ppX)

## 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.
- **Valeurs multi-tours**: les valeurs comme `450°` ou `-720°` sont prises en charge. L’orientation visuelle se répète tous les `360°`, mais la valeur complète est conservée pour le binding et l’animation.

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](https://docs.pandasuite.com/fr/essentials/components/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.