为什么这个圆圈没有围绕正确的中心旋转？答案

【问题标题】：Why isn't this circle rotating around the correct center?为什么这个圆圈没有围绕正确的中心旋转？
【发布时间】：2012-10-26 03:12:46
【问题描述】：

Jsfiddle：http://jsfiddle.net/yJJs7/

Javascript：

function main(){
    var centerx=250;
    var centery=250;
    var degrees=0;
    var div=document.getElementById('test');
    var move=function(){    
        if(degrees>360)degrees=degrees%360;
        var radians = degrees*Math.PI/180;
        var newx = Math.cos(radians)*100;
        var newy = Math.sin(radians)*100;
        div.style.top=(newy+centery)+'px';
        div.style.left=(newx+centerx)+'px';
        degrees+=10;   
    };
    setInterval(move,50);
    console.log(div);
}
main();

HTML：

<div id="test"></div>
<div id="test2"></div>

CSS：

#test{
    height:100px;
    width:100px;
    background:black;
    border-radius:100px;
    position:fixed;
}
#test2{
    position:fixed;
    height:30px;
    width:30px;
    background:black;
    border-radius:30px;
    position:fixed;
    top:250px;
    left:250px;
}

第二个 div 以 250x250 像素为中心，第一个 div 应围绕它旋转。为什么不是？

【问题讨论】：

+1 回答一个有趣的问题：-) 纯 JS 2D 动画

标签： javascript animation geometry trigonometry

【解决方案1】：

您的方程式正在计算圆心的新位置，但 style.top/style.left 从圆上的顶部/最左侧点开始，您需要减去半径：

div.style.top=(ny+cy-35)+'px';
div.style.left=(nx+cx-35)+'px';

http://jsfiddle.net/yJJs7/1/

这将围绕小圆圈 (265, 265) 而不是 (250, 250) 的中心旋转，因此您可能希望在 css 中偏移小圆圈：

#test2{
    ...
    top:235px;
    left:235px;
}

div.style.top=(ny+cy-50)+'px';
div.style.left=(nx+cx-50)+'px';

http://jsfiddle.net/yJJs7/7/

【讨论】：

太棒了，这是一个可怕的错过。

【解决方案2】：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #test {
        height:100px;
        width:100px;
        background:black;
        border-radius:100px;
        position:fixed;
    }
    #test2 {
        position:fixed;
        height:30px;
        width:30px;
        background:black;
        border-radius:30px;
        position:fixed;
        top:250px;
        left:250px;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function (e) {
        main(100);
    });

    function main(distance) {

        var $this = $("#test2");
        var offset = $this.offset();
        var width = $this.width();
        var height = $this.height();

        var cx = offset.left + width / 2;
        var cy = offset.top + height / 2;

        var i = 0;
        var $div = $('#test');
        var divOffset = $div.offset();
        var divWidth = $div.width();
        var divHeight = $div.height();

        var move = function () {
            if (i > 360) i = i % 360;
            var j = i * Math.PI / 180;
            var nx = Math.cos(j) * distance;
            var ny = Math.sin(j) * distance;
            var left = nx + cx - divWidth / 2
            var top = ny + cy - divHeight / 2

            $div.offset({
                top: top,
                left: left
            });

            i += 10;
        };

        setInterval(move, 50);

    }
    </script>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>
</body>

【讨论】：