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

Question

我想知道是否有一种方法可以将transform属性设置为一个元素，以便它可以旋转（围绕他自己的中心）并围绕另一个点旋转。 到目前为止，这是我所拥有的： 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);
 }
}

我设法使它绕一个点旋转，但是我不确定如何同时绕其中心将其旋转到0。

谢谢！

Answer 1

简短答案：

首先，您必须找到对象中心的位置。 您提供了(100,100)作为旋转中心坐标，但是齿轮对象的中心实际上位于(65,141) （ jsfiddle链接 ）。 固定下来之后，您就可以考虑如何使其绕其他点运行。 这可以通过使用另一个旋转变换（ 再次是jsfiddle ）将其包含在<g>元素中来完成。

更长的答案：

您正在以错误的方式处理此问题。 如果从对象的原点已经在要旋转的点开始，旋转就容易得多。 特别是对于齿轮对象，只需一点代码即可很容易地计算出坐标 。 如果您还需要应用平移偏移，请使用另一个<g>元素。

这是一个示例，其中两个齿轮绕着自己的中心旋转，同时绕第三点旋转：

 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

您可以使用animateTransform来执行各种轮换，如以下简短示例所示： http : //jsfiddle.net/hmct2eof/

不需要javascript。 仅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>