如何使用javascript实现小球是沿着操场跑道轨迹运动

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。
选择用纯css分成四段控制动画，最终效果如图：



详细分析：

创建HTML：
HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。


核心css：
去掉了浏览器兼容用的代码。
把动画分成四个部分：上方直线->右边半圆->下方直线->左边半圆。
最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：




.layout{
width:10px;
height:150px;
position:relative;
margin-left:100px;
margin-top:50px;


animation-name:rotate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
animation-direction:normal;
}

@-webkit-keyframes rotate{
0%  {  left:0px; top:0px; 
transform:rotate(0deg);
}
25% { left:150px; top:0px; 
transform:rotate(0deg);
}
50% { left:150px; top:50px; 
transform:rotate(180deg);
}
75% { left:0px; top:50px; 
transform:rotate(180deg);
}
100%{ left:0px; top:0px; 
transform:rotate(360deg);
}
}

完整代码:

呵呵，我以前还真的用过JavaScript来做数学题，但是难点是如何实现未知数，但是你问的这个问题比较简单，首先需要预设好一个数组，是操场的每段路（或者时间单位）的坐标，作为一个二维数组需要绑定x和y分别是横竖坐标，开始loop，但是问题是你有没有小球运动的函数或者方法啊==

用多段线[pl]画出你需要的跑道线条。在用偏移[o]表达出跑道线条之间的间距及位置关系。之所以用多段线，是为了偏移的时候可以选一次对象，就可以完成偏移。希望对你有一点帮助……

用多段线[pl]画出你需要的跑道线条。在用偏移[o]表达出跑道线条之间的间距及位置关系。之所以用多段线，是为了偏移的时候可以选一次对象，就可以完成偏移。是否有一点点的帮助……