I read a great artice about Use Transforms and Opacity Masks to Create a Reflection in WPF/E and tried to add some animation for the gear image. WPF/E is really easy, and you don't need any JavaScript experience to do all this stuff, it is all WPF/E content only.
What did I change to get it running?
I added a Canvas tag around the second image. I need this because I don't want to have the OpacityMask to turn around like the image itself. So, the OpacityMask is now applied to the Canvas.
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Canvas.Left="75" Canvas.Top="198"
x:Name="test" Width="121" Height="121">
<Canvas.OpacityMask>
<LinearGradientBrush StartPoint="0.0,0.0" EndPoint="0.0,1.0">
<GradientStop Offset="0.0" Color="#CC000000" />
<GradientStop Offset="0.4" Color="#66000000" />
<GradientStop Offset="0.8" Color="#00000000" />
</LinearGradientBrush>
</Canvas.OpacityMask>
<!-- here comes the image tag -->
</Canvas>
To get the two (the original gear and the reflection one) turn around I added two DoubleAnimation to BeginStoryboard:
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever"/>
<DoubleAnimation x:Name="hourAnimation2" Storyboard.TargetName="hourHandTransform2" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
Have a look at the example online: http://wpfe.schwarz-interactive.de/ex01/ or download the files at http://wpfe.schwarz-interactive.de/ex01/download.zip.
