WPF成长之路------翻转动画

先介绍一下RenderTransform类，该类成员如下：

TranslateTransform：能够让某对象的位置发生平移变化。

RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。

ScaleTransform：能够让某对象产生缩放变化。

SkewTransform：能够让某对象产生扭曲变化。

TransformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

MatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。

通过以上变化效果，实现图形的动画效果，而翻转效果则是通过ScaleTransform对图形进行缩放，达到翻转效果,效果图如下：

代码如下：

<Window.Resources>
        <Storyboard x:Key="LoadHeadStoryboard" >
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:0:1"
                                           RepeatBehavior="1x"
                                           AutoReverse="True"
                                           Storyboard.TargetName="scale"
                                           Storyboard.TargetProperty="ScaleX">
                <SplineDoubleKeyFrame    Value="0.3"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger SourceName="button" RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Button x:Name="button" Height="20" Width="40" VerticalAlignment="Top">翻转</Button>
        <StackPanel Height="50" Width="50">
            <Image Source="images/干流长度.png" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="scale" ScaleX="1" ScaleY="1"></ScaleTransform>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </StackPanel>
    </Grid>

参考链接：

https://www.cnblogs.com/xpvincent/archive/2013/03/05/2944906.html