Javascript 椭圆路径上圆的svg动画
我尝试使用svg动画在椭圆路径上旋转圆，我尝试的代码是在圆形路径上旋转圆，而不是在我制作的椭圆上旋转圆，有人能在这个plz上帮助我吗Javascript 椭圆路径上圆的svg动画,javascript,html,svg,Javascript,Html,Svg,我尝试使用svg动画在椭圆路径上旋转圆，我尝试的代码是在圆形路径上旋转圆，而不是在我制作的椭圆上旋转圆，有人能在这个plz上帮助我吗 <!DOCTYPE html> <html> <head> <title>JavaScript SVG Animation</title> <style> /* CSS here. */ </style>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript SVG Animation</title>
<style>
/* CSS here. */
</style>
<script>
/* CONSTANTS */
var initialTheta = 0; // The initial rotation angle, in degrees.
var thetaDelta = 0.3; // The amount to rotate the square every "delay" milliseconds, in degrees.
var delay = 10; // The delay between animation stills, in milliseconds. Affects animation smoothness.
var angularLimit = 360; // The maximum number of degrees to rotate the square.
var cx = 200; // circle center
var cy = 150; //circle center
/* GLOBALS */
var theCircle; // Will contain a reference to the square element, as well as other things.
var timer; // Contains the setInterval() object, used to stop the animation.
var pauseEvent = false;
function init()
{
theCircle = document.getElementById("s1"); // Set this custom property after the page loads.
theCircle.currentTheta = initialTheta; // The initial rotation angle to use when the animation starts, stored in
timer = setInterval(doAnim, delay); // Call the doAnim() function every "delay" milliseconds until "timer" is cleared.
}
function doAnim()
{
if (theCircle.currentTheta > angularLimit)
{
clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
return; // No point in continuing; stop now.
}
theCircle.setAttribute("transform", "rotate(" + theCircle.currentTheta + "," + cx + "," + cy +")"); // Rotate the square by a small amount. around given circle point
theCircle.currentTheta += thetaDelta; // Increase the angle that the square will be rotated to, by a small amount.
}
window.onload = function(){
var elplay = document.getElementById("play");
elplay.addEventListener("click", function(){
if(!pauseEvent){
init();
doAnim();
} else{
init();
doAnim();
pauseEvent = false;
}
}, false);
var elstop = document.getElementById("stop");
elstop.addEventListener("click", function(){
theCircle.currentTheta = 0 //initialTheta; // The initial rotation angle to use when the animation starts, stored in
theCircle.setAttribute("transform", "rotate(" + theCircle.currentTheta + "," + cx + "," + cy +")"); // Rotate the square by a small amount. around given circle point
clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
return; // No point in continuing; stop now.
}, false);
var elpause = document.getElementById("pause");
elpause.addEventListener("click", function(){
initialTheta = theCircle.currentTheta;
pauseEvent = true;
clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
return; // No point in continuing; stop now.
}, false);
}
</script>
</head>
<body>
<button id = "play" style="position: absolute;">Play</button>
<button id = "pause" style="position: absolute;left: 65px;">Pause</button>
<button id = "stop" style="position: absolute;left: 135px;">Stop</button>
<svg width="800px" height="800px" viewBox="0 0 800 800">
<g transform="translate(200, 150)">
<ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
<circle id = "s1" cx = "250" cy = "10" r = "20" fill = "yellow" stroke = "black" stroke-width = "3"/>
</g>
</svg>
</html>
JavaScript SVG动画
/*这里是CSS*/
/*常数*/
var initialTheta=0；//初始旋转角度，以度为单位。
var thetaDelta=0.3；//每“延迟”毫秒旋转正方形的量，单位为度。
var延迟=10；//动画静止之间的延迟，以毫秒为单位。影响动画平滑度。
var angularLimit=360；//旋转正方形的最大度数。
变量cx=200；//圆心
var-cy=150//圆心
/*全球的*/
var theCircle；//将包含对方形元素的引用以及其他内容。
变量计时器；//包含用于停止动画的setInterval（）对象。
var pauseEvent=false；
函数init（）
{
theCircle=document.getElementById（“s1”）；//在页面加载后设置此自定义属性。
theCircle.currentTheta=initialTheta；//动画开始时使用的初始旋转角度，存储在
timer=setInterval（doAnim，delay）；//每隔“delay”毫秒调用一次doAnim（）函数，直到清除“timer”。
}
函数doAnim（）
{
if（圆圈电流θ>角度极限）
{
clearInterval（timer）；//正方形旋转足够大，指示浏览器停止调用doAnim（）函数。
return；//继续没有意义；现在停止。
}
setAttribute（“transform”、“rotate”（+theCircle.currentTheta+”、“+cx+”、“+cy+”）；//围绕给定的圆点，将正方形旋转一小段
theCircle.currentTheta+=thetaDelta；//稍微增加正方形旋转的角度。
}
window.onload=函数（）{
var elplay=document.getElementById（“play”）；
elplay.addEventListener（“单击”，函数（）{
如果（！pauseEvent）{
init（）；
doAnim（）；
}否则{
init（）；
doAnim（）；
pauseEvent=false；
}
}，假）；
var elstop=document.getElementById（“停止”）；
addEventListener（“单击”，函数（）{
theCircle.currentTheta=0//initialTheta；//动画开始时使用的初始旋转角度，存储在
setAttribute（“transform”、“rotate”（+theCircle.currentTheta+”、“+cx+”、“+cy+”）；//围绕给定的圆点，将正方形旋转一小段
clearInterval（timer）；//正方形旋转足够大，指示浏览器停止调用doAnim（）函数。
return；//继续没有意义；现在停止。
}，假）；
var elpause=document.getElementById（“暂停”）；
elpause.addEventListener（“单击”，函数（）{
initialTheta=电路电流Theta；
pauseEvent=true；
clearInterval（timer）；//正方形旋转足够大，指示浏览器停止调用doAnim（）函数。
return；//继续没有意义；现在停止。
}，假）；
}
玩
暂停
停止
我认为它没有遵循你的思路是因为你的数学有点不对劲。您正在绘制椭圆，但旋转数学是圆形的。要么纠正你的数学错误，要么最好还是听从佛洛兹的建议，学习SMIL 以下是一些SVG帮助您入门：