4

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

.Netでアニメーションを作成したいのですが、通常はWindowsフォームを使用しています。ただし、必要に応じて、WPFを使用できます。

（10,20）ポイントから始まります。実際には、ラインは（10,20）から始まり、10msの遅延で（50,30）ポイントに到達します。次に、10ms後に（50,30）から（20,20）までというように続きます。

この値はテキストファイルから読み取られます。テキストファイルから値を入力するために、2つのArrayList x＆yを作成するだけです。各ノードから別のノードまで10ミリ秒の遅延で、このx、yからアニメーションラインを生成する方法を知っている必要がありますか？

私の質問が理解しにくい場合は、私に知らせてください。簡単にしようと思います。

前もって感謝します。

4

2 に答える 2

9

私があなたを正しく理解しているなら、あなたはそれがちょうど描かれるように線をアニメートしたいと思うでしょう。これがあなたの価値観の簡単な例です。

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

sbStoryboardアニメーションが含まれるものです。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);
}
于 2012-09-12T20:53:20.867 に答える
2

これがニコの素晴らしい答えのバリエーションです。私は、のとして機能するのPointAnimationをアニメーション化するために使用します。EndPointLineGeometryDataPath

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SoGeneratingAnimatedLine
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var canvas = new Canvas();

            Content = canvas;

            var points =
                new List<Point>()
                {
                    new Point(10, 10),
                    new Point(90, 10),
                    new Point(90, 90),
                    new Point(10, 90),
                    new Point(10, 10)
                };

            var sb = new Storyboard();

            for (int i = 0; i < points.Count - 1; i++)
            {
                var lineGeometry = new LineGeometry(points[i], points[i]);

                var path =
                    new Path()
                    {
                        Stroke = Brushes.Black,
                        StrokeThickness = 2,
                        Data = lineGeometry
                    };

                canvas.Children.Add(path);

                var animation =
                    new PointAnimation(points[i], points[i + 1], new Duration(TimeSpan.FromMilliseconds(1000)))
                    {
                        BeginTime = TimeSpan.FromMilliseconds(i * 1010)
                    };

                sb.Children.Add(animation);

                RegisterName("geometry" + i, lineGeometry);
                Storyboard.SetTargetName(animation, "geometry" + i);
                Storyboard.SetTargetProperty(animation, new PropertyPath(LineGeometry.EndPointProperty));                
            }

            MouseDown += (s, e) => sb.Begin(this);
        }
    }
}
于 2012-11-04T09:00:31.813 に答える