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

Wednesday, January 24, 2007 1:19:00 PM

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.