Programmation

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 ...

Grâce aux précédents billets de la série, vous savez installer la bibliothèque BGRABitmap, bâtir un logiciel de test avec la prise en charge de la vitesse d'affichage et de l'opacité, ainsi qu'implémenter quelques transitions simples. Dans ce billet, nous étudierons des techniques plus complexes mettant en œuvre des masques afin de produire des transitions encore plus attrayantes.

La notion de masque

Avec les méthodes employées jusqu'à présent, nous ne pouvons que superposer ...

Il ne faudrait pas croire que les transitions qui ne demandent qu'une ligne de calcul sans utiliser des procédés plus complexes comme les calques soient limitées à quelques déplacements triviaux. Les quelques exemples qui suivent montrent qu'il n'en est rien et qu'un peu d'imagination permet de rapidement élargir sa palette d'outils !

Les pouvoirs de l'imagination

L'inversion des images de travail

Une première idée est d'inverser l'image d'origine et celle ...

Après les transitions concernant le recouvrement, nous allons nous pencher sur d'autres types qui nous poseront des problèmes différents... Aujourd'hui, les transitions qui poussent une image hors du champ d'affichage pour en introduire une autre seront à l'honneur.

Pousser des images hors du champ d'affichage

Pour le moment, nous allons nous contenter d'explorer d'autres possibilités tout aussi faciles à mettre en œuvre que les précédentes. Cependant, il nous faudra modifier ...

Dans ce billet, nous allons poursuivre notre exploration des effets de transition par recouvrement en compliquant très légèrement les calculs...

Le recouvrement (suite)

Le recouvrement OverBottomRight

Le recouvrement OverBottomRight, comme ceux qui suivent, utilise une diagonale pour la translation. Cela signifie simplement qu'il faut modifier dans le même mouvement les variables locales LX et LY.

OverBottomRight suivra le schéma ci-après : ...