Detect when timeline finished

How-to Discussions
1

Hey,
how can I detect when an animation is finished, using a timeline? I was thinking about the WhileXXXX tags, or perhaps the ux:ProgressChanged event, but Im not sure how to swing it.

<Page ux:Class="SplashScreen">

	<StackPanel ux:Name="sp1" X="50%" Y="25%" Anchor="50%,50%" Width="200">
    	<AlfaPro ux:Name="alfaProIcon"  />
    	<TextView ux:Name="tvWelcome" Value="Welcome to Test" Alignment="Center" Opacity="0" TextColor="#fff" />
    	
    	<MyButton ux:Name="btnProceed" Text="123S" />
    	
	</StackPanel>

 	<Timeline ux:Name="timeline">
 		<Move Target="sp1" Y="-400" Duration="0"  />
 		<Change Target="tvWelcome.Opacity" Delay="1.0">
 			<Keyframe Value="1" Time="0.5" />
 			<Keyframe Value="1" TimeDelta="1" />
 			<Keyframe Value="0" TimeDelta="0.5" />
 			<Keyframe Value="1" TimeDelta="1" />
 			<Keyframe Value="1" TimeDelta="1" />
 			<Keyframe Value="0" TimeDelta="0.5" />
 		</Change>
 		<Set tvWelcome.Value="Let's start!" Delay="3.0" />
    	<Move Target="sp1" Y="400" Duration="1" Delay="0.1" Easing="BounceOut" />

    </Timeline>

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

</Page>
2

Hi!

The easiest way is just to add an action to the end of your timeline:

<Timeline>
    <Move Duration="0.5" ...
    <Change Duration="1" ...
    <Callback Handler="{callToJSWhenTimelineIsDone}" Duration="1" />
</Timeline>

i use Duration=“1” on the callback here because that is the same as the length of the Timeline.