C#沿线行走动画

《C#沿线行走动画》

一、 说明

本文介绍在C#中如何绘制不规则的线，并在线上滑动行走。

二、 代码

<Window x:Class="高级动画和模板.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:高级动画和模板"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="_09_关键帧动画" Height="600" Width="1000">
    <!--窗口资源-->
    <Window.Resources>
        <!--PathGeometry：路径几何对象-->
        <PathGeometry x:Key="path">
            <!--PathFigure路径图-->
            <PathFigure IsClosed="True">
<!--ArcSegment类 ：表示两点之间的一条椭圆弧。
Size代表圆弧的X,Y轴半径，例子中Size="55,20"表示X半径为55，Y轴半径为20的椭圆。
SweepDirection获取或设置一个值，该值指定是以 Clockwise[指定按顺时针（正角）方向绘制圆弧。] 方向还是以 Counterclockwise [指定按逆时针（负角）方向绘制圆弧。]方向绘制弧-->
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"/>
                <ArcSegment Point="400,50" Size="5,5"/>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <!--窗口触发器-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
<!--路径动画-->
<!--使用 PathGeometry 创建形状-->
<!--RepeatBehavior="Forever"：设置RepeatBehavior为永久重复-->
                        <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>
        <!--Path：形状绘图路径-->
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10"/>
        <Image Name="image">
            <Image.Source>
                <!--DrawImage是GDI+的Graphics类显示图像的核心方法-->
                <DrawingImage>
                    <DrawingImage.Drawing>
<!--Geometry对象并不能作为图像独立呈现出来，因此需要呈现方式：
   这里是在GeometryDrawing中呈现
   可以作为GeometryDrawing.Geometry的参数呈现为Drawing对象-->
                        <GeometryDrawing Brush="LightSkyBlue">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4"/>
                                    <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
      <!--获取或设置用于绘制此 GeometryDrawing 的 Pen。-->
                            <GeometryDrawing.Pen>
      <!--Pen:用于绘制此 GeometryDrawing 的笔。 默认值为 null。-->
                                <Pen Thickness="1" Brush="Black"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>
    </Canvas>
</Window>

三、 效果图

变化过程为：由图一沿线行走到图二，再由图二沿线行走到图三并无限循环行走

图一

图二

图三

四、 总结

其实该动画看起来是不规则的线，但是其实是由规则的三条线（曲线，圆弧，直线）组合而成的。