javascript圈移动一个点

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.

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

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