Move does not affect layout, but what if I want to?

How-to Discussions
1

I read here:
https://www.fusetools.com/docs/fuse/animations/move

that Move animations does not affect layout. I have an icon that I place way out of the screen (Y=-200) and then animate it like

<Timeline ux:Name="timeline">
    	<Change alfaProIcon.Opacity="1" Duration="0.8" Delay="0.5"/>
    	<Move Target="myIcon" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" />
    </Timeline>

So, move it 400 down. After the icon has appeared and bounced, I want a text to fade in underneath the icon. However, placing the icon and the text in a stackpanel doesnt seem to work. This is the whole page:


<Page ux:Class="SplashScreen">
	<StackPanel>
    	<AlfaPro ux:Name="myIcon" Opacity="0" Y="-200" />
    	<TextView Value="Welcome" Alignment="Center" />
	</StackPanel>
	
 	<Timeline ux:Name="timeline">
    	<Change myIcon.Opacity="1" Duration="0.8" Delay="0.5"/>
    	<Move Target="myIcon" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" />
    </Timeline>

	<WhileActive>
	        <Change timeline.TargetProgress="1" />
    </WhileActive >
</Page>

file

How would I go about this?

2

Your problem here is that the initial 200 points upward displacement of the Icon + the animated 400 points downward displacement add up to pushing your icon 200 points below where it is laid out (e.g. right above the text in the StackPanel). This is all as expected really. :slight_smile:
If you just change the initial displacement to Y="-400" then it’ll all line up (also if you change the layout position for the StackPanel, for instance by doing Alignment="Center").

However, it’ a better practice to do your layout based on where you want your components to be when you’ve reached the rest-state of the page (e.g. when all transitions have occurred).
In this case that’d mean to not have any Y-displacement on the icon at all, but just animate it onto screen when the page becomes active.

Something like this (untested code):

<Page ux:Class="SplashScreen">
    <StackPanel Alignment="Center">
        <AlfaPro ux:Name="myIcon"/>
        <TextView Value="Welcome" Alignment="Center" />
    </StackPanel>

     <WhileInactive>
        <Change myIcon.Opacity="0" Duration="0.8"/>
        <Move Target="myIcon" Y="400" Duration="1" Easing="BounceIn" />
    </WhileInactive>
</Page>

Here the layout simple describes what the page should eventually look like (ignoring all animations) and the WhileInactive trigger defines how things should be when the page is not active. This animation will then be played backwards when you activate the page.

You can find a lot more info on this in the various navigation animations and transitions in the Examples

3

Thx for input, but that doesnt work for me. There is no animation at all…

  1. WhileInactive, is never fired?
  2. Y cannot be 400, what does that mean, it goes from 400 to the real position, so it wont come in from the top?
4

The only way I could swing it was by cheating; first in the timeline, I “Move” it -400 and set Duration to 0, and then let it run as before:

<Page ux:Class="SplashScreen">
	<StackPanel ux:Name="sp1" Alignment="Center">
    	<AlfaPro ux:Name="alfaProIcon" Opacity="1" />
    	<TextView Value="Welcome to Alfa Pro" Alignment="Center" />
	</StackPanel>

 	<Timeline ux:Name="timeline">
 		<Move Target="sp1" Y="-400" Duration="0"  />
    	<Change alfaProIcon.Opacity="1" Duration="0.8" Delay="0.5"/>
    	<Move Target="sp1" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" />
    </Timeline>

	<WhileActive>
	        <Change timeline.TargetProgress="1" />
    </WhileActive >
</Page>

Then the animation is as I want it; coming in from top, and the layout is “correct” so to speak.