Charles Petzold

I've been thinking recently about how to get XAML animations to behave more in accordance with natural laws, such as the conservation of energy, so they don't go on forever like a perpetual motion machine. I'd like to see animations "wind down" as they would in real life in the presence of friction and air resistance.

Here's one stab at such a thing. WindDownPendulum.xaml is a pendulum whose arc starts off at ±30° and over the course of 5 minutes goes down to 0°. (The decrease is linear when it should probably be exponential, but this is a first try.)

Here's the listing:

<!-- ================================================================
      WindDownPendulum.xaml (c) 2006 by Charles Petzold

      See blog entry www.charlespetzold.com/blog/2006/06/160538.html
     ================================================================ -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Wind-Down Pendulum"
      Title="Wind-Down Pendulum">
    <Grid>
        <!-- Invisible element just to host composite tranform -->
        <FrameworkElement Name="el">
            <FrameworkElement.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="xformRotate" />
                    <ScaleTransform x:Name="xformScale" />
                </TransformGroup>
            </FrameworkElement.RenderTransform>
        </FrameworkElement>

        <!-- Pendulum angle is sine curve times scaling factor -->
        <Path HorizontalAlignment="Center" VerticalAlignment="Top"
              Data="M 0 0 L 0 200 A 20 20 0 0 0 0 240 A 20 20 0 0 0 0 200" 
              Fill="Brown" Stroke="Black" StrokeThickness="3">
            <Path.RenderTransform>
                <RotateTransform Angle="{Binding ElementName=el, 
                                    Path=RenderTransform.Value.M11}" />
            </Path.RenderTransform>
        </Path>
    </Grid>

    <Page.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <!-- RotateTransform angle from 0 to 360, repeated -->
                    <DoubleAnimation Storyboard.TargetName="xformRotate"
                                     Storyboard.TargetProperty="Angle"
                                     From="0" To="360" Duration="0:0:2"
                                     RepeatBehavior="0:5:0" />

                    <!-- ScaleTransform scale factor from 30 to 0 -->
                    <DoubleAnimation Storyboard.TargetName="xformScale"
                                     Storyboard.TargetProperty="ScaleX"
                                     From="30" To="0" Duration="0:5:0" />

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Page.Triggers>
</Page>

Yep, it's my favorite technique of using composite transforms to perform arbitrary math. Toward the top I have an invisible FrameworkElement whose sole role is to host a composite TransformGroup. The RotateTransform has its Angle property animated from 0° to 360° over two seconds, and repeated for five minutes. Thus, the M11 property of the resultant Matrix object is the cosine of that angle, which, of course, goes from 1 to 0 to -1 to 0 back to 1 every two seconds.

The other transform in the TransformGroup is a ScaleTransform, with its animated ScaleX property slowly decreasing from 30 to 0 over the course of five minutes. This value is effectively multiplied by the cosine of the angle, so in the composite transform, the M11 property of the Matrix object is this decreasing scaling factor times the cosine of the animated angle. This is what's used to set the rotation angle of the pendulum object.