Tous les billets

Nous avons vu dans le précédent billet comment utiliser les formes géométriques, soit seules, soit combinées avec d'autres.

Évidemment, nous pouvons compliquer à loisir nos transitions, même à partir de figures simples comme les triangles, afin d'obtenir des transitions vraiment spectaculaires. Dans la portion de code qui suit, nous définissons une surface composée de nouveau de quatre triangles, mais en suivant les données et règles suivantes :

• un triangle isocèle

...

Jusqu'à présent, nous n'avons utilisé que les rectangles comme comme outils de construction du masque. Non seulement il est possible d'imaginer de nouvelles transitions avec eux, mais d'autres formes géométriques aussi complexes que voulu peuvent créer des effets intéressants.

Utilisation des formes géométriques

Les rectangles

Une première idée serait de faire apparaître un rectangle au centre de l'image d'origine et de le faire croître pour découvrir l'image ...

Nous allons continuer à explorer quelques transitions qui serviront de base à notre composant. Aujourd'hui, ce sont les côtés des images qui vont nous intéresser.

Jeu avec les côtés de l'image

Parmi les transitions à définir grâce aux masques, celles qui exploitent les côtés des images sont parmi les plus faciles à implémenter. Nous définirons ainsi quatre nouvelles transitions : HorizontalExpand, HorizontalShrink, VerticalExpand et VerticalShrink. Avec ces transitions, ...

Nous passerons rapidement sur la présentation des contractions puisqu'elles forment un ensemble de transitions inverses de celles qui ont été étudiées dans le billet sur les expansions. Cette fois-ci, c'est l'image d'origine qui disparaîtra peu à peu dans un rectangle de plus en plus petit.

Les contractions de rectangles

Une seule de ces transitions sera un peu plus détaillée : LeftTopShrink. Même si, comme nous l'avons déjà vu, il ne s'agit qu'une des possibilités, le ...

Comme nous avons vu ce qu'est un masque et comment nous en servir, nous allons explorer les possibilités qu'offre cette technique. En effet, si nous avons envisagé le cas d'une croix, nous pouvons bien entendu partir d'une ellipse, d'un rectangle ou d'une forme encore plus complexe.

Une première série de transitions aura ainsi trait à l'expansion progressive d'un rectangle qui remplacera l'image d'origine par celle de destination ou découvrira cette dernière.

Les expansions ...