jQuery 在圆形路径上动画圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18735723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate circles on circular path
提问by Nickon
I have an object (image) in the center of the screen. Now I want to animate some circles around this object. What is the best idea to realize that task? Should I use any dedicated JSlibrary for animation?
我在屏幕中央有一个对象（图像）。现在我想为这个对象周围的一些圆圈设置动画。实现该任务的最佳想法是什么？我应该使用任何专用JS的动画库吗？
采纳答案by Harika Choudary Kanikanti
CSS will give smoothness take a look at this
CSS 会给平滑度看看这个
It is better to use CSS3 instead of JavaScript because the resultant animation is always guaranteed to be smoother (especially on mobile devices) plus it can save on battery power.
最好使用 CSS3 而不是 JavaScript，因为生成的动画总是可以保证更流畅（尤其是在移动设备上），而且可以节省电池电量。
回答by
You can use some simple trigonometry such as this:
您可以使用一些简单的三角函数，例如：
function loop() {
/// calc x and y position with radius of center +
x = cx + radius * Math.cos(angle * Math.PI / 180);
y = cy + radius * Math.sin(angle * Math.PI / 180);
/// set satelite's center to that position
$('#sat1').css({left:x - radiusSat, top:y - radiusSat});
/// increase angle
angle++;
if (angle>360) angle = 0;
/// loop
requestAnimationFrame(loop);
}
The demo is extended to support all five satellites. You will of course need to add the other satellites your self.You can increase speed by increasing the increment for angle.
该演示扩展为支持所有五颗卫星。您当然需要自己添加其他卫星。您可以通过增加角度增量来提高速度。
Note ref. your new comment to the post: the code and example here shows the principlesof what you need to do in order to achieve the result your are after. As purpose of SO is not to produce free code/full solutions this is not provided, but using the principles shown and demonstrated here you should be able to adopt them to do what you want them to do.
注意参考。您对帖子的新评论：此处的代码和示例显示了您需要做什么才能实现您所追求的结果的原则。由于 SO 的目的不是生成免费代码/完整解决方案，因此未提供此内容，但使用此处显示和演示的原则，您应该能够采用它们来执行您希望它们执行的操作。
There are other ways to move the satellites such as using CSS3 transforms/animation (which will give you smoother motions as you can use fractional positions), Canvas element, jQuery path etc.
还有其他方法可以移动卫星，例如使用 CSS3 变换/动画（这将为您提供更平滑的运动，因为您可以使用分数位置）、Canvas 元素、jQuery 路径等。
回答by Jordan Gray
You asked for a JavaScript solution, but it's possible to do this in mostmodern browsers without any JavaScriptby using keyframe animations.
您要求提供 JavaScript 解决方案，但可以通过使用关键帧动画在大多数现代浏览器中执行此操作，无需任何 JavaScript。
CSS
CSS
@keyframes rotate {
0%, 50% {
/* Keep the element at 12 o'clock until halfway through animation. */
transform: rotate(0deg) translateY(-150px) rotate(0deg);
}
}
#centre {
/* Position circles in the centre of the viewport. */
position: fixed;
left: 50%;
top: 50%;
/* IE 10 bug: force hardware acceleration to prevent edge pixels
being left behind on animation. */
transform: rotateZ(0.01deg);
}
.circle {
background: red;
border-radius: 50%;
position: absolute;
}
.middle {
height: 200px;
width: 200px;
left: -100px; /* top/left equal to radius. */
top: -100px;
}
.outer {
/* Note: first half of animation duration is spent at 12 o'clock. */
animation: rotate 2s ease-out 1;
height: 60px;
width: 60px;
left: -30px; /* top/left equal to radius. */
top: -30px;
}
.at-8-oclock {
/* Two rotate transforms are used to maintain orientation while turning.
First rotate is angle about centre from top; second is just minus this.
translateY is set to the radius of the circular path being followed. */
transform: rotate(-120deg) translateY(-150px) rotate(120deg);
}
.at-10-oclock {
transform: rotate(-60deg) translateY(-150px) rotate(60deg);
}
.at-12-oclock {
transform: rotate(0deg) translateY(-150px) rotate(0deg);
z-index: 2; /* This one stays on top. */
}
.at-2-oclock {
transform: rotate(60deg) translateY(-150px) rotate(-60deg);
z-index: 1; /* Make this slide out from between 12 and 4 o'clock. */
}
.at-4-oclock {
transform: rotate(120deg) translateY(-150px) rotate(-120deg);
}
HTML
HTML
<div id="centre">
<div class="middle circle"></div>
<div class="outer circle at-8-oclock"></div>
<div class="outer circle at-10-oclock"></div>
<div class="outer circle at-12-oclock"></div>
<div class="outer circle at-2-oclock"></div>
<div class="outer circle at-4-oclock"></div>
</div>
It gracefully degrades to showing the circles in their final positions when CSS animation isn't supported. Dabblet automatically adds prefixes where needed; in production, you would either use -prefix-freeor manually add prefixed versions of the @keyframesrule and the animationand transformproperties.
当不支持 CSS 动画时，它优雅地降级为在最终位置显示圆圈。Dabblet 会在需要的地方自动添加前缀；在生产中，您可以使用-prefix-free或手动添加@keyframes规则animation和transform属性的前缀版本。
Unfortunately, IE 9 doesn't support keyframe animations and is still in widespread use, so it doesn't get the nice animation effect. If it's important to you, you could remedy this by using JavaScript for browsers that don't support CSS animation. Here's a demonstrationon jsFiddlethat uses Modernizr to detect for @keyframessupport and -prefix-free to get the prefixed CSS transformproperty. Here's the bit of code that does the animation:
不幸的是，IE 9 不支持关键帧动画，并且还在广泛使用，所以它没有得到很好的动画效果。如果这对您很重要，您可以通过对不支持 CSS 动画的浏览器使用 JavaScript 来解决此问题。这是一个关于 jsFiddle的演示，它使用 Modernizr 来检测@keyframes支持并使用-prefix-free 来获取带前缀的 CSStransform属性。这是执行动画的一些代码：
JS
JS
// Delay animation for specified time.
setTimeout(function() {
// Start animating.
interval = setInterval(function() {
// Increment step or finish animation.
if (step > steps) {
clearInterval(interval);
return;
} else {
step++;
}
// Move each circle to its new position.
for (var i = 0; i < circleCount; i++) {
var circle = circles[i],
newAngle = Math.easeOutQuad(
step,
circle.startAngle,
circle.rotateThrough,
steps
);
// Update circle angle.
circle.currentAngle = newAngle;
setCircleAngle(circle.element, newAngle);
}
}, intervalMs);
}, startAfterMs);
// Set the angle of one of the circle elements.
function setCircleAngle(circle, angle) {
var x = pathRadius * Math.cos(angle * Math.PI / 180),
y = pathRadius * Math.sin(angle * Math.PI / 180);
circle.style.top = (x - circleRadius) + 'px';
circle.style.left = (y - circleRadius) + 'px';
};
Math.easeOutQuad = function (t, b, c, d) {
t /= d;
return -c * t*(t-2) + b;
};
I've tested this in an IE9 VM and the result is comparable, if not so smooth. It doesn't work in IE8 and below; -prefix-free doesn't support those versions, and it would take more hacks than I can easily justify just to get border-radiusworking. As of date, this gives a conservative estimate of ~90% current browser support, increasing as people update from older versions of IE or switch to other browsers.
我已经在 IE9 虚拟机中测试过这个，结果是可比的，如果不是那么顺利的话。它不适用于 IE8 及以下；-prefix-free 不支持这些版本，并且需要更多的黑客攻击，我无法轻易证明只是为了开始border-radius工作。到目前为止，这给出了大约 90% 的当前浏览器支持的保守估计，随着人们从旧版本的 IE 更新或切换到其他浏览器而增加。
回答by Mx.
You could go with jQuery.Pathfor that. Its not perfect but may you can take a look in the scr and add the functionality you need.
为此，您可以使用jQuery.Path。它并不完美，但您可以查看 scr 并添加您需要的功能。
Here's a Fiddle showing basic functionality.
var arc_params = {
center: [100,100],
radius: 50,
start: 0,
end: 72000
}
function animate(){
$(".animatingDiv").animate({path : new $.path.arc(arc_params)}, 100000)
}
animate();
