WPF 路径动画PathAnimations的使用

Posted 2021-06-27 dotNET跨平台

在wpf中让一个控件按照一定的路径运行的动画。。叫做路径动画，这个示例演示了让一个rectangle按照一个s形曲线反复运行的动画。

效果：

只有一个文件：

全部代码如下 ：

<Window x:Class="wpfcore.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpfcore"
        mc:Ignorable="d"
        Background="LightBlue"
        Title="MainWindow" Width="420" Height="340">
    <Window.Resources>
        <PathGeometry x:Key="SLine" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
    </Window.Resources>
    <Grid Margin="20">
        <StackPanel>


        <Canvas HorizontalAlignment="Left" Margin="0" Width="340" Height="215" >


        <Path VerticalAlignment="Top" Margin="15,15,15,15" 
              Data="{StaticResource SLine}"
              Stroke="Blue" StrokeThickness="2"
              Stretch="None"/>


      <Path Fill="Red">
        <Path.Data>
        <RectangleGeometry x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" >
            <RectangleGeometry.Transform>
                <TransformGroup>
                <RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="15" CenterY="15" />
                <TranslateTransform x:Name="MyTranslateTransform" X="10" Y="100" />
                </TransformGroup>
            </RectangleGeometry.Transform>
        </RectangleGeometry>
        </Path.Data>
      </Path>
            </Canvas>
  <Button Width="80" HorizontalAlignment="Left" Content="开始动画">
      <Button.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
        <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>
                <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyRotateTransform"
                    Storyboard.TargetProperty="Angle"
                    Source="Angle" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True" 
                    PathGeometry="{StaticResource SLine}">
                </DoubleAnimationUsingPath>
                <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyTranslateTransform"
                    Storyboard.TargetProperty="X"
                    Source="X" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True"  PathGeometry="{StaticResource SLine}">
                </DoubleAnimationUsingPath>


                <DoubleAnimationUsingPath
                    Storyboard.TargetName="MyTranslateTransform"
                    Storyboard.TargetProperty="Y"
                    Source="Y" 
                    Duration="0:0:5" 
                    RepeatBehavior="Forever" AutoReverse="True"  PathGeometry="{StaticResource SLine}">
                </DoubleAnimationUsingPath>


            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
      </Button.Triggers>  
  </Button>
        </StackPanel>
    </Grid>
</Window>

动画截图：

完事，搞定。