Flex - Efecto Rotate3D

Introducción

La clase Rotate3D rota un objeto de destino en tres dimensiones alrededor de los ejes x, y o z. La rotación ocurre alrededor del centro de transformación del objetivo.

Declaración de clase

A continuación se muestra la declaración de spark.effects.Rotate3D clase -

public class Rotate3D
   extends AnimateTransform3D

Propiedades publicas

No Señor	Descripción de propiedad
1	angleXFrom : Number El ángulo de rotación inicial del objeto de destino alrededor del eje x, expresado en grados.
2	angleXTo : Number El ángulo final de rotación del objeto de destino alrededor del eje x, expresado en grados.
3	angleYFrom : Number El ángulo de rotación inicial del objeto de destino alrededor del eje y, expresado en grados.
4	angleYTo : Number El ángulo final de rotación del objeto de destino alrededor del eje y, expresado en grados.
5	angleZFrom : Number El ángulo de rotación inicial del objeto de destino alrededor del eje z, expresado en grados.
6	angleZTo : Number El ángulo final de rotación del objeto de destino alrededor del eje z, expresado en grados.

Métodos públicos

No Señor	Método y descripción
1	Rotate3D(target:Object = null) Constructor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de efecto Flex Rotate3D

Sigamos los siguientes pasos para verificar el uso de Rotate3D Effect en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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 applyRotateProperties():void {
            rotateEffect.play();
         }
      ]]>
   </fx:Script>

   <fx:Declarations>
      <s:Rotate3D id = "rotateEffect" target = "{imageFlex}"
         angleXFrom = "0.0" angleXTo = "{Number(rotateX.text)}"
         angleYFrom = "0.0" angleYTo = "{Number(rotateY.text)}"
         angleZFrom = "0.0" angleZTo = "{Number(rotateZ.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 = "rotate3DPanel" title = "Using Rotate3D 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 = "Rotate By X:" width = "70" />
                  <s:TextInput id = "rotateX" text = "45.0" width = "50" />
               </s:HGroup>

               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Rotate By Y:" width = "70" />
                  <s:TextInput id = "rotateY" text = "15.0" width = "50" />
               </s:HGroup>
                  
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Rotate By Z:" width = "70" />
                  <s:TextInput id = "rotateZ" text = "15.0" width = "50" />
               </s:HGroup>

               <s:Button label = "Apply Properties"
                  click = "applyRotateProperties()" />
            </s:VGroup>

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

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page