CODEWITHSUNDEEP
javascripthtmlsvg
Ruby
Ruby

Reputation: 893

svg animation of a circle on an elliptical path

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>

Upvotes: 1

Views: 4377

Answers (1)

BigMac66
BigMac66

Reputation: 1538

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.

Upvotes: 1

Related Questions