Javascript 动画棒球运动员答案

【问题标题】：Javascript Animation Baseball RunnersJavascript 动画棒球运动员
【发布时间】：2015-07-21 02:22:41
【问题描述】：

提前感谢您的帮助。我希望有人可以提供一些 Javascript 或 jQuery 动画的可靠示例，用于围绕棒球场运行，而不是从头开始。

到目前为止，我发现至少有 1 个想法让我很接近，但需要引入很多控制。我正在寻找跟踪实时进度，因此这将取决于击球手在基地周围的进展情况。因此，如果击球手击中双打，动画将转到二垒并停止。最终我需要添加与圈子交互的功能，但这将是另一回事。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
var context;
var x=100;
var y=200;
var dx=3;
var dy=3;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}

function draw()
{
 context.clearRect(0,0, 300,300);
 context.beginPath();
 context.fillStyle="#0000ff";
 // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
 context.arc(x,y,20,0,Math.PI*2,true);
 context.closePath();
 context.fill();
 // Boundary Logic
 if( x<0 || x>300) dx=-dx; 
 if( y<0 || y>300) dy=-dy; 
 x+=dx; 
 y+=dy;
 }

</script>
</head>
<body onLoad="init();">
<canvas id="myCanvas" width="300" height="300" > </canvas>
</body>
</html>

【问题讨论】：

我想知道你的代码是什么样子的
听起来像是 SVG 专家的工作
什么是“盒子移动”？ “而不是从头开始。” ?
或许可以作为起点：jsfiddle.net/4LzK4
例子？这就是谷歌的目的。 SO 不是创意工厂。当您有接近但无法正常工作的示例代码时......然后您提出问题

标签： javascript jquery css canvas svg

【解决方案1】：

很多反对票，我明白为什么，但是如果你使用 svg 和库，例如 Snap，它实际上非常简单。

jsfiddle点击在基地之间移动

这是一个过程的失败......

首先加载一个svg，从互联网上摘下一个，然后加载它..

Snap.load( "https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg", onSVGLoaded )

我们需要创建一条路线，只需记录一次鼠标单击即可获取它的 x,y，您可以使用它来创建路径...

s.click( setRoute );

function setRoute(ev, x,y) {
  console.log('xy', ev, x, y); // a click will log coordinates so you can build path route
  movePlayer(currentPath++);
  if( currentPath > 3) currentPath = 0;
}

点击想要作为路径的点后，将它们添加到数组中......

// build our 'virtual path' and player to animate when clicked

function onSVGLoaded( frag ) {
  s.append( frag );
  s.click( setRoute )
  paths = [
    "M335,430L448,324",  // these were logged from mouse click
    "M453,325L337,210",
    "M330,210L215,324",
    "M215,325L330,436"
  ];

  player = s.circle(335,430,10).attr({ fill: 'red' })
  for( var c=0; c<paths.length; c++) {
    pathList[c] = s.path(paths[c]).attr({ stroke: 'none' });
  }
}

最后，我们可以为运动设置动画...

function movePlayer( currentPath ) {
  Snap.animate(0, pathList[currentPath].getTotalLength(), function( val ) {
    var pt = pathList[currentPath].getPointAtLength( val );
player.attr({ cx: pt.x, cy: pt.y })
  }, 2000)
}

edit: 呵呵，刚看到这个有多大了，不知道为什么现在出现了！

【讨论】：

【解决方案2】：

使用 Html5 画布

您可以使用linear interpolation 导航您的线条，也可以使用De Casteljau's algorithm 导航您的贝塞尔曲线。

使用 SVG

Svg 路径具有内置方法，可为您提供路径的总长度：getTotalLength 以及沿路径指定长度的 X、Y：getPointAtLength。您可以使用这些方法来导航您的直线和曲线。

【讨论】：