Получение позиции / степени по анимации

Question

Я пытаюсь получить текущую позицию (между 0 и 360 °) в .me во время этой анимации:

http://jsfiddle.net/WcyyF/117/

То есть событие всплытия не запускает анимацию с 0, а продолжает с x.

Answer 1

Математика будет участвовать.

Вы устанавливаете их attr («данные») с помощью их начального угла, поэтому, когда вы зависаете и останавливаетесь, вам придется снова устанавливать все их углы.

Вот псевдокод:

length_x = $(this).position().left - center.left;
angle = arcos(length_x/radius);
$(this).attr('data') = angle;

Answer 2

Другой вариант с немного менее сложной математикой - отслеживать, когда анимация начинается и когда она прерывается.Поскольку он работает с постоянной скоростью, вы можете использовать прошедшее время, чтобы определить, сколько градусов должен пройти каждый элемент, и соответствующим образом обновить начальные позиции.Примерно так:

var elapsedTime = new Date().getTime() - this.startedAt;
var elapsedDegrees = Math.floor(360 * (elapsedTime / 20000));
$(".me").each(function() {
    $(this).attr('data', parseInt($(this).attr('data')) - elapsedDegrees + 360)
});

Вот пример: http://jsfiddle.net/WcyyF/120/