1

我的元素确实围绕一个点旋转。 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);

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

如何确保元素做了干净的圆圈？

4

3 回答 3

8

不要使用 jQuery。

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

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

于 2013-09-03T15:11:46.293 回答
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)

请参阅此处了解修改后的小提琴。

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

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

于 2013-09-03T15:12:00.463 回答
2

这是因为亚像素渲染，使用变换而不是“top”和“left”应该可以解决问题：

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：注意我只应用到了红球上，所以你可以看到区别

于 2013-09-03T15:12:23.200 回答