Timeline does not allow mod of same object twice?

How-to Discussions
1

Hey,
I have this code


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

But, for some reason the tvWelcome text does not fade to opacity=0, but it does fade in (0–>1) in the second line of the timeline.

What am I missing?

2

You’ll need to use multiple keyframes on the same change operator in order to do this. You can see how in the examples here and here

3

Thanks for that. I think that it might be a good idea to update that in the docs and stuff, to make it clearer, cause its not obvious that keyframes is required for such operations =)

I will try it out shortly =)

4

I’ll make sure the docs are updated. :slight_smile:

FYI: What happens in the case you described is that each animator works until the end of the parent timeline. In other words: they animate to the end of their duration and then hold that value. This means that multiple animators on the same target will give unexpected results.

5

Thanks for your input, appreciated =)

6

Actually, that didnt work as expected either. My code:


<Page ux:Class="SplashScreen">
	
	<StackPanel ux:Name="sp1" X="50%" Y="25%" Anchor="50%,50%">
    	<AlfaPro ux:Name="alfaProIcon"  />
    	<TextView ux:Name="tvWelcome" Value="Welcome to Alfa Pro" Alignment="Center" Opacity="0" TextColor="#fff" />
	</StackPanel>

 	<Timeline ux:Name="timeline">
 		<Move Target="sp1" Y="-400" Duration="0"  />
 		<Change Target="tvWelcome.Opacity" Delay="1.5">
 			<Keyframe Value="1" Time="0.8" />
 			<Keyframe Value="1" Time="1.8" />
 			<Keyframe Value="0" Time="1.8" />
 		</Change>
    	<Move Target="sp1" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" />
    </Timeline>

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

      
</Page>

As you can see, I change the opacity of the text to 1 in 0.8 seconds, then I want to wait for 1.8 seconds with opactity 1, then face to opacity 0 in 1.8 seconds.

However, it stops at full opacity. If I remove the second (middle) keyframe, it works (from 0–>1 and then immediately from 1–>0), but now, it seems to stop at the second one.

What am I missing?

7

Right, so using TimeDelta instead of Time does the trick, but that is not very clear in the docs.

From https://www.fusetools.com/docs/fuse/animations/keyframe I read:

file
E6Qq2rapw9HD-image-1477080335383.png891×255

I think maybe it should be reiterated that its absolute times; I missed that from 10 to 15 it takes 0.5 seconds, when I first read it I thought “they have a mis-print here”, but you didnt =)