Animate an object with "animate class" from "a" to "b" position


Eduardo Alfaro

Hello David,

I am learning a lot with your software, thank you so much!!! I think it is really fantastic framework to develop mobile apps. Right know, I am learning because develop my own app, and I would like to animate a container from "a" position to "b" position when "swipe" event. I have tried the "animated class", and it is working as you told me in another post, but I do not know how to animate from "a" position to "b" position with "animated class" and keeping the cointainer on screen (do not want "in" or "out", just move from "a" to "b"). I can move the container with (for example): SetStyle "Container1" "left" "20px" , but I really do not know if I can animate the movement with "animated class".

Do you have any suggestion, idea, help... about how to accomplish this issue?

Thank you soooooooooo much!!!

Eduardo.


Samuel Vanneste

Hello Eduardo,
Perhaps could that example provide some idea ? http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_delay
and the related CSS tutorial http://www.w3schools.com/css/css3_animations.asp


DecSoft

Hello Eduardo,

First of all, honestly, I am not and expert in animations nor transitions effects. Animate.css, used in App Builder, is a more or less easy way to perform controls' animations just by using some prefedined CSS classes/animations, which is very good.

Taking a look at this "transform CSS" article in the Mozilla Developer Network we can view how the "transform" CSS property can help us at least in some particular cases, for example:

The above "animation" (in fact "transformation") is made by using the "SetStyle" action. Below we can view the "Click" event code of the "Transform it!" button:

And, to reset the transformation we can simply do the following:

We can enter in some problems when try to use transformations on hidden controls. However, I am prepare a couple of new application samples: "SwipeMenu2" and "SwipeMenu3". Both of them uses CSS transformations instead of CSS animations. And, additionally, the "SwipeMenu3" show how we can prepare a non scale swipe menu, which can be good, not only better (and easy) to apply the CSS transformations.

Update your App Builder copy guys in order to be ready with these new samples in addition with other minor fixes. And please, let me know if these all can help you in some way.



Eduardo Alfaro

No words to say!!! THANK YOU AGAIN!!!

Svanneste, I am learning... so your answer is priceless for me... thank you so much!!!
David, as usually, you are giving a great support!!! thank you again!!! Hope this kind of issues do not bored you... just wanted how to do things within your software!!! and maybe, helping to improve it for others!!!

BTW... Both answers are working like charm!!!! ;-D


DecSoft

Hello,

You're welcome Eduardo. And thanks to Samuel too. :)


Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.

Este sitio utiliza "cookies" útiles para almacenar sus preferencias.

Bien. Ocultar esta nota. Obtener más información.