一个椭圆路径上的圆的svg动画 [英] svg animation of a circle on an elliptical path
本文介绍了一个椭圆路径上的圆的svg动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用svg动画在椭圆路径上旋转圆，我正在尝试的代码是将其旋转到圆形路径上，而不是在我制作的椭圆上，任何人都可以在此PLZ上帮助我吗？
p> <！DOCTYPE html>
< html>
< head>
< title> JavaScript SVG Animation< / title>
< style>
/ * CSS在这里。 * /
< / style>
< script>
/ * CONSTANTS * /
var initialTheta = 0; //初始旋转角度，以度为单位。
var thetaDelta = 0.3; //每延迟毫秒以度数为单位旋转平方的量。
var delay = 10; //动画剧照之间的延迟，以毫秒为单位。影响动画平滑度。
var angularLimit = 360; //旋转正方形的最大度数。
var cx = 200; //圆心
var cy = 150; //圈子中心
/ * GLOBALS * /
var theCircle; //将包含对方形元素的引用以及其他内容。
var timer; //包含setInterval（）对象，用于停止动画。
var pauseEvent = false;
函数init（）
{
theCircle = document.getElementById（s1）; //在页面加载后设置此自定义属性。
theCircle.currentTheta = initialTheta; //动画开始时使用的初始旋转角度，存储在
timer = setInterval（doAnim，delay）; //每延迟毫秒调用doAnim（）函数，直到timer被清除。
函数doAnim（）
{
if（theCircle.currentTheta> angularLimit）
{
clearInterval（timer）; //正方形已经足够旋转，指示浏览器停止调用doAnim（）函数。
return; //没有点继续;现在停下来。
}
theCircle.setAttribute（transform，rotate（+ theCircle.currentTheta +，+ cx +，+ cy +））; //少量旋转方块。在给定的圆点附近
theCircle.currentTheta + = thetaDelta; //增加方块旋转的角度，增加一小部分。
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; //动画开始时使用的初始旋转角度，存储在
theCircle中。 setAttribute（transform，rotate（+ theCircle.currentTheta +，+ cx +，+ cy +））; //在给定圆点周围
周围少量旋转平方clearInterval（timer）; //正方形已经足够旋转，指示浏览器停止调用doAnim（）函数。
return; //没有继续点;现在停止。
}，false）;
var elpause = document.getElementById（pause）;
elpause.addEventListener（click，function（）{
initialTheta = theCircle.currentTheta;
pauseEvent = true;
clearInterval（timer）; //正方形已经足够旋转，指示浏览器停止调用doAnim（）函数。
return; //没有点继续;现在停止
}，false）;
}
< / script>
< / head>
< body>
< button id =playstyle =position：absolute;>播放< / button>
< button id =pausestyle =position：absolute; left：65px;>暂停< / button>
< button id =stopstyle =position：absolute; left：135px;>停止< / button>
< svg width =800pxheight =800pxviewBox =0 0 800 800>
< g transform =translate（200，150）>
< / g>
< / svg>
< / html>
解决方案
我相信它不遵循你的路径的原因是因为你的数学有点偏离。你正在画一个椭圆，但你的旋转数学是圆形的。要么改正你的数学，要么更好地遵循Phrogz的建议和学习SMIL。
这是一些SVG，帮助你开始：
< pre class =snippet-code-html lang-html prettyprint-override>
< html>< svg xmlns =http://www.w3.org/2000/svgversion = 1.1xmlns：xlink =http://www.w3.org/1999/xlinkwidth =600height =600> < path id =orbitd =M200 400 A200,200 0 1,1 600,400 A200,200 0 1,1 200,400fill =salmonstroke =blackstroke-width =3/> < circle r =20fill =yellowstroke =blackstroke-width =3> < animateMotion begin =0sdur =12srepeatCount =indefinite> < mpath xlink：href =＃orbit/> < / animateMotion> < /圈> < / svg>< / html>
必须使用路径对象，椭圆必须由至少两个弧构成。
i am trying to rotate circle on a elliptrical path using svg animation, the code that i am trying is rotating it on a circular path not on the ellipse that i have made , could anyone help me on this plz ??
<!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>
解决方案
I believe the reason it is not following your path is because your math is a bit off. You are drawing an ellipse but your rotation math is circular. Either correct your math or better still follow Phrogz advice and learn SMIL.
Here is some SVG to get you started:
<html>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<path id="orbit" d="M200 400 A200,200 0 1,1 600,400 A200,200 0 1,1 200,400" fill = "salmon" stroke = "black" stroke-width = "3" />
<circle r = "20" fill = "yellow" stroke = "black" stroke-width = "3">
<animateMotion begin="0s" dur="12s" repeatCount="indefinite" >
<mpath xlink:href="#orbit"/>
</animateMotion>
</circle>
</svg>
</html>
NOTE that you must use a path object and a ellipse has to be constructed from at least two arcs.
这篇关于一个椭圆路径上的圆的svg动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
