Question

（x，y）=（10,20），（50,30），（20,20），（40,22），（45,20），（50,35），..... ....

我想用.Net创建一个动画。通常我使用的是Windows窗体。但如果需要，我可以使用WPF。

从（10,20）点开始。实际上一条线从（10,20）开始，然后到达（50,30）点，延迟10ms。然后，在10ms之后从（50,30）到（20,20）等等。

将从文本文件中读取此值。我可以简单地制作两个ArrayList x＆amp; y来放置文本文件中的值。我只知道如何从这个x，y生成动画线，从每个节点到另一个节点有10毫秒的延迟？

如果我的问题很难理解，请告诉我。我会尽量让它变得更容易。

先谢谢。

Answer 1

如果我理解正确，你想要绘制线条的动画。以下是您的价值观的简单示例。

<Window x:Class="WpfApplication1.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">

    <Canvas Name="lineCanvas" MouseLeftButtonDown="lineCanvas_MouseLeftButtonDown" Background="White" />
</Window>

事件处理程序将在稍后启动动画。首先，我们将定义数据：

List<Point> Points = new List<Point>();
Storyboard sb;

public MainWindow()
{
    InitializeComponent();

    Points.Add(new Point(10, 20));
    Points.Add(new Point(50, 30));
    Points.Add(new Point(20, 20));
    Points.Add(new Point(40, 22));
    Points.Add(new Point(45, 20));
    Points.Add(new Point(50, 35));

    InitAnimation();
}

sb是包含动画的Storyboard。可以使用文件中的值轻松填充Points。

让我们初始化动画。将为每个细分添加一个新行。然后该行的终点将被动画化。

public void InitAnimation()
{
    sb = new Storyboard();

    for (int i = 0; i < Points.Count - 1; ++i)
    {
        //new line for current line segment
        var l = new Line();
        l.Stroke = Brushes.Black;
        l.StrokeThickness = 2;

        //data from list
        var startPoint = Points[i];
        var endPoint = Points[i + 1];

        //set startpoint = endpoint will result in the line not being drawn
        l.X1 = startPoint.X;
        l.Y1 = startPoint.Y;
        l.X2 = startPoint.X;
        l.Y2 = startPoint.Y;
        lineCanvas.Children.Add(l);

        //Initialize the animations with duration of 1 second for each segment
        var daX = new DoubleAnimation(endPoint.X, new Duration(TimeSpan.FromMilliseconds(1000)));
        var daY = new DoubleAnimation(endPoint.Y, new Duration(TimeSpan.FromMilliseconds(1000)));
        //Define the begin time. This is sum of durations of earlier animations + 10 ms delay for each
        daX.BeginTime = TimeSpan.FromMilliseconds(i * 1010);
        daY.BeginTime = TimeSpan.FromMilliseconds(i * 1010);

        sb.Children.Add(daX);
        sb.Children.Add(daY);

        //Set the targets for the animations
        Storyboard.SetTarget(daX, l);
        Storyboard.SetTarget(daY, l);
        Storyboard.SetTargetProperty(daX, new PropertyPath(Line.X2Property));
        Storyboard.SetTargetProperty(daY, new PropertyPath(Line.Y2Property));
    }
}

可以根据线条的长度轻松更改动画的持续时间，使其看起来更漂亮。

上一个任务，显示动画：

private void lineCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    sb.Begin(this);
}

Answer 2

这是Nico很好的答案的变体。我使用PointAnimation为EndPoint的{{1}}设置动画，该LineGeometry用作Data的{{1}}。

Path

生成动画线

2 个答案: