Как вы можете отслеживать местоположение изображения, анимированного с помощью Zepto? - PullRequest
Новая
       16

Как вы можете отслеживать местоположение изображения, анимированного с помощью Zepto?

1 голос
/ 16 января 2012

В настоящее время я пытаюсь отследить местоположения x и y изображения на моей странице, анимированного с помощью метода Zepto .anim ().Проблема в том, что любые методы, которые я использую, чтобы попытаться найти их, возвращают только место, где он был изначально загружен, а не то, где он сейчас находится.Я могу обойти это, вычисляя, где он находится, когда мне это нужно, но этот метод немного ненадежен.Кто-нибудь знает простой способ сделать это?

Редактировать: По запросу: 

$('#circle').anim({translateX: newX + 'px', translateY: newY + 'px'}, speed, 'linear')

Ответы [ 2 ]

3 голосов
/ 16 января 2012

Это будет немного сложно, потому что вы используете преобразования CSS3, и на самом деле не существует никакого Zepto API, доступного для получения этой информации.

Сначала вы должны понять, где хранится информация.Если вы используете Android, iPhone, Safari или Chrome, это свойство webkitTransform.

Если вы откроете $('#circle').css('webkitTransform'), вы увидите translateX(somevalue) translateY(somevalue), где значения - это то, через что вы прошлиJavaScript.

К сожалению, это конечное значение, а не промежуточное значение.Для промежуточного значения вам понадобится что-то вроде этого: 

getComputedStyle($('#circle')[0]).webkitTransform
// == "matrix(1, 0, 0, 1, 87.66703796386719, 82.89203643798828)"

Эти значения хранятся в матрице преобразования.Это может быть matrix или matrix3d в зависимости от того, что было передано. См. Мой ответ на другой вопрос SO о том, как извлечь значения X и Y из этой строки.

Очевидно, что это большая работа, и вам нужно будет добавить больше логики для мобильного Firefoxи тому подобное.Вы можете рассмотреть, что вы пытаетесь сделать, и посмотреть, есть ли альтернативный подход.

2 голосов
/ 16 января 2012

Код от: Получить позицию (X, Y) элемента HTML 

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

Вы можете использовать его для точного определения текущей позиции элемента на странице.

...