Rotate image

#1 · July 1, 2020, 6:51 pm

Hola,

Tengo unas dudas sobre rotaciones en el siguiente código:

CreateEmptyObject [mycss]
SetVar [mycss("fill")] "green"
SetVar [mycss("transform-origin")] "top left"
SetVar [mycss("transform")] "rotate(90deg)"


neoAnimateTo "Rectangle1" [mycss] 6 0 "none" "easenone"

Intento poner en origen de rotación "top left" (superior izquierdo) para que el objeto rote por ese punto (esquina) y no funciona. Si lo pongo en el cuadro de propiedades entonces sí.

La segunda duda es cómo hago para que el objeto gire continuamente. He intentado con +=rotate(90deg) pero no funciona.

Saludos,

Roger Rey

#2 · July 1, 2020, 10:42 pm

@rrey inténtalo así. Tal y como lo has puesto estás animado también el eje de rotación:

CreateEmptyObject [mycss]
SetVar [mycss("transform-origin")] "top left"
neoSetProperties "Rectangle1" [mycss] 0

CreateEmptyObject [mycss2]
SetVar [mycss2("fill")] "green"
SetVar [mycss2("transform")] "rotate(90deg)"
neoAnimateTo "Rectangle1" [mycss2] 6 0 "none" "easenone"

Tengo pendiente crear un plugin más avanzado de animación que incluya número de repetciones (loops).
Actualmente puedes utilizar las animaciones CSS para ello. Puedes echar un vistazo a los tres videos de YouTube sobre animation properties.

Saludos.

#3 · July 2, 2020, 12:17 am

Gracias @luishp.

Muy interesante con neoSetProperties puedo aplicar los estilos en un tiempo específico también.

Estoy estudiando las posibilidades de a animación, ya había visto todos los interesantes vídeos sobre el tema. Ahora estoy intentando buscarle aplicaciones concretas, y por eso estoy creando algunos tutoriales con las posibilidades que yo veo. Estoy empezando con esto: https://sites.google.com/genmagic.net/creacionconvisualneo/creacion-animaciones. Y voy a incluir animación de color, rotación, animación interactiva...

Iré haciendo tutoriales poco a poco sobre temas concretos de aplicación sobre todo de tipo educativo con las diferentes posibilidades de VisualNeo.

Saludos,

Roger

Darbdenral has reacted to this post.

#4 · July 2, 2020, 1:33 am

He traducido lo que dijiste en español a mi lengua materna, el francés. Lo que vas a hacer es muy interesante. No puedo esperar para ver eso.

Gracias,
Roger :)

#5 · July 2, 2020, 8:47 am

Hola @rocote gracias. Es la forma que tengo para ir aprendiendo y que no se me olvide. Acabo de añadir una explicación con animaciones de lo que me ha enseñado @luishp .

Seguimos...

#6 · July 2, 2020, 10:16 am

@rrey estás haciendo un trabajo fantástico.
Muchas gracias!!

#7 · July 2, 2020, 1:12 pm

Thank you to share your work rrey !

#8 · July 3, 2020, 6:50 pm

Hola rrey, Fui a tu página y estudié algunas animaciones. Pensé en enviarte algo que produje con VisualNeo Web.
Coloqué el comando "AnimateObject" con los parámetros en proyecto y Evento para que la aplicación se ejecute inmediatamente sin tener que presionar el botón del mouse. Creo que es mejor así.
Aquí, aprovecho esta oportunidad para agradecerles por el tiempo que le dan a otros por todo el trabajo que hacen. Lo que damos se convierte en una extensión de nuestro conocimiento. Y lo haces muy bien.

Te envío algo que produje usando una capa diferente para que el cohete vaya detrás de la ventana del chico.

He aquí el enlace:

¡Muchas gracias!

Roger :)

#9 · July 4, 2020, 6:09 pm

Muy interesante @rocote. El uso de capas da muchas posibilidades.

Seguimos

#10 · July 4, 2020, 6:13 pm

Hola @luishp,

Estoy intentando encadenar animaciones basadas en @keyframe pero solo funciona una y las dos son correctas:

.animacionLogo {
     animation-duration: 5s;
     animation-name: animLogo;
     animation-iteration-count: infinite;
     animation-delay: 0s
   }



.animacionLogo2 {
     animation-duration: 1s;
     animation-name: animLogo2;
     animation-iteration-count:  infinite;
     animation-delay: 6s
   }


@keyframes animLogo{
     from {

         transform: rotateY(0deg);
         
     }
     50%{
         
         transform: rotateY(180deg);
        
     } to {
         
         transform: rotateY(360deg);
        
         }


 }

@keyframes animLogo2{
     from {

         transform: rotateX(0deg);

     }
     50%{

         transform: rotateX(180deg);

     } to {

         transform: rotateX(360deg);

         }


 }

Uso en un botón las funciones:

AddClass "manecilla" "animacionLogo"

AddClass "manecilla" "animacionLogo2"

¿Donde puede estar el error?

Saludos,

Roger Rey

#11 · July 4, 2020, 6:15 pm

#12 · July 4, 2020, 7:57 pm

@rrey, la forma correcta de encadenar animaciones en CSS sería así:

.animacionLogo {
     animation-duration: 5s,1s;
     animation-name: animLogo,animLogo2;
     animation-iteration-count: infinite,infinite;
     animation-delay: 0s,6s
   }
@keyframes animLogo{
     from {
         transform: rotateY(0deg);
     }
     50%{
         transform: rotateY(180deg);
     } to {
         transform: rotateY(360deg);
         }
 }
@keyframes animLogo2{
     from {
         transform: rotateX(0deg);
     }
     50%{
         transform: rotateX(180deg);
     } to {
         transform: rotateX(360deg);
     }
 }

Se especifica en una única clase, separando por comas la primera de la segunda animación.
Saludos!

#13 · July 4, 2020, 8:06 pm

Gracias luis!

#14 · January 3, 2021, 5:32 pm

Hola a todos y feliz año nuevo.

Tengo una duda sobre cómo obener los grados de rotación de una imagen. He probado con varias instrucciones pero no me funcionan o no he dado con froma correcta.

Saludos,

Roger Rey

#15 · January 3, 2021, 7:18 pm

@rrey echa un vistazo aquí:
https://stackoverflow.com/questions/19574171/how-to-get-css-transform-rotation-value-in-degrees-with-javascript

Saludos

#16 · January 5, 2021, 1:05 pm

@luishp gracias por la info.

Rotate image - Forum

Rotate image