Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Exemple Silverlight 3 : Projection 3D

Silverlight 3 est arrivé avec son lot de nouveautés, toutes sont intéressantes et poussent encore plus loin la limite du possible. Dans le même temps la convergence avec WPF se fait de plus en plus forte.

Aujourd'hui je vais vous parler de la projection 3D. Ce qu'on appelle de la "2,5D" car ce n'est déjà plus de la 2D mais ce n'est pas encore de la vraie 3D (qui implique la manipulation d'objets vectoriels 3D comme WPF sait le faire). Sous Silverlight 3, la 2,5D est un groupe de transformation qui s'ajoute à celui déjà présent (et permettant les translation, le skew, les rotations, etc). Ce nouveau groupe se présente globalement de la même façon (en tout cas sous Blend 3) mais les effets sont différents puisqu'il s'agit de créer des effets de perspectives 3D avec les objets 2D de Silverlight.

A quoi cela peut-il bien servir ?

A plein de choses ! Au niveau graphique et visuel s'entend.

Pour illustrer tout cela voici un exemple qui montre comment on peut animer une petite fiche d'information qui donne l'impression d'avoir deux faces, comme une carte de jeu par exemple : Exemple SL3 Projection. Vous pouvez aussi directement jouer avec l'exemple qui s'affiche ci-dessous (je teste en même temps l'excellent plugin Silverlight pour BlogEngine) :

[silverlight:source=/SLSamples/3DProjection/3DProjection.xap;width=350;height=446]

Je me suis inspiré de l'exemple de Jesse Liberty (que j'appelle affectueusement Droopy en raison de la tonalité de sa voix) un grand fan de Silverlight chez MS qui propose des tas de tutors et autres vidéos. En revanche Jesse est un gars qui travaille un peu "à l'ancienne", et pour arriver au résultat il faut deux vidéos d'explications car tout est tapé à la main en XAML. Cela a l'avantage de bien détailler l'astuce utilisée, mais ce n'est pas ce que je vise. Personnellement je veux arriver à tout faire sous Blend car on ne forme pas des infographistes en leur expliquant les arcanes de XAML mais en leur montrant comment on arrive au résultat interactivement. Et justement je prépare une série de vidéos de formation autant pour les développeurs que pour les infographistes...

J'ai donc totalement refait l'exemple sous Blend 3, sans une ligne de C# ni aucune de XAML tapée à la main (car forcément, il y a du XAML mais c'est Blend qui s'en occupe). J'arrive d'ailleurs à obtenir le même effet que Jesse en deux storyboards au lieu de 3 et en utilisant un Behavior pour déclencher les animations depuis les boutons au lieu de code behind C#. Je me suis même offert le luxe d'utiliser les nouveaux modes de EaseIn/Out qui permettent d'obtenir des mouvements plus "organiques" (effets de rebonds ou d'élastique par exemple).

Comme il n'y a rien dans ce projet d'autre que deux timelines, plutôt qu'un long discours je vous propose de charger le projet exemple (VS 2008 avec toutes les extensions Silverlight 3 ou bien mieux, ouvrez le projet directement dans Blend 3) : 3DProjection.zip (61,42 kb)

En deux mots, l'astuce consiste à avoir deux fiches identiques au niveau de leur forme extérieure. L'une est la face A, l'autre la face B. Le contenu des deux fiches est totalement libre.

Au début la fiche A est visible "à plat", "normalement" donc. Sur l'appui du bouton "aide" (simple exemple) l'animation FlipToBack est lancée. Elle consiste à appliquer une transformation perspective sur l'axe Y pour donner l'impression que la fiche tourne. Pour que la fiche B ne soit pas visible durant cette phase, elle a subit en début d'animation une simple translation pour l'amener en dehors de l'espace de l'application (par exemple en position 1000 sur l'axe Y).

Au moment où la fiche A passe à 90 degrés, c'est à dire quand elle est vue par la tranche, et comme elle n'a aucune épaisseur, elle disparait visuellement. C'est à ce moment précis que la magie s'opère : on fait faire une rotation à la fiche B pour qu'elle soit sur sa tranche aussi et on l'amène à la place de la fiche A (en annulant la translation sur Y de B) et dans le même temps on fait une translation de 1000 sur Y de la fiche A. Les keyframes utilisées pour cette substitution sont de type HoldIn, c'est à dire qu'il n'y a pas de transition douce avec l'état précédant, tout est instantané. Maintenant que la fiche B est à la place de la fiche A, on peut continuer l'animation de B pour qu'elle s'affiche. Le "spectateur" est dupé : durant la microseconde où la fiche A était vue par la tranche nous lui avons substitué la fiche B vue sous le même angle. Le début de l'animation fait tourner A, alors que la seconde partie de l'animation fait tourner B, mais on a l'impression visuelle que c'est la même fiche qui tourne et qu'on en découvre le dos...

Pour revenir de la page B à la page A, il suffit de créer une seconde timeline qui reprend le même principe mais qui fait les choses dans l'autre sens...

Krafty non ?

Amusez vous bien avec l'exemple et surtout...

Stay tuned !

blog comments powered by Disqus