Unexpected <KeyFrame> animation

Bug Reports
1

I try to rotate an Image 90 deg. right -> 90 deg Left then stop.

<Rotate>
   <Keyframe DegreesZ="90"  Time="1"/>
   <Keyframe DegreesZ="-90"  Time="3"/>
</Rotate>

but it rotates once more time
like this:

file

instead of this:

file

Fuse 0.30
Windows 7 64bit

2

Hi!

This is expected for most triggers. Triggers play to the end and back again. If you don’t want that, use a Timeline

3

But why it goes back to +90?

it supposed to stop at 0

0 -> 90 ->0

0 -> -90 ->0

isn’t?

4

This is because you don’t actually “add” the value relatively, you just animate to that absolute value.
So in this case you go from 0 (which is the rest state, to 90 during the first second, then to -90 over the next 2 seconds. Then when the trigger is deactivated it animates back to 90 again over 2 seconds, then back to 0 over last 1 second.

5

ok, so how would you (any one) achieve the following animation??

Rotate 0 -> 90 ->0 -> -90 ->0

6

You can for instance use Timeline together with PulseForward:

<Panel ux:Name="theElementYouWantToRotate">
	<Timeline ux:Name="rotateTimeline">
		<Rotate>
			<Keyframe DegreesZ="90" Time="1" />
			<Keyframe DegreesZ="-90" Time="3" />
			<Keyframe DegreesZ="0" Time="4" />
		</Rotate>
	</Timeline>
	<Clicked>
		<PulseForward Target="rotateTimeline" />
	</Clicked>
</Panel>
7

It does works like that, but it adds some overhead.

why not just add some flag to the tag so each line of animation will be completed before the next one?

Something like:

<Clicked>
   <Rotate SomeFlag="PulseForward">
      <Keyframe DegreesZ="90"  Time="1"/>
      <Keyframe DegreesZ="-90"  Time="1"/>
   </Rotate>
</Clicked>

and keep it simple.

it makes more sense to me

8

that’s exactly what Timeline does semantically :slight_smile:

while your suggestion for an alternate syntax may be helpful in this particular situation, I think it would quickly become ambiguous if you mixed keyframes and other animators together. Using Timeline as a pattern eliminates this confusion by making it explicit which type of animation you’re doing, which helps keeps things readable (especially as more animations etc are added/changed, which happens often).