Animation

Animation code looks like this:

MediaTimeline tells what media should be played and by who. Storyboard.TargetName="MediaElement" points to <MediaElement Name="MediaElement" /> defined inside Window content which does heavy-lifting of playing sounds.

Then we have ThicknessAnimationUsingKeyFrames which have defined:

What object will be manipulated – Storyboard.TargetName="Raptor"

What property of that object will be modified – Margin.

How long all operation should take – Duration="0:0:2"

Keyframes are like bus stops for modified value.

Initial margin value for image is "0,0,0,-300" which means, whole picture under window canvas (picture is 300 px in height).

So first stop for value is "0,0,0,0" which should be done at 0:0:0.5 after animation is started. LinearThicknessKeyFrame tells how that value should change over time. It should be changed in linear fashion.

Second stop moves raptor outside window canvas.

Last keyframe is DiscreteThicknessKeyFrame which means value is change instantly at KeyTime. Which resets image position to starting one.