Question

我的元素绕着一个点旋转。 JSFiddle

HTML

<div class="center-dot">
    <div class="dot"></div>
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS：

.center-dot {position:relative;top:200px;left:200px;}
.dot {width:3px;height:3px;background:blue;}
.one {width:40px;height:40px;border-radius:40px;background:red;position:absolute;}
.two {width:40px;height:40px;border-radius:40px;background:green;position:absolute;}

JS：

var one = $('.one'),
    two = $('.two');

var one_start = 0,
    two_start = 0;

setInterval(function(){
    ++one_start;
    var one_css = {
        'left': Math.sin(one_start * 0.0010) * 100 ,
        'top': Math.cos(one_start * 0.0010) * 100
    }
    one.css(one_css);

    ++two_start;
    var two_css = {
        'left': Math.sin(two_start * 0.0025) * 200 ,
        'top': Math.cos(two_start * 0.0025) * 200
    }
    two.css(two_css);
}, 1);

但是他并没有完全这样做，而是喜欢它的曲折。

如何确保元素干净圆圈？

Answer 1

不要使用jQuery。

问题是位置四舍五入到最近的像素，这意味着形状不能遵循精确的圆。

Here是仅限CSS3的动画再现。通过使用transform，效果不会限制为整数像素值，因此可以完美地跟随您的圆圈。

Answer 2

这部分是由舍入错误引起的，因为纯CSS仅处理整数位置（请参阅kolink或Jonas的转换示例以启用小数值）。

如果转换不是一个选项，您可以通过“帮助”浏览器正确舍入来减少问题，通过在末尾添加0.5来改善舍入错误：

'left': Math.sin(one_start * 0.001) * 100 +0.5,
'top': Math.cos(one_start * 0.001) * 100 +0.5

或使用Math.round()：

'left': Math.round(Math.sin(one_start * 0.001) * 100),
'top': Math.round(Math.cos(one_start * 0.001) * 100)

<强> See here for modified fiddle

您也可以选择使用支持子像素的canvas元素。这意味着您的小数位置将被渲染（插值/消除锯齿）并显示更平滑的结果（与变换一样），但具有领域带来的灵活性。但是，CSS在渲染时会更快，所以如果你不需要（艺术）灵活性，CSS是一个更好的选择。

PS：中心关闭了。您可以调整：x - 半径，y - 半径，它们将处于正确的位置。

Answer 3

这是因为子像素渲染，使用变换而不是“顶部”和“左”应解决问题：

http://jsfiddle.net/jonigiuro/HDhn4/2/

var one_css = {
    'transform': "translateX(" + (Math.sin(one_start * 0.0025) * 100) + 'px) translateY('+ Math.cos(one_start * 0.0025) * 100 + "px)"
}

此解决方案尚未跨浏览器，您可能需要为此添加前缀的css。

另外，请阅读：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

PS：请注意我只将它应用于红球，所以你可以看到差异

javascript圈移动一个点

3 个答案: