Flex - Effet de fondu
introduction
L'effet Fondu anime la propriété alpha d'un composant. S'il est joué sur un objet ayant la propriété visible comme faux et défini pour animer l'alpha de zéro à une valeur différente de zéro, il définira l'objet visible sur true comme effet secondaire de son atténuation.
Déclaration de classe
Voici la déclaration pour spark.effects.Fade classe -
public class Fade
extends Animate
Propriétés publiques
Sr.Non | Propriété et description |
---|---|
1 | alphaFrom : Number Valeur initiale de la propriété alpha, entre 0,0 et 1,0, où 0,0 signifie transparent et 1,0 signifie totalement opaque. |
2 | alphaTo : Number Valeur finale de la propriété alpha, entre 0,0 et 1,0, où 0,0 signifie transparent et 1,0 signifie totalement opaque. |
Méthodes publiques
Sr.Non | Méthode et description |
---|---|
1 | Fade(target:Object = null) Constructeur. |
Méthodes héritées
Cette classe hérite des méthodes des classes suivantes -
- spark.effects.Animate
- mx.effects.Effect
- flash.events.EventDispatcher
- Object
Exemple d'effet Flex Fade
Suivons les étapes suivantes pour vérifier l'utilisation de Fade Effect dans une application Flex en créant une application de test -
Étape | La description |
---|---|
1 | Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application . |
2 | Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé. |
3 | Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences. |
Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function btnFadeIn_clickHandler
(event:MouseEvent):void {
fadeIn.play();
}
protected function btnFadeOut_clickHandler
(event:MouseEvent):void {
fadeOut.play();
}
]]>
</fx:Script>
<fx:Declarations>
<s:Fade id = "fadeIn" duration = "2000" target = "{imageFlex}"
alphaFrom = "0" alphaTo = "1" />
<s:Fade id = "fadeOut" duration = "2000" target = "{imageFlex}"
alphaFrom = "1" alphaTo = "0" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Effects Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "fadePanel" title = "Using Fade Effect"
width = "500" height = "300" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:Image id = "imageFlex"
source = "http://www.tutorialspoint.com/images/flex-mini.png" />
<s:HGroup>
<s:Button id = "btnFadeOut" label = "Fade Out"
click = "btnFadeOut_clickHandler(event)" />
<s:Button id = "btnFadeIn" label = "Fade In"
click = "btnFadeIn_clickHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>
Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]