Zoom par pincement et rotation

Le zoom par pincement et la rotation sont des interactions emblématiques sur mobile, que l’on retrouve dans les visionneuses de photos, les cartes et les applications de documents. Leur bonne implémentation nécessite une reconnaissance des gestes multipoints exécutée sur le thread natif, ainsi que des mises à jour fluides et en temps réel des transformations via les valeurs partagées de Reanimated.

React Native Gesture Handler fournit les détecteurs Gesture.Pinch() et Gesture.Rotation() qui, combinés à useAnimatedStyle et useSharedValue de Reanimated, produisent des interactions extrêmement fluides, impossibles à distinguer d’implémentations natives.

Gesture.Pinch() reconnaît un geste de pincement ou d’écartement à deux doigts. La valeur la plus importante de l’objet d’événement est event.scale : elle commence à 1.0 au début du geste et évolue proportionnellement à la distance entre les doigts. Une valeur de 2.0 signifie que les doigts sont deux fois plus éloignés qu’au départ.

Vous devez combiner le facteur d’échelle progressif du geste avec un facteur d’échelle de base enregistré afin d’accumuler le zoom sur plusieurs gestes de pincement ; sinon, chaque nouveau pincement réinitialise la valeur à 1.0.

Sans limitation, les utilisateurs peuvent effectuer un zoom jusqu’à des facteurs d’échelle énormes ou dézoomer jusqu’à faire disparaître l’image. Définissez un niveau de zoom minimal et maximal, puis limitez la valeur d’échelle dans la fonction de rappel onUpdate à l’aide d’un worklet utilitaire.

La fonction de limitation s’exécute sur le thread de l’interface utilisateur sous forme de worklet, ce qui maintient une réponse rapide aux gestes. Choisissez des valeurs adaptées à votre contenu : les visionneuses de photos autorisent généralement un zoom de 1x à 5x, tandis que les cartes peuvent accepter des plages bien plus larges.

Gesture.Rotation() suit la variation d’angle d’un geste de torsion à deux doigts. La valeur event.rotation est exprimée en radians : elle représente l’angle de rotation des doigts depuis la position de départ du geste. Une rotation complète dans le sens horaire correspond à environ 6,28 radians (2π).

Comme pour le facteur d’échelle, vous devez accumuler la rotation sur plusieurs gestes en enregistrant la rotation actuelle à la fin du geste, puis en ajoutant la rotation du nouveau geste au décalage enregistré lors des gestes suivants.

Le tableau transform de useAnimatedStyle applique à la fois le facteur d’échelle et la rotation. L’ordre des transformations est important : appliquez d’abord le facteur d’échelle, puis la rotation (ou l’inverse selon le comportement souhaité). Le tableau de transformations de React Native accepte directement les valeurs numériques d’échelle et les valeurs de rotation en radians provenant des valeurs partagées.

La transformation rotate nécessite une chaîne se terminant par le suffixe 'rad', tandis que scale accepte directement un nombre. Utilisez la concaténation de chaînes (et non des littéraux de modèle avec des accents graves) pour construire la chaîne de rotation dans un worklet.

Une visionneuse de photos doit permettre d’utiliser le pincement et la rotation en même temps. Regroupez les deux gestes dans Gesture.Simultaneous et transmettez le geste composé à un seul GestureDetector. L’utilisateur peut ainsi zoomer et faire pivoter l’image avec un geste à deux doigts, de manière fluide.

L’ajout simultané du balayage crée une expérience complète de visionneuse de photos : zoomer, faire pivoter et repositionner l’image avec deux doigts à la fois.

Une fonctionnalité courante des visionneuses de photos consiste à appuyer deux fois pour basculer entre la taille naturelle et une vue agrandie, puis à appuyer deux fois à nouveau pour réinitialiser. Utilisez Gesture.Tap().numberOfTaps(2) pour le détecteur de double appui, puis, dans son gestionnaire, animez le facteur d’échelle et la rotation afin de les ramener à leurs valeurs initiales avec un ressort.

Utilisez Gesture.Exclusive, en donnant la priorité au geste de double appui par rapport à celui d’appui simple, afin d’empêcher l’appui simple de se déclencher pendant une séquence de double appui.

Par défaut, la transformation d’échelle agrandit ou réduit l’image autour de son centre. Pour un comportement plus naturel, l’image doit zoomer autour du point focal, c’est-à-dire le milieu entre les deux doigts. L’événement du geste fournit event.focalX et event.focalY à cette fin.

Pour implémenter un zoom autour du point focal, vous devez ajuster le décalage de translation en même temps que le facteur d’échelle afin que le point situé sous les doigts reste fixe pendant le zoom. Ce calcul consiste à déterminer la variation du décalage causée par la variation d’échelle au niveau d’un point focal donné.

Après un zoom avant, l’utilisateur peut balayer l’image pour en voir différentes parties. Vous devez toutefois limiter ce balayage afin qu’il soit impossible de déplacer l’image au point de révéler une zone vide au-delà de ses bords. Calculez le décalage maximal du balayage en fonction du facteur d’échelle actuel et des dimensions de l’image, puis limitez le décalage dans le onUpdate du balayage.

C’est ce niveau de finition qui distingue une visionneuse de photos professionnelle d’un prototype rudimentaire. La logique de contrainte se résume à quelques lignes de calcul exécutées sous forme de worklets sur le thread de l’interface utilisateur.

Lorsque l’utilisateur relève ses doigts après avoir dépassé les limites de zoom (en dessous du minimum ou au-dessus du maximum), ramenez le facteur d’échelle à la limite avec un ressort au lieu de laisser l’image à une taille inhabituelle. Faites-le dans la fonction de rappel onEnd du geste de pincement.

De même, lorsque l’utilisateur dézoome jusqu’à 1x, réinitialisez le décalage du balayage à zéro afin que l’image revienne au centre. Cette combinaison de vérifications des limites dans onEnd rend le composant soigné et prévisible.

Une visionneuse de photos complète, zoomable, rotative et déplaçable combine : des valeurs partagées pour le facteur d’échelle, la rotation et le décalage ; useAnimatedStyle qui applique toutes les transformations ; Gesture.Simultaneous qui compose le pincement, la rotation, le balayage et le double appui ; ainsi que la limitation aux limites dans onUpdate et la correction avec un ressort dans onEnd.

Il s’agit de l’une des interactions les plus impressionnantes que vous puissiez créer avec React Native. Elle s’exécute entièrement sur le thread de l’interface utilisateur, sans intervention du thread JavaScript pendant le geste, ce qui la rend impossible à distinguer d’une implémentation native.

Dans cette leçon, vous avez appris que Gesture.Pinch() fournit event.scale pour suivre le zoom à deux doigts par rapport au début du geste, que Gesture.Rotation() fournit event.rotation en radians pour suivre la torsion à deux doigts, et que Gesture.Simultaneous compose le pincement, la rotation et le balayage afin que les trois fonctionnent simultanément pour une expérience complète de visionneuse de photos. Ensuite, nous configurerons des schémas d’URL personnalisés pour établir des liens profonds vers des écrans précis de l’application.