Transforms, Opacity Masks and Animation to Create an Animated Reflection in WPF/E

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.

1 Comment

Comments have been disabled for this content.

Twitter

In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: DieApfelFamilie