先介绍一下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