Animation latérale de l’interface utilisateur (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Utilisez les animations latérales de l’interface utilisateur pour afficher ou masquer l’interface utilisateur qui part du bord de l’écran. L’utilisateur ou l’application peuvent afficher cette interface utilisateur. Ces animations s’utilisent principalement sur les contrôles personnalisés ; les contrôles existants tels que AppBar ont des animations de la bibliothèque intégrées pour l’interface utilisateur latérale et vous pouvez bénéficier du comportement animé simplement en incluant ces contrôles dans votre interface utilisateur.
L’interface utilisateur peut se superposer à l’application ou être intégrée à sa surface principale. Si l’interface utilisateur fait partie de la surface de l’application principale, vous devrez peut-être redimensionner le reste de l’application pour faire de la place à la nouvelle interface utilisateur lorsque celle-ci apparaît.
.png "Diagramme basique d’un élément latéral")
Cet ensemble d’animations comprend les API suivantes :
Il existe deux types d’éléments latéraux, chacun d’entre eux disposant de leur propre ensemble d’API d’animation : l’interface utilisateur latérale et l’interface utilisateur du volet.
La vidéo suivante illustre les animations qui affichent et masquent l’interface utilisateur latérale :
La vidéo suivante illustre les animations qui affichent et masquent les panneaux :
- Utilisez les animations d’interface utilisateur latérale avec l’interface utilisateur latérale plus petite si vous souhaitez animer un contrôle personnalisé dont le comportement est semblable à AppBar ou autre contrôle similaire. Vous souhaiterez peut-être aussi définir une zone/surface d’interface utilisateur pour les erreurs et les avertissements qui résultent d’actions dans votre application. Si vous êtes concerné par ce scénario, assurez-vous de lire les Recommandations sur les menus volants ; il est possible que l’interface utilisateur latérale ne convienne pas à votre scénario.
- Utilisez les animations d’interface utilisateur du panneau avec l’interface utilisateur latérale qui est généralement plus grande et qui couvre une partie plus importante de la fenêtre de l’application, par exemple le clavier logiciel.
.png "Illustration montrant la différence en taille entre l’interface utilisateur latérale et une interface utilisateur de volet")
Important Le contrôle barre de l’application fourni par Windows inclut les animations latérales de l’interface utilisateur. Si vous utilisez ce contrôle, vous n’avez pas besoin de fournir vous-même ces animations.
Pour utiliser ces animations, vous devez connaître les éléments suivants :
L’objet qui apparaîtra ou disparaîtra par glissement.
La distance (décalage) sur laquelle l’objet glissera. Il s’agit de la distance finale entre le bord intérieur de l’interface utilisateur et le bord de l’écran.
.png "Illustration de la mesure appelée décalage")
Comportement des animations latérales dans les contrôles Windows Runtime par défaut
Pour inclure une interface utilisateur latérale, la méthode recommandée consiste à ajouter une AppBar, qui s’appliquera automatiquement à toutes les interactions et transitions appropriées. Pour plus d’informations, voir Ajout de barres d’application.
Les objets volants (Flyout, Menu ou SettingsFlyout) ont également des animations intégrées, mais ne s’appuient pas réellement sur une interface utilisateur latérale. Les menus volants sont associés au contexte à l’origine de leur affichage, et non au bord de la fenêtre d’application. Vous pouvez utiliser les menus volants pour une interface utilisateur appelée depuis une AppBar, mais une fois encore il ne s’agit pas d’une interface utilisateur latérale pure. Pour plus d’informations, voir Ajout de menus volants et Animation de l’interface utilisateur contextuelle.
Autres ressources
Pour les exemples de code qui illustrent l’utilisation des API des animations latérales de l’interface utilisateur, voir l’exemple de la bibliothèque d’animations HTML.
Pour les meilleures pratiques de conception de l’utilisation de ces animations, voir Recommandations et liste de vérification sur les animations latérales de l’interface utilisateur.