#1 2016-06-09 08:34:12

eduardoalfaro
Member
Registered: 2016-06-08
Posts: 37

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

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.

Offline

#2 2016-06-09 11:53:48

svanneste
Member
From: Paris, France
Registered: 2015-05-27
Posts: 155

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

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

Offline

#3 2016-06-09 13:03:57

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,660
Website

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

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:

qlNhCdU.gif

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:

SetStyle "Button1" "transition" "500ms"
SetStyle "Button1" "transform" "translateX(50px) rotate(10deg) translateY(5px)"

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

SetStyle "Button1" "transform" ""

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.

Offline

#4 2016-06-09 16:12:11

eduardoalfaro
Member
Registered: 2016-06-08
Posts: 37

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

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

Offline

#5 2016-06-09 16:13:35

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,660
Website

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

Hello,

You're welcome Eduardo. And thanks to Samuel too. smile

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.