Weird anim behaviour - WileActive and Delay?

How-to Discussions
1

So, I have looked at the “signup concept” example, and I am trying to modify it a little. First, here is the page code:

<Page ux:Class="RegistrationStep1">
	<Router ux:Dependency="router" />

	<HidingPanel ux:Name="signupForm" Width="90%" Height="45%" Offset="0%,10%" IsEnabled="false" Color="White">
		<Grid RowCount="3" Margin="30,40,30,60">
			<TextInput ux:Name="usernameTI" PlaceholderText="Username" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
			<TextInput ux:Name="emailTI"    PlaceholderText="Email" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
			<TextInput ux:Name="passwordTI" PlaceholderText="Password" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
		</Grid>
		<WhileEnabled>
			<Change usernameTI.Opacity=".3" Duration="1.4" Delay="1.0" />
			<Change emailTI.Opacity="1"    Duration="1.4" Delay="2.0" />
			<Change passwordTI.Opacity="1" Duration="1.4" Delay="3.0" />
		</WhileEnabled>

		<Panel>
			<Panel ux:Name="submitButton" Width="100" Offset="0%,50%" Height="50" HitTestMode="LocalBoundsAndChildren">
				<Text Value="DONE" Alignment="Center" TextColor="White"/>
			</Panel>
			<Panel ux:Name="submitButtonCollapsed" Width="10" Offset="0%,50%" Height="10"/>
		</Panel>
	</HidingPanel>

	<WhileActive>
		<Change signupForm.IsEnabled="true" Delay="4" DelayBack="0" />
	</WhileActive>
</Page>

and the HidingPanel:

<Panel ux:Class="HidingPanel" ux:Name="self" Opacity="0" IsEnabled="false" HitTestMode="LocalBoundsAndChildren">
	<WhileEnabled>
		<Change self.Opacity="1" Duration="3.1"/>
	</WhileEnabled>
</Panel>

What I want:

  • Navigate to my page “RegistrationStep1”
  • There, fade in “signupForm” using the WhileActive trigger that sets the signupForm.IsEnabled to true, after waiting x seconds.
  • It should then fade in the rectangle in however long the HidingPanel says (set to 3.1 seconds currently)
  • When the HidingPanel is enabled, so 4 seconds after page is active, then fade in the textinputs one after the other

What is happening instead

  • The Delay on the WhileActive doesnt seem to actually delay the start of the animation of the HidingPanel.
  • Instead, the “Delay” seems to regulate the Duration of the fade-in; a small value on Delay makes for a quick fade-in, a long Delay for a long fade-in etc
  • The WhileEnabled inside the HidingPanel seems to fire immediately, and starts animating.

Its hard to explain the rest, as it behaves very incoherent:

  • The emulator “reset” via CTRL + R doesnt start from the initial page, so the full flow cannot be tested unless I close the emulator
  • the WhileActive seems to require a DelayBack value, but after adding it again, nothing happens.

Sorry, its messy to explain as it all behaves unexpectedly…

2

An update:

Now, for some reason, the Delay and DelayBack on the WhileActive tag doesnt seem to do anyting at all, except for allowing fade-in at all:

	<WhileActive>
		<Change signupForm.IsEnabled="true" Delay="100" DelayBack="100"/>
	</WhileActive>

If I remove either DelayBack or Delay, there is no animation at all, the hidingpanel appears immediately. But the value in Delay and DelayBack has no relevance at all, even witha value of 100 the animation starts immediately (and takes whatever time is defined in the HidingPanel class).

3

Hi!

I did some testing, and i did get your code to work with some of my own inferred top level code (using a navigator and router). I did have to make one change to get it to work properly however. By adding Bypass="Never" to the WhileActive you make sure this trigger always plays. Sometimes, it can be bypassed because its value can have changed before its actually rooted.

I also changed the code from using the IsEnabled to using its own ux:Property definition. The example you used should also be updated to work this way.

Here is my full code for you to look at, i hope it helps:

<App>
	<Page ux:Class="RegistrationStep1">
		<HidingPanel ux:Name="signupForm" Width="90%" Height="45%" Offset="0%,10%" Color="White" ShouldShow="false">
			<Grid RowCount="3" Margin="30,40,30,60">
				<TextInput ux:Name="usernameTI" PlaceholderText="Username" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
				<TextInput ux:Name="emailTI"    PlaceholderText="Email" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
				<TextInput ux:Name="passwordTI" PlaceholderText="Password" Opacity="0" Alignment="VerticalCenter" PlaceholderColor="#888"/>
			</Grid>
			<WhileEnabled>
				<Change usernameTI.Opacity=".3" Duration="1.4" Delay="1.0" />
				<Change emailTI.Opacity="1"    Duration="1.4" Delay="2.0" />
				<Change passwordTI.Opacity="1" Duration="1.4" Delay="3.0" />
			</WhileEnabled>

			<Panel>
				<Panel ux:Name="submitButton" Width="100" Offset="0%,50%" Height="50" HitTestMode="LocalBoundsAndChildren">
					<Text Value="DONE" Alignment="Center" TextColor="White"/>
				</Panel>
				<Panel ux:Name="submitButtonCollapsed" Width="10" Offset="0%,50%" Height="10"/>
			</Panel>
		</HidingPanel>

		<WhileActive>
			<Change signupForm.ShouldShow="true" Delay="1" DelayBack="0" />
		</WhileActive>
	</Page>

	<Panel ux:Class="HidingPanel" Opacity="0" HitTestMode="LocalBoundsAndChildren">
		<bool ux:Property="ShouldShow" />
		<WhileTrue Value="{ReadProperty this.ShouldShow}" Bypass="Never">
			<Change this.Opacity="1" Duration="1.1"/>
		</WhileTrue>
	</Panel>


	<Router ux:Name="router" />
	<JavaScript>
		module.exports.goBack = function() { router.goBack(); }
		module.exports.pushBar = function() { router.push("bar"); }
	</JavaScript>
	<Navigator DefaultPath="foo">
		<Page ux:Template="foo" Color="Red">
			<Button Text="goto bar" Clicked="{pushBar}" />
		</Page>
		<RegistrationStep1 ux:Template="bar" Color="Teal"/>
	</Navigator>
</App>