Анимировать поворот отрицательный (jQuery GSAP)

Question

Анимировать поворот отрицательный (jQuery GSAP)

0

У меня возникла проблема с анимацией преобразования rotateX и rotateY. Я использую плагин GSAP jQuery.

В основном это выполняется:

$(element).animate({transform: "rotateX(-180deg)"});

имеет тот же эффект, что и выполнение:

$(element).animate({transform: "rotateX(180deg)"});

У меня есть перспектива, если вам интересно.

Есть ли особый способ определить отрицательные значения или это ошибка?

ОБНОВЛЕНИЕ: я нашел здесь свойство shortRotationX и shortRotationY: http://codepen.io/GreenSock/pen/ydIgf

Однако это, по-видимому, временное решение. Я хотел бы знать, каков правильный способ анимации вращения с помощью jQuery + GSAP. Спасибо вам, ребята! Kyryll

Kyryll Tenin Baum 25 фев. 2014, в 02:14

Источник

Теги:

javascript

jquery

transform

jquery-animate

greensock

2 ответа

1

Он должен иметь тот же эффект. Поворот объекта на 180 градусов будет отображаться таким же образом, как он будет отображаться, если вы повернете его -180 градусов.

Я сделал вам простой пример, если он очистит вас:

Скрипт здесь (только HTML и CSS), чтобы вы могли видеть, что он имеет тот же эффект.

div {
    width:200px;
}

#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}

user2824854 24 фев. 2014, в 22:48

0

Это не использует анимацию. Я согласен, что окончательные версии элементов одинаковы, но они «попадают» туда по-разному. Во время анимации один вращается по часовой стрелке, а другой - против часовой стрелки. Посмотрите, можете ли вы указать продолжительность анимации в вашем jsFiddle.
Kyryll Tenin Baum 25 фев. 2014, в 01:36
0

Ах, я понял тебя. Я неправильно поняла ваш вопрос ... Я рада, что у вас все получилось!
user2824854 26 фев. 2014, в 22:38

Ещё вопросы

Это не использует анимацию. Я согласен, что окончательные версии элементов одинаковы, но они «попадают» туда по-разному. Во время анимации один вращается по часовой стрелке, а другой - против часовой стрелки. Посмотрите, можете ли вы указать продолжительность анимации в вашем jsFiddle.
Ах, я понял тебя. Я неправильно поняла ваш вопрос ... Я рада, что у вас все получилось!

Jack · Accepted Answer · 2014-02-26T03-43-00.000Z

Это было дано на форумах GreenSock по адресу http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552

Вращение 180 идентично вращению -180 в терминах матрицы преобразования браузера (используйте getComputedStyle(), чтобы убедиться сами), поэтому нет никакого способа по-настоящему различить разницу, если вы не используете свойства собственного преобразования GSAP, такие как "rotationX "поворот", "поворот" и т.д. Когда вы это сделаете, GSAP сможет правильно отслеживать все. Плюс он более оптимизирован для скорости. Так:

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

Кроме того, "shortRotationX" устаревает с тех пор, как мы вышли с DirectionalRotationPlugin, который использует более интуитивный синтаксис, который также можно использовать для указания движения по часовой стрелке или против часовой стрелки:

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}