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

Michael Schwarz on Wednesday, January 24, 2007

I read a great artice about Use Transforms and Opacity Masks to Create a Reflection in WPF/E [1] 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.

<style> <!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /white-space: pre;/ }

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; }

.csharpcode .lnum { color: #606060; }

--> </style> <pre class="csharpcode">&lt;Canvas xmlns=<span class="str">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> Canvas.Left=<span class="str">"75"</span> Canvas.Top=<span class="str">"198"</span> x:Name=<span class="str">"test"</span> Width=<span class="str">"121"</span> Height=<span class="str">"121"</span>&gt; &lt;Canvas.OpacityMask&gt; &lt;LinearGradientBrush StartPoint=<span class="str">"0.0,0.0"</span> EndPoint=<span class="str">"0.0,1.0"</span>&gt; &lt;GradientStop Offset=<span class="str">"0.0"</span> Color=<span class="str">"#CC000000"</span> /&gt; &lt;GradientStop Offset=<span class="str">"0.4"</span> Color=<span class="str">"#66000000"</span> /&gt; &lt;GradientStop Offset=<span class="str">"0.8"</span> Color=<span class="str">"#00000000"</span> /&gt; &lt;/LinearGradientBrush&gt; &lt;/Canvas.OpacityMask&gt;

&lt;!-- here comes the image tag --&gt;

&lt;/Canvas&gt; </pre>

To get the two (the original gear and the reflection one) turn around I added two DoubleAnimation to BeginStoryboard:

<style> <!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /white-space: pre;/ }

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; }

.csharpcode .lnum { color: #606060; }

--> </style> <pre class="csharpcode">&lt;Canvas.Triggers&gt; &lt;EventTrigger RoutedEvent=<span class="str">"Canvas.Loaded"</span>&gt; &lt;EventTrigger.Actions&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation x:Name=<span class="str">"hourAnimation"</span> Storyboard.TargetName=<span class="str">"hourHandTransform"</span> <br> Storyboard.TargetProperty=<span class="str">"Angle"</span> From=<span class="str">"0"</span> To=<span class="str">"360"</span> Duration=<span class="str">"0:0:5"</span> <br> RepeatBehavior=<span class="str">"Forever"</span>/&gt; &lt;DoubleAnimation x:Name=<span class="str">"hourAnimation2"</span> Storyboard.TargetName=<span class="str">"hourHandTransform2"</span> <br> Storyboard.TargetProperty=<span class="str">"Angle"</span> From=<span class="str">"0"</span> To=<span class="str">"360"</span> Duration=<span class="str">"0:0:5"</span> <br> RepeatBehavior=<span class="str">"Forever"</span>/&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger.Actions&gt; &lt;/EventTrigger&gt; &lt;/Canvas.Triggers&gt;</pre>

Have a look at the example online: http://wpfe.schwarz-interactive.de/ex01/ [2] or download the files at http://wpfe.schwarz-interactive.de/ex01/download.zip [3].