Кроссбраузерные 2D-трансформации с анимациями

    Не болейте. Решил сделать обзор интересного плагина и заодно дать рекомендации к использованию.

    Для самых нетерпеливых — получится у нас так.

    Плагин называется jQuery 2D Transformation Plugin. Он позволяет использовать анимацию свойств CSS 2D Transforms.

    Обзор с описанием свойств — в конце топика.

    Теперь вернемся к самому плагину. После его подключения мы можем писать такие вещи:
    
    $('.example').click(function() {
        $(this).animate({rotate: '+=45deg'}, 'slow');
    });
    
    


    Таким образом, по клику на элементе он повернется на 45°. Можно задать ряд свойств, например:
    
    $('.example').click(function() {
        $(this).animate({
           rotate: '+=45deg', //Повернули
           scale: [1.5, 1.5] // и при этом увеличили в 1.5 раза
        }, 'slow');
    });
    
    


    Цепочки анимаций


    Цепочки анимированных трансформаций открывают нам большие возможности сделать клевые вещи без флеша. Но здесь имеется два подводных камня, которые мы преодолеем, и третий небольшой камешек, которого только гроб исправит.

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

    
    $('.example').click(function() {
        $(this).animate({
           rotate: '+=45deg', //Повернули
           scale: [1.5, 1.5] // // X (ширина) и Y(высота).
        }, 'slow', 'linear');
    });
    
    


    Наверняка многие знают, как сделать цепочку анимации, но на всякий случай расскажу. Для создания цепочки анимаций просто вызываем новую функцию после описания свойств текущей анимации:
    
    $('.example').click(function() {
        var exemple = $(this); // Не люблю лишние вызововы $;
        exemple.animate({
           rotate: '+=45deg',
           scale: [1.5, 1.5]
        }, 'slow', 'linear', function(){
                    exemple.animate({
                         rotate: '+=45deg', //Напоминаю, что запись вида += в новых версиях джеквери означает, что к текущему значению прибавляем новое.
                         scale: [1.5, 1.5] 
                    });
           });
    });
    
    


    Второй подводный камень заключается в том, что браузеры (кроме оперы) страшно тормозят с прорисовкой нашего трансформируемого объекта, если мы используем translate, translateX или translateY в цепочках анимаций. Первый шаг все отрисовывают нормально, а вот второй и последующие совершенно непредсказуемо, вплоть до пропуска звеньев анимации.
    Вот, что получается (смотреть в хроме или фф).

    Побороть эту напасть можно — нужно использовать top, left, bottom или right вместо translate'ов:
    
    $('.example').click(function() {
        $(this).animate({
           rotate: '+=45deg', //Повернули
           scale: [1.5, 1.5] // // X (ширина) и Y(высота).
           left: '+= 20px',
           top: '+=30px'
        }, 'slow', 'linear');
    });
    
    


    Финальный результат и еще пример, с летающим блоком с текстом.

    Третий подводный камешек заключается в том, что ИЕ 6-8 при трансформациях png-картинок с прозрачностью рисует черный контур на границах прозрачности:


    Поговаривают, что такая же фигня со шрифтами, а еще поговаривают, что zoom:1 лечит шрифты.

    Однако, меня это все не сильно расстраивает, в ИЕ9 все в порядке да и черный контур в старых ИЕ смотрится даже несколько стильно ;)
    Тем не менее, если кто знает, можно ли это исправить, пишите!

    Cool stuff, bro!


    На закуску, список свойств CSS3 transforms, а также бонусных, которые есть в плагине:

    matrix: [1, 0, 0, 1, 0, 0] — Осуществяет 2D преобразование в виде матрицы преобразования из шести значений. Курить это достаточно трудно
    reflect: true — бонусное свойство, поворачивает элемент на 180°
    reflectX: true — бонусное, отражает с ног на голову
    reflectXY: true — бонусное. То же, что и reflectX + rotate(-90deg)
    reflectY: true — бонусное, просто отражает вниз
    rotate: '45deg' — поворот, он и в Африке поворот:

    skewX: '10deg, skewY: '10deg', skew: ['10deg', '10deg'] — искажение в градусах. Как это выглядит, показано ниже


    scale: [1.5, 1.5], scaleX: 1.5, scaleY: 1.5 — масштабирование:


    translate: ['20px', '20px'], translateX: 20px', translateY: '20px' — движение. Использовать не рекомендую, лучше left, right, top, bottom. В обоих сслучаях получится так:


    origin: ['20%', '20%'] — Используется при определении точки отсчета для применения трансформации к элементу. Например, при повороте rotate по умолчанию точкой отсчета будет центр элемента. А при значениях origin: 0 0 точкой отсчета будет верхний левый угол:


    Почему-то в комментариях в файле плагина написано:
    — transformOrigin is not accessible.
    Но работать должно. Возможно, просто не сразу реализовали и забыли удалить коммент.

    Посмотреть часть этих свойств в действии, а также получить кроссбраузерный код (в т.ч. для ИЕ 6-8) можно тут (почему-то сайт плохо работает в Опере). Только учтите, что сайт не использует возможности ИЕ9, в котором эти свойства доступны с префиксом -ms-, а скармливает ему -ms-filter-матрицу.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 8

      –9
      Хабракат придумали трусы
        0
        Интересная статейка. Буду применять в своем локальном проекте.
          0
          [zanuda_mod]
          Плагин интересный, только после тестирования в разных браузерах exemple02.html, возникает вопрос: а всё-таки, как самолётик ДОЛЖЕН приземляться после кругосветного путешествия: как в Opera, как в Safary с FF или как в Chrome?
          А в IE8 вообще вторая фаза анимации не правильно срабатывает.
          И если он даже такую простейшую анимацию отрисовывает по-разному, то что будет с крупным проектом?
          [/zanuda_mod]
            0
            А еще в них контур черный. Эти ишаки 6-8 — 25% аудитории и благо эта цифра с каждым днем уменьшается. Не мало, но и не критично, чтоб совсем отказываться от технологии. Возмонжно, я чего то натворил, но у меня поначалу в них была анимация, как в других браузерах. Нужно ковырять код, пробовать разные приемы. Я думаю, подобрать оптимальный вариант таки можно.
            В крайнем случае, для них можно просто отключить плагин, тогда неизвестные свойства анимации jquery просто будет игнорить. Будет движение без поворотов.
            +2
            контур в IE при анимациях у png24 с полупрозрачными областями лечится костылём с добавлением прозрачного гифа, на фон которому кладётся эта пнгшка примерно так:
            .samoletik {
            background:none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image/samoletik.png",sizingMethod="crop");
            }

            , где .samoletik — это класс прозрачного гифа.
              0
              В последней dev-сборке Хрома (14.0.803.0) анимация самолёта воспроизводится одинаково плавно как в exemple01 так и exemple02.
                0
                Только что проверил в 14.0.813 — пропало 2ое звено анимации, после взлета самолета, когда он должен был улететь вправо.
                  0
                  Всё, теперь понял какая именно часть анимации пропадает. Извиняюсь за ложную информацию.

              Only users with full accounts can post comments. Log in, please.