為什么旋轉元件會反彈？

Question

我有一個svg元素，我正在添加一個簡單的旋轉屬性。 問題是，我希望元素相對於自身的中心旋轉，而不是整個svg，所以我指定旋轉的x和y，但它有一個奇怪的彈性效果。

 let currentAngle = 0; function rotate() { d3.select('.group1') .transition() .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; currentAngle += 90; return `rotate(${currentAngle}, ${rx}, ${ry})`; }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewbox="0 0 1600 1600" width="500" height="500"> <g class="group1" onclick="rotate()"> <rect x="250" y="250" width="100" height="100" /> <circle cx="420" cy="300" r="50" /> </g> </svg> 

作為替代方案，我嘗試在css上添加transform-origin ，類似於transform-origin: 800px 800px; （但當然使用有效的中心px）雖然它在Chrome中有效，但它在IE和Safari中不起作用。

為什么在旋轉時提供x和y使我的元素反彈？

Answer 1

關於這個問題的處理有幾個問題。 這里有一個解釋了一下發生了什么： D3.js動畫旋轉

Mike Bostock在這里做的方式： https ： //bl.ocks.org/mbostock/3305854是將對象放在<g> ，然后轉換到你想要的位置然后旋轉。 這可能是獲得精彩動畫的最簡單方法。 例如：

 let currentAngle = 0; function rotate() { d3.select('rect') .transition() .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; currentAngle += 45; return `rotate(${currentAngle}, ${rx}, ${ry})`; }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewbox="0 0 1600 1600" width="500" height="500"> <g transform="translate(250, 250)"> <rect x="-50", y="-50" width="100" height="100" onclick="rotate()" /> </g> </svg> 

Answer 2

看看這個不同

如果你select的id或class和rotate慢慢地，你會看到一點中間旋轉移動的紅點，但select的id我的東西更加穩定不喜歡select的class就更難反彈

 let currentAngle = 0; let currentAngle2 = 0; function rotate() { d3.select('#aa') .transition() .duration(300) .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle += 10; return `rotate(${currentAngle}, ${rx}, ${ry})`; }); } function rotate2() { d3.selectAll('.aa') .transition() .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle2 += 10; return `rotate(${currentAngle2}, ${rx}, ${ry})`; }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewbox="0 0 1600 1600" width="500" height="500"> <g id ='aa' onclick="rotate()"> <rect x="100", y="100" width="100" height="100" /> <circle cx="250" cy="150" r="50"/> </g> <g class ='aa' onclick="rotate2()"> <rect x="600", y="100" width="100" height="100" /> <circle cx="750" cy="150" r="50" /> </g> </svg> 

然后，如果你用苛刻的價值（大價值）彈跳它，你將徹底看到紅點反彈，但再一次select id更穩定

 let currentAngle = 0; let currentAngle2 = 0; function rotate() { d3.select('#aa') .transition() .duration(300) .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle += 90; return `rotate(${currentAngle}, ${rx}, ${ry})`; }); } function rotate2() { d3.selectAll('.aa') .transition() .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle2 += 90; return `rotate(${currentAngle2}, ${rx}, ${ry})`; }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewbox="0 0 1600 1600" width="500" height="500"> <g id ='aa' onclick="rotate()"> <rect x="100", y="100" width="100" height="100" /> <circle cx="250" cy="150" r="50"/> </g> <g class ='aa' onclick="rotate2()"> <rect x="600", y="100" width="100" height="100" /> <circle cx="750" cy="150" r="50" /> </g> </svg> 

解

你必須慢慢地旋轉到終點，你可以使用d3.interpolate來做補間，並且它可以通過id或class完全旋轉

 let currentAngle = 0; let currentAngle2 = 0; function rotate() { d3.select('#aa') .transition() .duration(300) .attrTween("transform", tween); /* .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle += 10; // console.log(rx,ry,currentAngle) return `rotate(${currentAngle}, ${rx}, ${ry})`; }); */ function tween(d, i, a) { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') var e = `rotate(${currentAngle}, ${rx}, ${ry})` currentAngle += 90; var o = `rotate(${currentAngle}, ${rx}, ${ry})` return d3.interpolateString(e,o); } } function rotate2() { d3.selectAll('.aa') .transition() .duration(300) .attrTween("transform", tween); /* .attr('transform', function() { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') currentAngle2 += 10; // console.log(rx,ry,currentAngle) return `rotate(${currentAngle2}, ${rx}, ${ry})`; }); */ function tween(d, i, a) { let bb = this.getBBox(); let rx = bb.x + bb.width / 2; let ry = bb.y + bb.height / 2; d3.select(this).append('circle') .attr('cx',rx) .attr('cy',ry) .attr('r',20) .attr('fill','red') var e = `rotate(${currentAngle2}, ${rx}, ${ry})` currentAngle2 += 90; var o = `rotate(${currentAngle2}, ${rx}, ${ry})` return d3.interpolateString(e,o); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewbox="0 0 1600 1600" width="500" height="500"> <g id ='aa' onclick="rotate()"> <rect x="100", y="100" width="100" height="100" /> <circle cx="250" cy="150" r="50"/> </g> <g class ='aa' onclick="rotate2()"> <rect x="600", y="100" width="100" height="100" /> <circle cx="750" cy="150" r="50" /> </g> </svg>