我如何为元素设置动画以使其旋转并通过javascript进行轨道运动

Question

I was wondering if there is a way to set the transform attribute to an element so that it can rotate (around his own center) and orbit around a different point. This is what I have so far: http://jsfiddle.net/8nmtrg84/1/

function timerTick() {
 with (new Date()) {
 var  v;
 v = 8 * getSeconds();
 document.getElementById('left_gear_small').setAttribute('transform', 'rotate(' + v + ', 100, 100)');
 setTimeout(timerTick, 1000);
 }
}

I managed to orbit it around a point, however I am not sure how to rotate it around its own center to0, simultaneously.

Thanks!

Answer 1

Short answer:

First you have to find where the centre of your object is. You provided (100,100) as the rotation centre coordinates, but the centre of your gear object is actually at (65,141) ( jsfiddle link ). Once thats' fixed, then you can think about how to make it orbit some other point. This could be done by enclosing it in a <g> element with another rotation transform ( jsfiddle again ).

Longer answer:

You're approaching this the wrong way. Rotations are much easier to work with if you start with an object whose origin is already at the point you want it to rotate around. With gear objects in particular, it's very easy to calculate the coordinates with a bit of code . If you need to apply a translation offset too, use another <g> element.

Here's an example with two gears that rotate around their own centres while orbiting a third point:

 var theta = 0; function rotate_gears() { theta = theta + 3; document.getElementById('gear1').setAttribute('transform', 'rotate(' + theta + ')'); document.getElementById('gear2').setAttribute('transform', 'rotate('+(15-theta*3) + ')'); document.getElementById('spin').setAttribute('transform', 'rotate(' + (theta/2) + ')'); } setInterval(rotate_gears,30); 

 <svg width="200" height="200" viewBox="0 0 100 100"> <g transform="translate(50,50)"> <g id="spin" transform="rotate(0)"> <g transform="translate(-20,0)"> <path id="gear1" fill="gold" d="M0 42.5 1.41 42.98 3.07 46.9 4.66 47.27 6.2 47.09 7.66 46.37 8.39 42.17 9.65 41.39 11 41.05 12.48 41.15 15.11 44.51 16.73 44.46 18.18 43.88 19.4 42.81 19.02 38.57 20.03 37.48 21.25 36.81 22.71 36.52 26.11 39.08 27.67 38.61 28.92 37.68 29.82 36.33 28.35 32.33 29.05 31.02 30.05 30.05 31.38 29.39 35.34 30.99 36.72 30.13 37.68 28.92 38.2 27.38 35.75 23.89 36.09 22.44 36.81 21.25 37.92 20.27 42.15 20.79 43.27 19.6 43.88 18.18 43.99 16.56 40.72 13.82 40.67 12.34 41.05 11 41.88 9.76 46.1 9.17 46.87 7.74 47.09 6.2 46.77 4.61 42.91 2.81 42.48 1.39 42.5 0 42.98-1.41 46.9-3.07 47.27-4.66 47.09-6.2 46.37-7.66 42.17-8.39 41.39-9.65 41.05-11 41.15-12.48 44.51-15.11 44.46-16.73 43.88-18.18 42.81-19.4 38.57-19.02 37.48-20.03 36.81-21.25 36.52-22.71 39.08-26.11 38.61-27.67 37.68-28.92 36.33-29.82 32.33-28.35 31.02-29.05 30.05-30.05 29.39-31.38 30.99-35.34 30.13-36.72 28.92-37.68 27.38-38.2 23.89-35.75 22.44-36.09 21.25-36.81 20.27-37.92 20.79-42.15 19.6-43.27 18.18-43.88 16.56-43.99 13.82-40.72 12.34-40.67 11-41.05 9.76-41.88 9.17-46.1 7.74-46.87 6.2-47.09 4.61-46.77 2.81-42.91 1.39-42.48 0-42.5-1.41-42.98-3.07-46.9-4.66-47.27-6.2-47.09-7.66-46.37-8.39-42.17-9.65-41.39-11-41.05-12.48-41.15-15.11-44.51-16.73-44.46-18.18-43.88-19.4-42.81-19.02-38.57-20.03-37.48-21.25-36.81-22.71-36.52-26.11-39.08-27.67-38.61-28.92-37.68-29.82-36.33-28.35-32.33-29.05-31.02-30.05-30.05-31.38-29.39-35.34-30.99-36.72-30.13-37.68-28.92-38.2-27.38-35.75-23.89-36.09-22.44-36.81-21.25-37.92-20.27-42.15-20.79-43.27-19.6-43.88-18.18-43.99-16.56-40.72-13.82-40.67-12.34-41.05-11-41.88-9.76-46.1-9.17-46.87-7.74-47.09-6.2-46.77-4.61-42.91-2.81-42.48-1.39-42.5 0-42.98 1.41-46.9 3.07-47.27 4.66-47.09 6.2-46.37 7.66-42.17 8.39-41.39 9.65-41.05 11-41.15 12.48-44.51 15.11-44.46 16.73-43.88 18.18-42.81 19.4-38.57 19.02-37.48 20.03-36.81 21.25-36.52 22.71-39.08 26.11-38.61 27.67-37.68 28.92-36.33 29.82-32.33 28.35-31.02 29.05-30.05 30.05-29.39 31.38-30.99 35.34-30.13 36.72-28.92 37.68-27.38 38.2-23.89 35.75-22.44 36.09-21.25 36.81-20.27 37.92-20.79 42.15-19.6 43.27-18.18 43.88-16.56 43.99-13.82 40.72-12.34 40.67-11 41.05-9.76 41.88-9.17 46.1-7.74 46.87-6.2 47.09-4.61 46.77-2.81 42.91-1.39 42.48z" /> </g> <g transform="translate(40,0)"> <path id="gear2" fill="orange" transform="rotate(15)" d="M0 12.5 1.27 12.94 3.32 16.67 5.08 16.75 6.7 16.17 8.01 14.99 7.22 10.81 7.93 9.66 8.84 8.84 10.05 8.25 14.13 9.44 15.43 8.25 16.17 6.7 16.27 4.93 12.75 2.54 12.44 1.23 12.5 0 12.94-1.27 16.67-3.32 16.75-5.08 16.17-6.7 14.99-8.01 10.81-7.22 9.66-7.93 8.84-8.84 8.25-10.05 9.44-14.13 8.25-15.43 6.7-16.17 4.93-16.27 2.54-12.75 1.23-12.44 0-12.5-1.27-12.94-3.32-16.67-5.08-16.75-6.7-16.17-8.01-14.99-7.22-10.81-7.93-9.66-8.84-8.84-10.05-8.25-14.13-9.44-15.43-8.25-16.17-6.7-16.27-4.93-12.75-2.54-12.44-1.23-12.5 0-12.94 1.27-16.67 3.32-16.75 5.08-16.17 6.7-14.99 8.01-10.81 7.22-9.66 7.93-8.84 8.84-8.25 10.05-9.44 14.13-8.25 15.43-6.7 16.17-4.93 16.27-2.54 12.75-1.23 12.44z" /> </g> </g> </g> </svg> 

Answer 2

You can use animateTransform to perform various rotations as in this short sample: http://jsfiddle.net/hmct2eof/

No javascript is needed. Only SVG:

<svg width="320" height="320" viewBox="-160 -160 320 320">
  <circle fill="#0f0" stroke="#000" cx="0" cy="0" r="5"/>
  <g>
    <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="360"
        to="0"
        dur="7.33s"
        repeatCount="indefinite"/>            
    <g transform="translate(0, 100)">
        <path fill="orange" stroke="#000" d="M0-20L10,10L0,0L-10,10Z">
            <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0"
                      to="360"
                      dur="1s"
                      repeatCount="indefinite"/>            
        </path>
    </g>
  </g>
</svg>