Лучший способ заставить изображение следовать круговой траектории в JQuery?

Question

Лучший способ заставить изображение следовать круговой траектории в JQuery?

0

У меня есть изображение (красный, внизу), что я хочу совершить путешествие по круговой траектории. Красное изображение всегда должно заканчиваться в том же месте, в котором оно начиналось.

Примечания: серый круговой путь невидим. Я просто подчеркиваю, как он будет следовать.

Каков наилучший метод/библиотека для достижения этой техники?

Keith Donegan 07 янв. 2014, в 11:00

Источник

Теги:

javascript

jquery

path

jquery-animate

2 ответа

0

Пожалуйста, ознакомьтесь с этими ссылками:

Техника CSS
Ответы на стопку: Ответ 1 || Ответ 2

JSFiddle: скрипка 1

 var t = 0;

 function moveit() {
   t += 0.05;

   var r = 100;
   var xcenter = 100;
   var ycenter = 100;
   var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
   var newTop = Math.floor(ycenter + (r * Math.sin(t)));
   $('#friends').animate({
     top: newTop,
     left: newLeft,
   }, 1, function() {
   moveit();
  });
 }

 $(document).ready(function() {
    moveit();
 });

Ankur Verma 07 янв. 2014, в 06:57

Ещё вопросы

adeneo · Accepted Answer · 2014-01-07T07-40-00.000Z

Вам действительно нужна библиотека, это не так сложно сделать

$(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);
});

FIDDLE

Здесь тот, который делает один цикл, останавливается в одном и том же месте и т.д.

$(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();
    });

});

FIDDLE

+1, но многократное нажатие на круг, заставляет его работать быстрее: p, может быть, это хорошо jsfiddle.net/yashhy/t9Qnu/1