Remonter à Guide de prise en main FireMonkey - Utilisation des effets d'image et d'animation

Sommaire

1 Etape 1 : Utilisation de TFloatAnimation pour changer une valeur de propriété flottante
2 Etape 2 : Changement de la couleur en ajoutant TColorAnimation
3 Etape 3 : Changement de l'image en utilisant TBitmapAnimation
4 Voir aussi
- 4.1 Exemples de code

FireMonkey fournit beaucoup de types différents d'effets d'animation intégrés qui modifient la valeur de la propriété sélectionnée dans le temps.

Exemples d'effets d'animation :

Type de la propriété	Classe d'effets d'animation
Toute propriété qui est un entier.	TIntAnimation
Toute propriété qui est un nombre réel.	TFloatAnimation
Emplacement du composant défini par une propriété TBounds.	TRectAnimation
Toute propriété de valeur chaîne ou entier qui contient une couleur.	TColorAnimation
Un dégradé (type TGradient)	TGradientAnimation
Une image bitmap	TBitmapAnimation

Dans ce tutoriel, vous utiliserez plusieurs effets d'animation de base dans une application FireMonkey.

Etape 1 : Utilisation de TFloatAnimation pour changer une valeur de propriété flottante

Dans FireMonkey, toute propriété qui utilise des nombres flottants peut être modifiée avec les effets d'animation par le biais de TFloatingAnimation. Ainsi, nous allons changer quelques valeurs en utilisant les effets d'animation.

Créez une nouvelle application en utilisant :
- Fichier > Nouveau > Application multi-périphérique > Application vide
Placez un composant TRectangle sur le Concepteur de fiches. Pour cela, tapez rec dans la zone de recherche de la Palette d'outils, puis double-cliquez sur le composant TRectangle :

Sélection d'un composant TRectangle sur la Palette d'outils

Composant TRectangle sur le Concepteur de fiches
Dès que vous placez un composant TRectangle sur le Concepteur de fiches, vous apercevez plusieurs propriétés ayant une icône pellicule () dans l'inspecteur d'objets. L'icône pellicule indique que ces propriétés de composant peuvent être animées.

Voici quelques propriétés typiques (en fonction du composant) que vous pouvez changer par le biais de TFloatingAnimation
- Height
- Position.X
- Position.Y
- RotationAngle
- RotationCenter.X
- RotationCenter.Y
- Scale.X
- Scale.Y
- StrokeThickness
- XRadious
- YRadious
- Width
Pour modifier la valeur d'une propriété, cliquez sur le menu déroulant de la propriété RotationAngle, puis sélectionnez Créer un nouveau TFloatAnimation.
Le nouveau composant TFloatAnimation est à présent créé. Vous voyez que, dans le volet Structure, FloatAnimation1 est défini en tant qu'enfant de Rectangle1.

Remarque : Sachez que l'effet des composants à effet d'animation s'applique au composant parent.

L'inspecteur d'objets montre les propriétés du composant FloatAnimation1. Changez les propriétés suivantes, comme décrit dans le tableau suivant :

Propriété	Valeur	Description
Duration	5	La durée (en secondes) de l'animation, de la valeur de départ à la valeur d'arrêt.
Enabled	True	L'animation démarre quand l'application démarre.
Loop	True	Répète l'animation indéfiniment.
StopValue	360	Termine l'animation de cette propriété quand elle atteint cette valeur.

Propriétés de FloatAnimation1

PropertyName est une autre propriété importante qui est définie automatiquement. Dans ce cas, cette propriété est définie sur RotationAngle. Par conséquent, cette animation affecte la valeur de la propriété RotationAngle de son composant parent.

Exécutez l'application. Le composant rectangle pivote maintenant sur la fiche :
Vous pouvez animer n'importe quelle propriété numérique en suivant les mêmes étapes.

Etape 2 : Changement de la couleur en ajoutant TColorAnimation

Comme mentionné au début de ce tutoriel, FireMonkey comprend beaucoup d'effets d'animation intégrés. Vous allez maintenant appliquer une animation de couleur pour changer la couleur du rectangle, en plus de la rotation décrite à l'étape 1.

Sélectionnez le composant TColorAnimation dans la Palette d'outils. Pour cela, tapez anim dans la zone de recherche de la Palette d'outils, puis double-cliquez sur TColorAnimation :

Le composant TColorAnimation se trouve maintenant sur le volet Structure.
TColorAnimation1 est défini en tant qu'enfant de Form4 tandis que FloatAnimation1 est défini en tant qu'enfant de Rectangle1 (comme traité à l'étape 1). Faites glisser ColorAnimation1 et déposez-le sur Rectangle1. ColorAnimation1 est à présent défini en tant qu'enfant de Rectangle1, et ColorAnimation1 affecte donc Rectangle1:

L'inspecteur d'objets montre les propriétés du composant TColorAnimation1. Changez les propriétés suivantes, comme décrit dans le tableau suivant.

Propriété	Valeur	Description
PropertyName	Fill.Color	Nom de la propriété à animer.
Enabled	True	L'animation démarre quand l'application démarre.
Duration	3	La durée (en secondes) de l'animation, de la valeur de départ à la valeur d'arrêt.
Loop	True	Répète l'animation indéfiniment.
AutoReverse	True	Anime en arrière après avoir animé en avant.
StopValue	Red	Termine l'animation de cette propriété quand elle atteint cette valeur.

Propriétés de ColorAnimation1

Exécutez l'application. Le composant rectangle pivote maintenant sur la fiche et sa couleur est passée au rouge :

Etape 3 : Changement de l'image en utilisant TBitmapAnimation

La dernière étape de ce tutoriel est l'utilisation d'une animation bitmap avec un composant image.

Créez une nouvelle application FireMonkey, comme à l'étape 1 de ce tutoriel.
Placez un composant TImage (Image1) sur le Concepteur de fiches.
Placez un composant TBitmapAnimation sur le Concepteur de fiches. A l'aide de la vue Structure, définissez ce composant (BitmapAnimation1) en tant qu'enfant de Image1 :

Définissez les propriétés du BitmapAnimation1 sur l'inspecteur d'objets, comme suit :

Propriété	Valeur	Description
PropertyName	Bitmap	Nom de la propriété à animer.
Enabled	True	L'animation démarre quand l'application démarre.
Duration	10	La durée (en secondes) de l'animation, de la valeur de départ à la valeur d'arrêt.
Loop	True	Répète l'animation indéfiniment.
AutoReverse	True	Anime en arrière après avoir animé en avant.
StartValue		Démarre l'animation de cette propriété à partir de cette image bitmap.
StopValue		Termine l'animation de cette propriété quand elle atteint cette image bitmap.

Définissez les propriétés StartValue et EndValue. Ces propriétés contiennent l'image initiale et l'image finale. Cliquez sur le menu Edition, puis sélectionnez vos images favorites au moyen de l'éditeur de bitmaps.
Exécutez l'application. Ces deux images sont maintenant animées dans le temps :