在JQuery中使图像遵循循环路径的最佳方法是什么? [英] Best way to make an image follow a circular path in JQuery?
本文介绍了在JQuery中使图像遵循循环路径的最佳方法是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个图像(红色,下面),我想沿着圆形路径行进。红色图像应始终与开始时位于同一位置。
I have an image (red, below), that I want to make travel along a circular path. The red image should always end in the same spot as it started.
注意:
灰色圆形路径不可见。我只是强调它将遵循的路径。
Notes: The grey circular path is invisible. I am just highlighting the path it will follow.
实现这种技术的最佳方法/库是什么?
What is the best method/library to achieve this technique?
推荐答案
你真的需要一个图书馆,这并不难吗
Do you really need a library, it's not that hard to do
$(document).ready(function (e) {
var startAngle = 0;
var unit = 215;
var animate = function () {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
}
var timer = setInterval(animate, 10);
});
这是一个循环播放,停在同一个地方等等。
Here's one that does one loop, stops at the same place etc.
$(document).ready(function (e) {
var startAngle = 180;
var unit = 215;
var animate = function () {
if (startAngle > -180) {
var rad = startAngle * (Math.PI / 180);
$('.circle').css({
left: 250 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
startAngle--;
setTimeout(animate, 10);
}
}
$('.circle').on('click', function() {
startAngle = 180;
animate();
});
});
这篇关于在JQuery中使图像遵循循环路径的最佳方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文