parallel layout animations

36 views
Skip to first unread message

Thomas

unread,
May 25, 2018, 10:32:07 PM5/25/18
to CodenameOne Discussions
I have a form with some component defined as containers containing two components that animate one relative to the other on user interaction. 
This animation is handled with a ComponentAnimation (on layout and style) on the container (same as in TextComponent).
But the thing is that when one of my component is animated, if the user interact with another component, the animation of the later is bugged (the animation is incomplete in this case) and delayed after the animation of the first one has ended. 
I tested with two TextComponents and the result is the same (so this is not related to my custom component).
How can I make the AnimationManager to play my animations immediately (rather than queing them)? 

Here is a small video to show you what I am talking about:


As long as I interact with the fields one by one (by clicking, for example, on my onoffswitch component to make the field component lost focus and trigger the animation), the animation is fine. But when I click on "First Name" and then on "Last Name" (at 10s of the video), you can see that the "Last Name" animation is waiting for the "First Name" one to end and is bugged (the "Last Name:" label is "immediately" placed at top without the position change animation)

Shai Almog

unread,
May 26, 2018, 12:23:38 AM5/26/18
to CodenameOne Discussions
These animations are meant to be much faster to hide some of those things.
What's happening is two layout animations running in parallel without knowledge of each other and the second one essentially drops all its frames as it expired.

What's happening is this:

- We get an event of leaving the text field so we initiate a layout animation which starts immediately
- We get a second event of a new animation so we start that animation immediately but it's stuck in a queue behind the layout animation
- By the time the second animation gets to run it expired

A workaround would be to flush the animation queue before beginning an animation but it might make field transitions slower and I'm not sure that's what users want.

Thomas

unread,
May 26, 2018, 9:38:48 AM5/26/18
to CodenameOne Discussions
What I want is to be able to force some animations to run in parallel when I know that they won't conflict with eachother.
But I looked at the AnimationManager class and it looks like it is not possible yet (the AnimationManager only have a serial animation queue). 
So it looks like I would have to override it and create my own AnimationManager for this to work as I want ;)

Shai Almog

unread,
May 26, 2018, 11:56:26 PM5/26/18
to CodenameOne Discussions
Your definition of conflict isn't accurate. Conflict is far more complicated than most assume since layout and validation can break components in a different hierarchy.

That's why we introduced the animation manager. We also have ComponentAnimation.compoundAnimation() which allows you to run animations in parallel and handles the mutation portion (which has no visual implication) in sequence to prevent collision.
Reply all
Reply to author
Forward
0 new messages