生成动画线 [英] generating animated line

问题描述

（X，Y）=（10,20），（50,30），（20,20），（40,22），（45,20），（50,35），..... ....

(x,y) =(10,20),(50,30),(20,20),(40,22),(45,20),(50,35),.........

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

I want to create an animation with .Net.Normally I am using windows form. But if needed, i can use WPF.

它始于（10,20）point.Actually一条直线从（10,20）开始，然后去（50,30）与10ms的延迟点。然后，从（50,30）到（20,20）10毫秒后等

It starts with (10,20) point.Actually a line starts from (10,20) then goes to (50,30) point with 10ms delay. then, from (50,30) to (20,20) after 10ms and so on.

该值将从一个文本文件中读取。我可以简单地提出两点ArrayList的X'放大器; Y，把值从文本file.I只需要知道我怎么能生成这个X上的动画线，Y与10毫秒的延迟，从每个节点到另一个节点

This values will be read from a text file. I can simply make two ArrayList x&y, to put values from the text file.I just Have to know how could i generate the animated line from this x,y with 10 ms delay from each node to another?

如果我的问题是很难理解，请让我知道。我将尽力使它更容易。

If my question is difficult to understand, please let me know. I will try to make it easier.

先谢谢了。

推荐答案

如果我理解正确，你要因为这将只是绘制的动画就行了。下面是一个简单的例子，你的价值观。

If I understand you correctly, you want to animate the line as it would be just drawn. Here is a simple example with your values.

<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>

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

The event handler will start the animation later. First, we'll define the data:

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 是故事板将包含动画。 分数可以很容易地充满了从文件中的值。

sb is the Storyboard that will contain the animation. Points can easily be filled with the values from a file.

让我们来初始化动画。新的生产线将被添加为每个段。然后，直线的端点将动画。

Let's initialize the animation. A new line will be added for each segment. Then the endpoint of the line will be animated.

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));
    }
}

的动画的持续时间可以很容易地根据该行的长度，使它看起来更好改变。

The duration of the animations can easily be changed according to the length of the line to make it look nicer.

最后一个任务，显示动画：

Last task, show the animation:

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

这篇关于生成动画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！