Flex - Effet Scale3D

introduction

La classe Scale3D met à l'échelle un objet cible en trois dimensions autour du centre de transformation. Une échelle de 2,0 signifie que l'objet est agrandi d'un facteur 2, et une échelle de 0,5 signifie que l'objet est réduit d'un facteur 2.

Déclaration de classe

Voici la déclaration pour spark.effects.Scale3D classe -

public class Scale3D
   extends AnimateTransform3D

Propriétés publiques

Sr.Non	Propriété et description
1	scaleXBy : Number Facteur de mise à l'échelle de l'objet dans la direction x.
2	scaleXFrom : Number Le facteur d'échelle de départ dans la direction x.
3	scaleXTo : Number Le facteur d'échelle de fin dans la direction x.
4	scaleYBy : Number Facteur de mise à l'échelle de l'objet dans la direction y.
5	scaleYFrom : Number Le facteur d'échelle de départ dans la direction y.
6	scaleYTo : Number Le facteur d'échelle de fin dans la direction y.
sept	scaleZBy : Number Facteur de mise à l'échelle de l'objet dans la direction z.
8	scaleZFrom : Number Le facteur d'échelle de départ dans la direction z.
9	scaleZTo : Number Le facteur d'échelle de fin dans la direction z.

Méthodes publiques

Sr.Non	Méthode et description
1	Scale3D(target:Object = null) Constructeur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

spark.effects.AnimateTransform3D
spark.effects.AnimateTransform
spark.effects.Animate
mx.effects.Effect
flash.events.EventDispatcher
Object

Exemple d'effet Flex Scale3D

Suivons les étapes suivantes pour vérifier l'utilisation de Scale3D 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[
          private function applyScaleProperties():void {
            scaleEffect.play();
         }
     ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:Scale3D id = "scaleEffect" target = "{imageFlex}"
        scaleXFrom = "1.0" scaleXTo = "{Number(scalingX.text)}"
        scaleYFrom = "1.0" scaleYTo = "{Number(scalingY.text)}"
        scaleZFrom = "1.0" scaleZTo = "{Number(scalingZ.text)}"
      />
   </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 = "scale3DPanel" title = "Using Scale3D Effect"
            width = "500" height = "300">
               
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />
            </s:layout>

            <s:VGroup top = "10" left = "15">
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Scale By X:" width = "70" />
                  <s:TextInput id = "scalingX" text = "1.4" width = "50" />
               </s:HGroup>
                  
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Scale By Y:" width = "70" />
                  <s:TextInput id = "scalingY" text = "1.4" width = "50" />
               </s:HGroup>

               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Scale By Z:" width = "70" />
                  <s:TextInput id = "scalingZ" text = "1.4" width = "50" />
               </s:HGroup>
                  
               <s:Button label = "Apply Properties" click = "applyScaleProperties()" />
            </s:VGroup>

            <s:Image id = "imageFlex"
               source = "http://www.tutorialspoint.com/images/flex-mini.png" />
         </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 ]

↰ Previous page