Animation de tournement de page

Une animation de tournage de page est un effet visuel qui reproduit le mouvement physique consistant à tourner une page dans un livre ou un magazine imprimé. Construit avec une technologie de rendu 3D, la page se relève depuis un coin, se courbe selon une trajectoire réaliste et se replie pour révéler la page suivante en dessous. Les ombres se déplacent à mesure que la page bouge, et le verso de la page qui tourne devient brièvement visible, exactement comme avec une vraie feuille de papier. Le résultat est une expérience de lecture tactile et familière, même si toute l'interaction se déroule sur un écran. Les animations de tournage de page sont propulsées par des bibliothèques de rendu [WebGL](/glossary/webgl), le plus souvent [Three.js](/glossary/three-js), qui gèrent la géométrie complexe et les calculs d'éclairage nécessaires pour rendre l'effet convaincant.

Les PDF statiques et les documents à défilement diffusent le contenu efficacement, mais ils n'offrent aucun sens de progression ni de repère. Les lecteurs perdent le fil de leur position et décrochent plus vite. Une animation de tournage de page introduit une conscience spatiale dans la lecture numérique. Chaque tournage de page est un geste physique au résultat visible, donnant aux lecteurs le même sentiment d'avancement qu'avec une publication imprimée. C'est important pour l'engagement : les éditeurs qui passent de lecteurs de PDF statiques aux [flipbooks](/glossary/flipbook) à tournage de page rapportent systématiquement des sessions de lecture plus longues et plus de pages vues par visite. L'animation signale aussi la qualité. Un catalogue avec des tournages de page réalistes paraît plus haut de gamme qu'un autre qui se contente de défiler, ce qui influence la façon dont les lecteurs perçoivent la marque derrière le contenu.

FlipLink utilise [Three.js](/glossary/three-js) pour rendre des animations 3D réalistes de tournage de page directement dans le navigateur. Lorsque tu téléverses un PDF et crées un flipbook, chaque page devient une surface 3D qui répond aux clics de souris, aux balayages tactiles ou aux flèches du clavier avec des animations de tournage fluides. Le rendu inclut le bombement de la page, des ombres dynamiques et des effets de profondeur qui changent selon l'angle et la vitesse du tournage. FlipLink optimise cela pour la performance sur tous les appareils, afin que l'animation tourne à pleine cadence d'images sur ordinateurs, tablettes et smartphones sans nécessiter de modules d'extension ni de téléchargements. Tu peux associer le tournage de page au [défilement automatique](/glossary/auto-flip) pour des présentations sans surveillance, ou laisser les lecteurs contrôler eux-mêmes le rythme grâce aux [commandes du lecteur](/features/viewer-controls).

Les animations de tournage de page impliquent plusieurs couches de calcul exécutées simultanément en temps réel : - **Déformation de la géométrie** : le maillage de la page se courbe selon une trajectoire cylindrique qui évolue à mesure que l'utilisateur fait glisser. Le rayon de la courbe, l'angle et le point de pivot se mettent à jour à chaque image pour suivre la position du pointeur ou du toucher. - **Rendu double face** : les faces avant et arrière de la page sont texturées, de sorte que le verso de la page qui tourne affiche le bon contenu plutôt qu'une surface vierge. - **Projection d'ombre** : une ombre douce est projetée sur la page située sous celle qui tourne, ancrée à la ligne de pliure et se déplaçant avec l'animation. C'est cette ombre qui donne à l'effet son aspect tridimensionnel. - **Accélération matérielle (GPU)** : toute l'animation s'exécute sur le GPU de l'appareil via WebGL, gardant le fil JavaScript principal libre pour les autres interactions. C'est pourquoi les animations de tournage de page peuvent tourner sans heurt même sur des téléphones mobiles de milieu de gamme. - **Qualité adaptative** : FlipLink détecte les capacités de l'appareil et ajuste la qualité des ombres et la résolution des textures pour maintenir une cadence d'images constante.

**« Les animations de tournage de page ne sont que des transitions CSS. »** Des effets de retournement 2D simples construits avec des transformations CSS existent, mais ils manquent du réalisme d'un véritable tournage de page 3D. Les retournements CSS font pivoter la page comme une carte autour d'un axe plat, tandis que les tournages de page 3D simulent le bombement et la flexion du papier. La différence est immédiatement visible et affecte la qualité perçue. **« Ils ralentissent les appareils mobiles. »** Le rendu WebGL moderne est accéléré par le GPU et spécifiquement conçu pour le matériel mobile. Une animation de tournage de page bien optimisée ajoute un surcoût minimal par rapport au chargement des images de page elles-mêmes. Le goulot d'étranglement est presque toujours la vitesse de téléchargement des images, et non la performance de rendu. **« Les lecteurs préfèrent le défilement. »** Cela dépend du type de contenu. Pour les articles longs ou la documentation, le défilement fonctionne bien. Pour les catalogues, magazines, brochures et portfolios, l'animation de tournage de page surpasse le défilement car le contenu est conçu sous forme de pages distinctes destinées à être vues une à la fois.

L'animation de tournage de page transforme un PDF plat en une expérience de lecture interactive qui retient l'attention, signale la qualité et offre aux lecteurs un moyen naturel de naviguer page par page dans le navigateur.