Smooth transition between objects in the same page

How-to Discussions
1

Hi guys, I have this code working:

<...>
        <WhileKeyboardVisible>
        	<Change bigLogo.Value="false" />
          <Change smallLogo.Value="true" />
        	<Change showButtons.Value="false" />
        </WhileKeyboardVisible>

        <DockPanel>

        	<WhileTrue ux:Name="bigLogo" Value="true">
            <Scale Factor=".95" Duration=".08" Easing="BackIn" EasingBack="BackOut" />
	        	<StackPanel ux:Name="theBigLogo" Dock="Top" Orientation="Vertical" Margin="20" ContentAlignment="Center" Visibility="Visible">
              <ZFTextDefault FontSize="20" Alignment="HorizontalCenter">Bem-vindo ao</ZFTextDefault>
  						<Image File="../Assets/LogoVertical.png" Alignment="VerticalCenter" Width="150" Height="150" />
	        	</StackPanel>
	        </WhileTrue>

          <WhileTrue ux:Name="smallLogo" Value="false">
            <Scale Factor=".95" Duration=".08" Easing="BackIn" EasingBack="BackOut" />
	        	<StackPanel ux:Name="theSmallLogo" Dock="Top" Orientation="Vertical" Margin="20" ContentAlignment="Center" Visibility="Visible">
              <ZFTextDefault FontSize="15" Alignment="HorizontalCenter">Bem-vindo ao</ZFTextDefault>
  						<Image File="../Assets/LogoVertical.png" Alignment="VerticalCenter" Width="80" Height="80" />
	        	</StackPanel>
	        </WhileTrue>
<...>

The changing between bigLogo and smallLogo is working perfectly, but now I want to add some smooth transition between them. What is the best approach to do it? Thanks

2

Hi!

Since your <WhileTrue /> triggers add/remove your logos you can use <AddingAnimation /> and <RemovingAnimation />. If you look at the docs for those you can see example code for how to use them :slight_smile: