椭圆路径上的圆的svg动画

svg animation of a circle on an elliptical path

本文关键字：svg 动画路径更新时间：2023-09-26

我正在尝试使用svg动画在椭圆路径上旋转圆，我尝试的代码是在圆形路径上旋转它，而不是在我制作的椭圆上，有人能在这个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>

我相信它没有遵循你的路径的原因是因为你的数学有点偏离。你画的是一个椭圆，但你的旋转数学是圆形的。要么纠正你的数学，要么更好地遵循Phrogz的建议，学习SMIL。

这里有一些SVG可以让你开始：

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

请注意，必须使用路径对象，并且椭圆必须至少由两条圆弧构成。