Анимация CSS3 при преобразовании: поворот. Способ получить текущий градус вращающегося элемента?

Я работаю над интерфейсом html5, который использует перетаскивание. Пока я перетаскиваю элемент, цель получает класс css, который заставляет его вращаться в обоих направлениях благодаря анимации -webkit.

@-webkit-keyframes pulse {
   0%   { -webkit-transform: rotate(0deg);  }
   25%  { -webkit-transform:rotate(-10deg); }
   75%  { -webkit-transform: rotate(10deg); }
   100% { -webkit-transform: rotate(0deg);  }
  }

.drag
{
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

Когда я бросаю цель, я хочу, чтобы она приняла текущее состояние вращения.

Моей первой мыслью было проверить свойство css с помощью jquery и метода .css('-webkit-transform'). Но этот метод просто возвращает «нет».

Итак, мой вопрос: есть ли способ получить текущее значение степени элемента, который вращается с помощью анимации?

Спасибо пока Хендрик


animation html drag-and-drop css transform
person larrydahooster    schedule 26.07.2010    source источник
comment
Этот ответ работает для CSS3 3DTransforms: stackoverflow.com/a/18658090/139361   -  person Dan    schedule 06.09.2013
comment
Математический ответ по трехмерной матрице можно найти здесь: math.stackexchange.com/questions/489298/   -  person Dan    schedule 10.09.2013

Ответы (2)


arrow_upward
20
arrow_downward

Недавно мне пришлось написать функцию, которая делает именно то, что вы хотите! Не стесняйтесь использовать его:

// Parameter element should be a DOM Element object.
// Returns the rotation of the element in degrees.
function getRotationDegrees(element) {
    // get the computed style object for the element
    var style = window.getComputedStyle(element);
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)'
    var transformString = style['-webkit-transform']
                       || style['-moz-transform']
                       || style['transform'] ;
    if (!transformString || transformString == 'none')
        return 0;
    var splits = transformString.split(',');
    // parse the string to get a and b
    var parenLoc = splits[0].indexOf('(');
    var a = parseFloat(splits[0].substr(parenLoc+1));
    var b = parseFloat(splits[1]);
    // doing atan2 on b, a will give you the angle in radians
    var rad = Math.atan2(b, a);
    var deg = 180 * rad / Math.PI;
    // instead of having values from -180 to 180, get 0 to 360
    if (deg < 0) deg += 360;
    return deg;
}

Надеюсь это поможет!

РЕДАКТИРОВАТЬ Я обновил код для работы со строками matrix3d, но он по-прежнему дает только 2D-градусы поворота (т. е. поворот вокруг оси Z).

person lakenen    schedule 04.12.2010
comment
пришлось изменить эту строку для работы с новыми браузерами: var a = parseFloat(splits[0].substr(9)); - person Orwellophile; 20.06.2013
comment
Спасибо, что дал мне знать. Это была проблема с 3D-преобразованиями, и я только что обновил код, чтобы он работал как с 2D-, так и с 3D-преобразованиями. - person lakenen; 20.06.2013

arrow_upward
4
arrow_downward

window.getComputedStyle(element,null)['-webkit-transform'] вернет строку, представляющую текущую матрицу преобразования. Вы можете вычислить степень поворота этой строки, сначала проанализировав ее, а затем применив к ней несколько математических операций.

person Keigo Imai    schedule 01.12.2010