Сверхплавные трансформации для jQuery

    Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

    Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

    С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:
    if (!$.support.transition)
        $.fn.transition = $.fn.animate;
    

    Всего 2КБ.
    Share post

    Similar posts

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

    More
    Ads

    Comments 44

      +1
      Симпатичные отработки. Да и колбэк есть.
        +8
        Почему деградацию не встроили в плагин? Делали же до этого все анимации «по-старому» и не жаловались на скорость… Непонятно.
          +4
          А вот еще один плагин — jquery.transition.js:
          Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.
          • UFO just landed and posted this here
            • UFO just landed and posted this here
              +3
              У меня в примерах в Safari всё моргает, почему-то. В Firefox такого не наблюдается
                0
                Это баг вебкита, в хроме тоже наблюдается. Добавление в css для body "-webkit-backface-visibility: hidden;" лечит этот баг при transition-анимациях.
                  0
                  Ох уж этот вебкит :)
                +5
                Не очень понимаю, почему transition делает анимации сверхплавными. CSS Animation с 3D-ускорением ещё делает анимации быстрее, но обычный transition на текущих браузерах работает с той же скоростью.

                Самое главное, что transition и CSS Animation добавили, чтобы мы не указывали анимацию в JavaScript, потому что тогда мы смешиваем CSS и JS-код. То есть в JS мы должны просто добавлять/убирать класс состояния, а то, как какое-то состояние выглядит и как определены переходы между состояниями указываем в CSS.

                Поэтому этот плагин кажется мне странным. Хотите указывать анимации в transition — используйте CSS, а не JS.
                  +1
                  Этот плагин позволяет использовать CSS transition, но добавляет немного сахара в виде поддержки существующего синтаксиса jQuery, что позволяет ничего не менять ничего в существующих приложениях.
                    0
                    Так какой смысл использовать transition?
                      0
                      Имеется в виде, какой смысл использовать CSS Transition из JavaScript.
                        0
                        Вы имеете в виду, что лучше всё заранее описать в CSS файлах, а из JS только добавлять и удалять классы у элементов? Да, наверняка в некоторых случаях так будет проще и код будет более легко поддерживаем. Но существуют случаи, когда хочется использовать те же обратные вызовы, для запуска, например, какой-то другой анимации, или даже когда хочется запустить эффект при выходе указателя мыши с территории элемента.
                          +1
                          Тогда используйте обычные jQuery-анимации. Использование transition не даёт никаких видимых преимуществ по скорости анимации.

                          Анимации jQuery жутко оптимизированные, дальше их оптимизировать не получиться, поэтому анимация в transition не может быть существеннее быстрее или плавнее.

                          Исключение только если у вас CSS-анимации перемешиваются с JS-анимация — но это решается тем, чтобы использовать requestAnimationFrame в JS-анимация.

                          Так же в некоторых браузерах аппаратно ускоряются анимации, которые заданы через CSS Animation и когда применяются 3D-трансформации. Но опять же, это не имеет никакого отношения к transition.

                          Так что transition рисуется так же плавно, как и jQuery-анимации.
                            0
                            Как это не дает? Разница в сотни раз — попробуйте на том же iPad. Обычный animate дает лишь 1-3 FPS.
                              +1
                              Да, я рассматривал ситуацию только на больших компьютерах, а не на планшетах, так что я могу ошибаться. Но как я понимаю, аппаратное ускорение в iOS применяется для CSS Animation, а не transition. У вас есть ссылка на конкретное исследование, почему анимации через CSS работают быстрее на iOS и Android?
                                +2
                                Ну обещают же в 2014 году сравнивание мобильного и десктопного трафика :)
                                Конкретного исследования нет — но томоза $.animate на мобильных платформах очевидны и сразу заметны(на хабре и статьи соответствующие были).
                                Поэтому для нашего сайта на JS(полностью интерфейсы на JS) $.animate не пригодно совсем и пришлось переписывать уже готовый код(рабочий и отлаженный на десктопе) на CSS3.
                                  –1
                                  ОК, тогда повторюсь, что в статье надо написать, что плагин для быстрый анимации на iOS, а не для быстрой анимации везде.
                                    +1
                                    На нетбуках тормоза тоже заметны(но слабо, гораздо лучше, чем на мобильных платформах).
                                      –1
                                      И они решаются с помощью transition? Да ладно, transition не решает проблему перерисовок и перерассчёта стилей. JS-анимация тормозит только там, где тормозит обычный setTimeout.

                                      Не верю, что на нетбуках тормозит setTimeout (то есть transition решит проблем). Нетбуки тормозят, так как им трудно быстро перерисовывать большие области экрана.
                                        +1
                                        > Не верю, что на нетбуках тормозит setTimeout (то есть transition решит проблем).
                                        Проверьте. Transforms проблему решили.
                                          0
                                          А до этого у вас использовалась обычная jQuery-анимация (а не своя с отдельным setTimeout для каждой анимации)?
                                            0
                                            Не знаю, на Galaxy Tab что Транзишины, что JS-анимация тормозит одинаково сильно.
                                            На iPad — да, пока трансишны ускорены, а обычная анимация — хуже ускорена. Но это временно
                                            • UFO just landed and posted this here
                                        0
                                        ваша фраза выглядит как «в статье про C надо писать что он лишь под слабые системы, а не для всех систем»
                                          0
                                          Я говорю лишь, что transition не делает анимацию плавнее, он только решает медленный setTimeout в iOS. Если анимация требует перерисовки большой области экрана (что чаще случается), то она будет тормозить одинаково, как на transition, так и на JS. Такие тормоза решаются совсем другими способами.

                                          Использование же transition при вызове из jQuery для обычных сайтов не сделает анимацию плавнее, а только создаст проблемы при разработке из-за отсутствия нормальный easing-функция и отсётствия поддержки всех свойств у easing.
                                            +1
                                            Гм, я вижу себе это так. Когда мы задаем анимацию через css — код выполняет допустим скомпилированный chrome, а машинный код вроде как самый шустрый. При этом еще и аппаратное ускорение юзается. В то же время js делает анимацию покадрово, а сам js это байткод, при этом аппаратного ускорения нету. А перерисовка большой области с использованием аппаратного ускорения вроде как должно быть многократно быстрее. Поправьте если не прав.
                                              +1
                                              Само собой любая анимация рисуется покадрово (см. requestAnimationFrame). Скорость выполнения анимации = время работы таймера изменения свойств + время пересчёта вёрстки + время перерисовки страницы.

                                              Аппаратное ускорение анимации ускоряет перерисовку страницы. Но перерисовка страницы одинакова как для CSS-анимаций, так и для JS-анимаций. Тем более, что аппаратное ускорение включается только если есть 3D-трансформации (так как есть определённые сайд-эффекты).

                                              Что ускоряется при использовании CSS-анимаций, так это запуск таймера, подсчёт времени и вызов изменений свойств. Но на обычных компьютерах это время просто незаметно (я очень часто использую CSS-анимацию и пробовал переписывать тяжёлую анимацию с JS на CSS). На телефонах видимо из-за особенностей работы JS ВМ setTimout сильно тормозит (я думаю, что просто в iOS сильно увеличили минимальный период setTimeout).
                                              • UFO just landed and posted this here
                                      0
                                      В любом случае, это говорит лишь об оптимизиации браузера iOS (точнее о тормозах JS-анимация там, так как из-за другой реализации многозадачности в Android тормозов с JS-анимацией нет).

                                      Так что и надо говорить, что этот плагин только для разработчиков мобильных сайтов.
                                      И при том
                                        0
                                        На андроиде ситуация аналогичная. Ну и однопоточность UI на iOS на самом деле удобна в разработке.
                                          0
                                          Не совсем аналогичная. При касании пальца в iOS все процессы (включая JS) замораживаются, чтобы плавно рисовать анимации. В Android JS работает в фоне.
                                        0
                                        Но опять же, вот тут stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/ говориться только об ускорении анимации через аппаратное 3D.
                                    0
                                    Смысл в том, что, например, если Вы хотите выполнить анимацию background image по позиции x, то в одних браузерах сработает css transitions, а в других $.animate('backgroundPositionX', ...).

                                    Таким образом, все равно придется JS.

                                    Также см. stackoverflow.com/a/8175460/335304
                                  0
                                  Если ничего не менять, ничего и не изменится. Синтаксис старый, анимации старые, приложения существующие. В чем смысл-то?
                                  +3
                                  Разница — огромна.
                                  На одном из сайтов, что я делал, есть фоновая анимация — большие полупрозрачные треугльники вращаясь плавно плавают в случайные стороны, в случаном порядке, со случайной скоростью в случайном количестве.
                                  Пока для этого использовался animate — хром (да и любые браузеры) сходили с ума, процессор сжирало с неистовой силой.
                                  Попробовал перевести на transit — нугрузка упала в 10 раз
                                    0
                                    Действительно, именно в 10 раз. Даже с таймером замеря'ли, наверное ;)
                                      0
                                      Судя по всему вы не понимаете о чем говорите.
                                      Загуглите например «Gone In 60 Frames Per Second» или «60 fps для мобильного приложения»
                                  +2
                                  Ну и главная проблема transition — нельзя указать все easing-функции (ил разные easing-функции для разных CSS-свойств). См., например, примеры easings.net/
                                    0
                                    Плюс transition работает не для всех CSS свойств. Например, 3D transform в Mozilla не анимируется (тут надо использовать или CSS Animation или делать анимацию из JS с помощью github.com/sproutcore/TransformJS ).
                                      0
                                      Я пробовал писать библиотеку (без всяких jQuery), которая бы в новых браузерах делала анимацию присваиванием класса и CSS transition, а в старых — анимировала вручную по таймеру. В итоге получилось, что у меня и в Опере, и в Хроме CSS анимация хуже, глючнее и дерганней, чем яваскриптовая.

                                      Идея была примерно такая: вызывать что-то вроде animateNode(node, { from: 'css-class1', to: 'css-class2', onFinish: function(){} }). А стили для анимации хранились бы в CSS, а не в JS коде, как это делается при использовании jQuery (что идеологически неправильно). В новых браузерах просто меняется класс, в старых запускается таймер, в совсем старых типа ИЕ6 анимация отключается, чтобы не тормозить браузер.

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

                                      И да, здорово раздражает тот факт, что в отсталом w3c DOM нельзя получить примененные к элементу CSS-селекторы и стили (чтобы составить список для анимации). То есть, имея в стилях .some-class { color: red; } и элемент с class=«some-class», мы не можем яваскриптом получить исходное CSS правило. Также, мы не можем прочитать из CSSStyle неподдерживаемые браузером стили. Это радикально осложняет написание подобного скрипта.
                                        0
                                        неплохой плагин даже учитывая что он неофициальный ))
                                          +5
                                          Что значит «неофициальный»? И какие плагины официальны?
                                          0
                                          Transit uses jQuery’s effect queue by default, exactly like $.fn.animate. This means that transitions will never run in parallel.

                                          Только вот в .animate() это можно выключить флагом специальным, а в этом плагине, похоже, никак.

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