Question

我正在尝试使用svg动画在椭圆路径上旋转圆圈，我正在尝试的代码是在圆形路径上旋转它而不是在我制作的椭圆上，任何人都可以帮我解决这个问题吗？

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

Answer 1

我相信它不遵循你的道路是因为你的数学有点偏差。您正在绘制一个椭圆，但您的旋转数学是圆形的。要么纠正你的数学，要么更好地遵循Phrogz的建议并学习SMIL。

以下是一些可以帮助您入门的SVG：

＆＃13;

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

＆＃13;

请注意，您必须使用路径对象，并且必须至少从两个弧构建椭圆。

svg椭圆路径上的圆圈动画

1 个答案: