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

先介绍一下RenderTransform类,该类成员如下:

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

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

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

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

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

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

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

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

代码如下:

<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

上一篇:WPF解决方案------调用线程无法访问此对象,因为另一个线程拥有该对象


下一篇:C#之通过图片地址下载图片