ForumHFR · Redface 2 · #660

Animation de swipe entre onglets

Le rendu actuel (le nouvel onglet « pop » centré au lâcher) ne convient pas. Voici 4 manières d'animer le changement d'onglet — touche une variante, puis glisse l'écran ou utilise les flèches pour la sentir. Le but : trancher le feel attendu.

Cyan

lent rapide

Glisse horizontalement sur l'écran pour swiper.

Ce que disent les variantes

Pop centré (actuel) — l'ancien contenu suit le doigt, le nouveau apparaît d'un coup, centré. C'est le rendu rejeté : pas d'effet de continuité.
Slide au commit — au lâcher, le nouvel onglet entre depuis le côté vers lequel tu swipes, l'ancien sort. Reco Codex par défaut : AnimatedContent + slideIn/slideOut, léger, corrige le « pop ».
Page-turn (pager) — entrant et sortant visibles pendant le glissé, le contenu suit le doigt comme un carrousel. Le plus naturel ; implique HorizontalPager.
Fondu — l'ancien s'efface, le nouveau apparaît. Doux mais ce n'est pas « une page qui tourne » — sans doute hors cible pour ce retour.

Décision Codex : prototyper les 4, défaut = slide au commit ; si tu veux explicitement voir la page suivante sous le doigt dès le drag → on tranche pour HorizontalPager.

Voir le vrai effet (références Material)

Chaque variante correspond à un pattern de motion documenté. Compare le proto ci-dessus avec ces exemples réels avant de trancher.

Slide au commit → Material « Shared Axis X »

translation + fondu, direction = sens de navigation (avant = vers la gauche)

m3 · transitions (exemples animés) Styling Android · GIFs shared axis API MaterialSharedAxis AnimatedContent (Compose)

Page-turn → HorizontalPager (suivi du doigt)

entrant/sortant visibles pendant le glissé, type carrousel

Vidéo · Swipe between composables (HorizontalPager) Officiel · Pager in Compose sinasamaki · pager animations (offsetFraction)

Fondu → Material « Fade through »

fondu sortant puis entrant + léger scale ; pour contenus sans relation forte

m3 · transitions (section Fade through) Codelab · Material Motion (Android)

Pop centré → anti-pattern

le rendu actuel rejeté : aucune continuité directionnelle, pas d'équivalent Material recommandé