《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>
三、 效果图
变化过程为:由图一沿线行走到图二,再由图二沿线行走到图三并无限循环行走
图一
图二
图三
四、 总结
其实该动画看起来是不规则的线,但是其实是由规则的三条线(曲线,圆弧,直线)组合而成的。