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.

Published Wednesday, January 24, 2007 2:19 PM by Michael Schwarz

Comments

# http://megite.com/technology/1169661715/21

Wednesday, January 24, 2007 3:44 PM by TrackBack

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

Thursday, January 25, 2007 12:01 PM by Chad Campbell

Pretty slick... it's amazing what you can do with such a small amount of XAML code.

# The WPF/E Gear Keeps Turning

Friday, June 01, 2007 8:35 AM by Michael's Blog

As you may have read on my blog I have added an animation to the gear example from Mike Harsh. Now, the

# Visual Brush in XAML &laquo; Tech Blog of Li Gao

Thursday, August 30, 2007 1:42 PM by Visual Brush in XAML « Tech Blog of Li Gao

Pingback from  Visual Brush in XAML &laquo; Tech Blog of Li Gao