用WPF来做一个动画
开发工具与关键技术:Visual Studio 2015、WPF
作者:郑伟基
撰写时间:2019年4月12号
下面我们使用WPF来做一个动画,在上面的动画中需要用到图形的坐标来画一个图形出来,见下面的代码:
XAML代码如下:
<Window x:Class="动画_四角星.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<!--四角星-->
<Grid >
<Polyline Points="225,25 310,25 340,-35 375,25 460,25 400,75 440,140 255,140 255,140 285,75 225,25" Stroke="Red" StrokeThickness="5" Fill="Black" Margin="-65,55,-210.6,-132.2" StrokeDashArray="2,2">
<Polyline.Triggers>
<EventTrigger RoutedEvent="Polyline.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="100" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetProperty="StrokeDashOffset" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polyline.Triggers>
</Polyline>
</Grid>
</Grid>
</Window>
在上面的代码看到我们先用坐标来画一个四角星,每个坐标都对应一个角,两个坐标连成一条线,我用了11个坐标来画一个四角星,最后一个坐标是用来密封整个图形的,图形画完之后在里面的代码写一个动画,让它能够动边框的线动起来,写一个Triggers来制成动画的效果。
下面是用XAML代码写的效果,见下面的效果图:
通过写动画的事件来使得边框的线能过一直的在循环动起来。