javascript - 如何使用 javascript 将元素设置为旋转和轨道动画

Question

我想知道是否有一种方法可以将变换属性设置为元素，以便它可以旋转(围绕自己的中心)并围绕不同的点运行。这是我到目前为止所拥有的: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 link)。一旦解决了，你就可以考虑如何让它绕其他点运行。这可以通过将其包含在 <g> 中来完成。具有另一个旋转变换的元素 ( jsfiddle again )。

更长的答案:

你处理这个问题的方式是错误的。如果您从一个原点已经位于您希望其旋转的点的对象开始，则旋转会更容易使用。特别是对于齿轮对象，很容易 calculate the coordinates with a bit of code 。如果您还需要应用平移偏移，请使用另一个 <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>