WPF之基于路径的动画

时间：2023-03-09 01:08:12
WPF之基于路径的动画

　　不是突然想到要做一个路径动画的，是今天谈业务需求的时候偶然谈到的，

　　一艘船从一个国家到另外一个国家，沿着一条固定的路线前进，就是一个简单的动画效果，以前貌似在书上看到过，所以自己也来做一个。

　　在网上搜资料发现都是给你看看代码，或者边写边看代码。

　　认为还是要先研究一下这个东西要如何实现吧，参考资料是《WPF编程宝典》。

　　其实中心思想还是很简单的，主要是设置对象的Storyboard中DoubleAnimationsUsingPath的PathGeometry属性。

　　下面这个实例是去则WPF变成宝典之中，因为不太复杂，就随便看看吧~

　　这个例子里面是对image这个对象进行操作，所谓动画就是去根据路径去改变image的位置，就是Canvas.Left和Canvas.Top，给PathGeometry绑定设定好的路径，然后指定Source是对应的XY轴。

　　

<Window x:Class="Animation.PathBasedAnimation"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="PathBasedAnimation" Height="381.6" Width="521.6"

    >

  <Window.Resources>

    <PathGeometry x:Key="path">

      <PathFigure IsClosed="True">

        <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>

        <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>

      </PathFigure>

    </PathGeometry>

  </Window.Resources>

  <Window.Triggers>

    <EventTrigger RoutedEvent="Window.Loaded">

      <EventTrigger.Actions>

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimationUsingPath Storyboard.TargetName="image"

                                      Storyboard.TargetProperty="(Canvas.Left)"

                                        PathGeometry="{StaticResource path}"

                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />

            <DoubleAnimationUsingPath Storyboard.TargetName="image"

                                      Storyboard.TargetProperty="(Canvas.Top)"

                                     PathGeometry="{StaticResource path}"

                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger.Actions>

    </EventTrigger>

  </Window.Triggers>

  <Canvas Margin="10">

    <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">

    </Path>

    <Image Name="image">

      <Image.Source>

        <DrawingImage>

          <DrawingImage.Drawing>

            <GeometryDrawing Brush="LightSteelBlue">

              <GeometryDrawing.Geometry>

                <GeometryGroup>

                  <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4" />

                  <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9" />

                </GeometryGroup>

              </GeometryDrawing.Geometry>

              <GeometryDrawing.Pen>

                <Pen Thickness="1" Brush="Black" />

              </GeometryDrawing.Pen>

            </GeometryDrawing>

          </DrawingImage.Drawing>

        </DrawingImage>

      </Image.Source>

    </Image>

  </Canvas>

</Window>

　　完全不难，但是我自己还是没有记得，所以写了一篇短短的Blog.

相关文章