棒球运动员的Javascript动画_Javascript_Jquery_Css_Canvas_Svg

棒球运动员的Javascript动画

javascript jquery css canvas svg

棒球运动员的Javascript动画,javascript,jquery,css,canvas,svg,Javascript,Jquery,Css,Canvas,Svg,提前感谢您的帮助。我希望有人能提供一些Javascript或jQuery动画的可靠例子，让你在棒球场上跑来跑去，而不是从头开始。到目前为止，我已经发现至少我认为这让我接近，但需要引入更多的控制。我正在寻找跟踪现场进度，所以这将是有条件的基础上，击球手在基地周围的进展。因此，如果击球手击出双打，动画将转到二垒并停止。最终，我需要添加与圆圈交互的功能，但那将是另一回事 <!DOCTYPE html> <head> <meta charset="UTF-8">

提前感谢您的帮助。我希望有人能提供一些Javascript或jQuery动画的可靠例子，让你在棒球场上跑来跑去，而不是从头开始。

到目前为止，我已经发现至少我认为这让我接近，但需要引入更多的控制。我正在寻找跟踪现场进度，所以这将是有条件的基础上，击球手在基地周围的进展。因此，如果击球手击出双打，动画将转到二垒并停止。最终，我需要添加与圆圈交互的功能，但那将是另一回事

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


无标题文件
var语境；
var x=100；
变量y=200；
var-dx=3；
var-dy=3；
函数init（）
{
context=myCanvas.getContext（'2d'）；
设置间隔（抽签，10）；
}
函数绘图（）
{
clearRect（0,03000）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
//在画布上的坐标100100处绘制半径为20的圆
弧（x，y，20，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
//边界逻辑
如果（x300）dx=-dx；
如果（y300）dy=-dy；
x+=dx；
y+=dy；
}

使用Html5画布
您可以使用
线性插值
来导航直线，也可以使用
De Casteljau算法
来导航贝塞尔曲线
使用SVG

Svg路径具有内置的方法，可以为您提供路径的总长度：
getTotalLength
，以及沿路径指定长度的X、Y:
getPointAtLength
。您可以使用这些方法来导航直线和曲线。
很多反对票，我可以理解为什么，但是如果您使用svg和库（例如Snap），这实际上非常简单
单击可在基准之间移动
这是一个过程的概述
首先加载一个svg，只需从internet上获取一个，然后加载它

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

编辑：呵呵，刚刚看到这个有多老了，不知道为什么现在突然出现了
我想知道你的代码看起来如何像SVG专家的工作“盒子移动”是什么？“而不是从零开始。”？也许作为一个起点：例子？这就是谷歌的目的。所以这不是一个创意工厂。当你有接近的示例代码，但不工作的权利…然后你问问题
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) }