Flex - Effetto Move3D

introduzione

La classe Move3D sposta un oggetto di destinazione nelle dimensioni x, yez. Le specifiche delle proprietà x, yez dell'effetto Move3D specificano la modifica in x, yez che dovrebbe verificarsi nel centro di trasformazione attorno al quale si verifica l'effetto di trasformazione complessivo.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per spark.effects.Move3D classe -

public class Move3D
   extends AnimateTransform3D

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	xBy : Number Numero di pixel per cui modificare la posizione x del target.
2	xFrom : Number Posizione x iniziale del target, in pixel.
3	xTo : Number X finale, in pixel.
4	yBy : Number Numero di pixel in base ai quali modificare la posizione y del target.
5	yFrom : Number Posizione y iniziale del target, in pixel.
6	yTo : Number Posizione y finale del target, in pixel.
7	zBy : Number Numero di pixel per cui modificare la posizione z del target.
8	zFrom : Number Posizione z iniziale del target.
9	zTo : Number Posizione z finale del target.

Metodi pubblici

Suor n	Metodo e descrizione
1	Move3D(target:Object = null) Costruttore.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di effetto Flex Move3D

Seguiamo i seguenti passaggi per verificare l'utilizzo di Move3D Effect in un'applicazione Flex creando un'applicazione di test:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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 applyMoveProperties():void {
            moveEffect.play();
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:Move3D id = "moveEffect" target = "{imageFlex}"
         xFrom = "{imageFlex.x}" xBy = "{Number(moveX.text)}"
         yFrom = "{imageFlex.y}" yBy = "{Number(moveY.text)}"
         zFrom = "{imageFlex.z}" zBy = "{Number(moveZ.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 = "move3DPanel" title = "Using Move3D 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 = "Move By X:" width = "70" />
                  <s:TextInput id = "moveX" text = "50" width = "50" />
               </s:HGroup>
                  
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Move By Y:" width = "70" />
                  <s:TextInput id = "moveY" text = "50" width = "50" />
               </s:HGroup>
                  
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Move By Z:" width = "70" />
                  <s:TextInput id = "moveZ" text = "50" width = "50" />
               </s:HGroup>
                  
               <s:Button label = "Apply Properties" click = "applyMoveProperties()" />
            </s:VGroup>

            <s:Image id = "imageFlex"
               source = "http://www.tutorialspoint.com/images/flex-mini.png" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page