Javascript ASP.NET中的动画_Javascript_Asp.net_Animation

Javascript ASP.NET中的动画

javascript asp.net animation

Javascript ASP.NET中的动画,javascript,asp.net,animation,Javascript,Asp.net,Animation,我在完成一项需要在web应用程序中以动画形式显示线条的任务时遇到困难测线数据存储在数据库中，由x、y和时间信息组成。x和y坐标指定绘制点的位置，而时间表示各点的时间戳（以毫秒为单位）比如说,，第1点（x=10，y=23，t=152）第2点（x=21，y=29，t=385）第3点（x=15，y=20，t=506） ... 因此，任务是基于给定的时间戳在web应用程序中显示这些点我的问题是，首先我不知道使用什么样的图形插件，然后如何实现它（即如何使用计时器，如何制作动画等）我将感谢你

我在完成一项需要在web应用程序中以动画形式显示线条的任务时遇到困难

测线数据存储在数据库中，由x、y和时间信息组成。x和y坐标指定绘制点的位置，而时间表示各点的时间戳（以毫秒为单位）

比如说,，第1点（x=10，y=23，t=152）第2点（x=21，y=29，t=385）第3点（x=15，y=20，t=506） ...

因此，任务是基于给定的时间戳在web应用程序中显示这些点

我的问题是，首先我不知道使用什么样的图形插件，然后如何实现它（即如何使用计时器，如何制作动画等）

我将感谢你的任何帮助！如果您需要有关此任务的更多信息，请让我知道。我很乐意提供

亲切问候,，弗里达

我想我会用它来做这样的东西。它易于使用，并支持所有主要浏览器。动画线条绘制可能有点麻烦，因为您必须将每个步骤作为单独的路径生成，但这并不难

下面是一个非常简单的例子

var points = [
    { x: 0, y: 0, t: 0 },
    { x: 100, y: 230, t: 1520 },
    { x: 210, y: 290, t: 3850 },
    { x: 150, y: 200, t: 5060 },
];

var paths = [];

// build paths
points.forEach(function (p, idx) {
    if (idx === 0) {
        paths.push('M ' + p.x + ' ' + p.y);
    } else {
        paths.push(paths[idx - 1] + ' L ' + p.x + ' ' + p.y);
    }
});

var paper = Raphael(10, 10, 300, 300);
var line = paper.path(paths[0]);

var next = 1;

function animate() {
    if (paths[next]) {  
        duration = points[next].t - points[next - 1].t        
        line.animate({ path: paths[next] }, duration, 'linear', animate);
        next++;
    }
}
animate();

这里有一把小提琴，你可以看到它在演奏：更新

下面是使用上述代码的完整HTML页面。这仍然是一个简化的示例，但您应该能够从中找到自己的方法

<!DOCTYPE html>
<html>
    <head>
        <title>Raphael Play</title>
        <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
        <script type="text/javascript">
            function drawLine(points) {

                var paths = ['M ' + points[0].x + ' ' + points[0].y];

                // build paths
                for (var i = 1; i < points.length; i++) {
                    var p = points[i];
                    paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
                }

                // get drawing surface
                var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  

                // draw line
                var line = paper.path(paths[0]);
                var next = 1;

                function animate() {
                    if (paths[next]) {  
                        duration = points[next].t - points[next - 1].t        
                        line.animate({ path: paths[next] }, duration, 'linear', animate);
                        next++;
                    }
                }
                animate();
            }
        </script>
        <style type="text/css">
            #canvas_container {
                width: 500px;
                border: 1px solid #aaa;
            }
        </style>
    </head>
    <body>
        <div id="canvas_container"></div>
        <script type="text/javascript">
            window.onload = function () {
                // the points here should be generated by your ASP.NET application
                drawLine([
                    // the points here should be generated by your ASP.NET application
                    { x: 0, y: 0, t: 0 },
                    { x: 100, y: 230, t: 1520 },
                    { x: 210, y: 290, t: 3850 },
                    { x: 150, y: 200, t: 5060 },
                ]);
            }
        </script>
    </body>
</html>


拉斐尔戏剧
功能抽绳（点）{
变量路径=['M'+点[0].x+'+点[0].y]；
//构建路径
对于（变量i=1；i


这些点位于HTML页面的末尾，在您的应用程序中，您可以从模型中生成这些点。
谢谢您的建议！这肯定对我有用。然而，由于我对web开发还不熟悉，我尝试用Raphael运行一个简单的示例，但不幸的是，未能成功。因此，如果可能，请您报告一个完整的示例，我如何运行您的代码？你好，弗里达！我添加了一个使用我的代码的html示例。我认为对拉斐尔的介绍有点超出了这个答案的范围，但是如果你愿意，你可以看看这个：亲爱的艾哈迈德！如果你能再帮我一件事，我将不胜感激。到目前为止，我已经设法从db中检索x、y和t数组，并将它们插入Javascript数组，如下所示：Dim arrayX_name as String=“js_x”Dim arrayX_values as String=“100210150”csm。我遇到了一个问题：如何将这些数据输入到用Raphael创建的drawLine（）函数中。你能帮我做这个吗？你好，弗里达！还有一件事，如果我只想显示点而不想显示线，我应该如何改变函数/FridaAs要想在函数中输入点，只需以与输出HTML相同的方式输出javascript块即可。严格来说，这不是发送数据的最干净的方式，但我认为对于您的目的来说，它应该工作得很好。如果要绘制点而不是线，则需要重写函数。再一次，我鼓励你阅读一些拉法尔教程，如果你自己能做到这一点，试试看。