在很短的时间间隔内通过javascript更新css时，会出现口吃动态观察动画

我试图使一些DOM元素围绕一个固定点平滑旋转。我是用jQuery从头开始写这篇文章的，不管我为setInterval选择什么更新速度，也不管我在每个循环中轨道前进的度数有多小，我都会得到这种简陋的楼梯动画效果。我曾尝试使用jquery的.animate而不是.css，希望它能使事情变得更顺利，但我似乎无法让它工作。感谢您的帮助

换句话说，它不像在HTML5画布中旋转图像那样平滑。我想让它更平滑

注意，动画不是很平滑吗

以下代码供参考：

HTML

<div id="div"></div>
<div class="dot"></div>
<button class="stop">STOP</button>
<button class="start">START</button>

最重要的JAVASCRIPT

$(document).ready(function(){
    $('#div').data('angle', 90);
    var interval;

    $('.stop').on('click', function(){
        if(interval){
            clearInterval(interval);
            interval = undefined;
        }
    });

    $('.start').on('click', function(){
        if(!interval){
            interval = setBoxInterval();
        }
    });

    interval = setBoxInterval();
});

function drawOrbitingBox(degrees){
    var centerX = 100,
        centerY = 100,
        div = $('#div'),
        orbitRadius = 50;

    //dot might not be perfectly centered
    $('.dot').css({left:centerX, top:centerY});

    //given degrees (in degrees, not radians), return the next x and y coords
    function coords(degrees){
        return {left:centerX + (orbitRadius * Math.cos((degrees*Math.PI)/180)), 
                top :centerY - (orbitRadius * Math.sin((degrees*Math.PI)/180))};
    }

    //increment the angle of the object and return new coords through coords()
    function addDegrees(jqObj, degreeIncrement){
        var newAngle = jqObj.data('angle') + degreeIncrement;
        jqObj.data('angle', newAngle);
        return coords(newAngle);
    }

    //change the left and top css property to simulate movement
    //  I've tried changing this to .animate() and using the difference
    //  between current and last position to no avail
    div.css(addDegrees(div, degrees), 1);
}

function setBoxInterval(){
    var interval = window.setInterval(function(){
        drawOrbitingBox(-0.2); //This is the degree increment
    }, 10); //This is the amount of time it takes to increment position by the degree increment

    return interval;
}

---

我不想求助于外部库/插件，但如果这是做这类事情的公认方式，我会的。感谢您抽出时间。

这是因为您为“顶部”和“左侧”属性设置的值已向上舍入。您应该尝试使用CSS转换。

---

结合CSS动画/转换和CSS转换，您也应该能够在不使用JavaScript的情况下获得动画。

哦，我自己也遇到过这种情况！ 实际上你什么也做不了，你看到的口吃是像素大小。像素是基于css的动画的最小步骤，不能使用“半像素”或“0.2像素”。您将看到，css3动画也会发生同样的情况

恐怕唯一的解决办法就是加快你的动画速度

---

另外，cosndsider使用rquestAnimationFrame而不是interval:

事实上，如果你将interval设置为1，它会变得非常平滑是的，但你仍然可以看到扭曲的“楼梯”曲线，我将在更大的图像上使用它，在这些图像中，口吃更加明显。我会查看它，然后再联系你！尝试将第32行更改为

返回{transform:“translate”（+（centerX+（orbitRadius*Math.cos（（degrees*Math.PI）/180）））+“px”，+（centerY-（orbitRadius*Math.sin（（degrees*Math.PI）/180））+“px”）return{transform:“translate”（+（centerX+（orbitRadius*Math.cos（（degrees*Math.PI）/180）））+“px”（+（centerY-（orbitRadius*Math.sin（（degrees*Math.PI）/180））+（centerY-（orbitRadius*Math.sin（（degrees*Math.PI）/180）））+“px）rotate（0.001deg”）；

，看起来不错，尽管这。

$(document).ready(function(){
    $('#div').data('angle', 90);
    var interval;

    $('.stop').on('click', function(){
        if(interval){
            clearInterval(interval);
            interval = undefined;
        }
    });

    $('.start').on('click', function(){
        if(!interval){
            interval = setBoxInterval();
        }
    });

    interval = setBoxInterval();
});

function drawOrbitingBox(degrees){
    var centerX = 100,
        centerY = 100,
        div = $('#div'),
        orbitRadius = 50;

    //dot might not be perfectly centered
    $('.dot').css({left:centerX, top:centerY});

    //given degrees (in degrees, not radians), return the next x and y coords
    function coords(degrees){
        return {left:centerX + (orbitRadius * Math.cos((degrees*Math.PI)/180)), 
                top :centerY - (orbitRadius * Math.sin((degrees*Math.PI)/180))};
    }

    //increment the angle of the object and return new coords through coords()
    function addDegrees(jqObj, degreeIncrement){
        var newAngle = jqObj.data('angle') + degreeIncrement;
        jqObj.data('angle', newAngle);
        return coords(newAngle);
    }

    //change the left and top css property to simulate movement
    //  I've tried changing this to .animate() and using the difference
    //  between current and last position to no avail
    div.css(addDegrees(div, degrees), 1);
}

function setBoxInterval(){
    var interval = window.setInterval(function(){
        drawOrbitingBox(-0.2); //This is the degree increment
    }, 10); //This is the amount of time it takes to increment position by the degree increment

    return interval;
}