我在完成需要在网络应用程序中将线条显示为动画的任务时遇到困难。
线数据存储在数据库中，由 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) ... ...
因此，任务是根据给定的时间戳在网络应用程序中显示这些点。
我的问题首先是我不知道使用什么样的图形插件，然后如何实现它(即如何使用定时器，如何制作动画等)。
如果您能提供帮助，我将不胜感激!如果您需要有关此任务的更多信息，请告诉我。我很乐意提供。
亲切的问候， 弗里达
最佳答案
我想我会使用 Raphaël对于这样的事情。它易于使用并支持所有主要浏览器。动画线条图可能有点麻烦，因为您必须将每个步骤生成为单独的路径，但这应该不会太难。
这是一个非常简单的例子
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();
这是一个 fiddle ，您可以在其中看到它的实际效果:http://jsfiddle.net/toxicsyntax/FLPdr/的 更新
这是一个使用上述代码的完整 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>
这些点位于 HTML 页面的末尾，您可以在您的应用程序中从您的模型中生成这些点。
关于javascript - ASP.NET 中的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13321139/