Question

我正在尝试让一些DOM元素在固定点周围平滑旋转。我正在使用jQuery从头开始编写这个，无论我为setInterval选择什么样的更新速度，或者每次循环中轨道前进的度数有多小，我都会得到这个janky阶梯动画效果。我已经尝试过使用jquery的.animate而不是.css，希望它可以解决问题，但我似乎无法让它工作。任何帮助表示赞赏。

换句话说，它不像在HTML5画布中旋转图像那么流畅。我想让它更顺畅。

Here is a jsFiddle demonstrating the issue.

注意动画是不是很流畅？

供参考，以下是代码：

HTML

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

CSS

#div{
    position:absolute;
    height: 20px;
    width: 20px;
    background-color: #000;
}
.dot{
    position:absolute;
    width: 5px;
    height: 5px;
    background-color: #000;
}
button{
    position:absolute;
}

.stop{
    top:200px;
}
.start{
    top:225px;
}

所有重要的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;
}

我宁愿不使用外部库/插件，但如果这是接受的做这种东西的方法，我会的。谢谢你的时间。

Answer 1

这是因为您为 top 和 left 属性设置的值已向上舍入。您应该尝试使用CSS Transforms。结合CSS动画/过渡和CSS变换，您还应该能够在没有JavaScript的情况下获得动画。

Answer 2

哦，我自己也遇到了！实际上你无能为力，你看到的口吃是像素大小。像素是基于css的动画的最小步骤，你不能做“半像素”或“0.2像素”。您将看到css3动画同样不断发生。

唯一的解决方案就是加快你的动画，我很害怕。

此外，cosndsider使用rquestAnimationFrame而不是interval：https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

在小间隔内通过javascript更新css时的口吃动画

2 个答案: