Создавайте потрясающие приложения с помощью анимации CSS3

Со своей стороны, я добавил некоторую поддержку для анимации значений поворота и перевода 2D-преобразования CSS3 и способа итерации по ключевым кадрам.

Вот основная часть библиотеки, которую нужно просмотреть:

  // Анимационный объект

 // Для этого нужен целевой элемент HTML, имя анимации, продолжительность и количество итераций и

 // ключевые кадры, содержащиеся в объекте массива

 // Просмотр анимации просто как последовательность переходов, сыгранных определенное количество раз

 ANIMATIONSHELPER.animation = function (цель, имя, длительность, счетчик итераций, ключевые кадры) {

     // сохранение значений свойств

     this.name = имя;

     this.duration = длительность;

     this.iterationcount = iterationcount;

     this.target = target;

     var elapsedtime = 0;

     var keyframeduration = 0;

     var elapsedtime = 0;

     // Преобразование процента каждого ключевого кадра в значение длительности

     для (var i = 0; i <keyframes.length; i ++) {

         keyframeduration = ((ключевые кадры [i] .percentage * длительность) / 100) - истекшее время;

         ключевые кадры [i] .duration = ключевой кадр;

         прошедшее время + = ключевой кадр;

     }

     this.currentTransition = {isPlaying: false};

     this.keyframes = ключевые кадры;

     this.keyframesCount = keyframes.length;

     this.currentKeyFrameIndex = 0;

     // Функция nextTransition () возвращает следующий переход для запуска

     // на основе текущего ключевого кадра для воспроизведения

     this.nextTransition = function (ключевой кадр, легкость, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {

         var properties = [];

         var finalValues ​​= [];

         вар-переход;

         // По сравнению с оригинальным TRANSITIONSHELPER Дэвида Катухе

         // Нам нужен определенный код для игры со значениями свойств CSS3 2D Transform

         if (keyframe.propertyToAnimate === "transform") {

             for (var i = 0; i <keyframe.transformType.length; i ++) {

                 properties.push (keyframe.transformType [я] .type);

                 if (keyframe.transformType [i] .type == "rotate") {

                     finalValues.push ({deg: keyframe.transformType [i] .value1});

                 }

                 еще {

                     finalValues.push ({x: keyframe.transformType [i] .value1, y: keyframe.transformType [i] .value2});

                 }

             }

             // Создать новый переход

             переход = {

                 name: this.name + this.currentKeyFrameIndex,

                 target: this.target,

                 свойства: свойства,

                 finalValues: finalValues,

                 originalValues: ANIMATIONSHELPER.extractValues ​​(target.style [ANIMATIONSHELPER.currentTransformProperty], this.name),

                 продолжительность: ключевой кадр.дурация,

                 startDate: (новая дата) .getTime (),

                 currentDate: (новая дата) .getTime (),

                 легкость: легкость,

                 customEaseP1X: customEaseP1X,

                 customEaseP2X: customEaseP2X,

                 customEaseP1Y: customEaseP1Y,

                 customEaseP2Y: customEaseP2Y,

                 isPlaying: правда,

                 тип: "преобразование"

             };

             обратный переход;

         }

         // Если это классическое свойство для анимации, мы используем более или менее TRANSITIONSHELPER как есть

         еще {

             return TRANSITIONSHELPER.transition (this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);

         }

     };

     // у каждого объекта анимации есть функция галочки

     // это будет вызываться каждые 17 мс (для достижения 60 кадров в секунду)

     // Этот тикер отслеживает текущее состояние перехода и

     // создаем новый переход, как только старый закончен / мертв

     this.tick = function () {

         if (this.iterationcount> 0) {

             if (! this.currentTransition.isPlaying) {

                 this.currentTransition = this.nextTransition (this.keyframes [this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);

                 // Мы используем наш собственный глобальный тикер только для 2D-преобразований

                 // В противном случае мы используем один из библиотеки TRANSITIONSHELPER

                 if (this.currentTransition.type === "transform") {

                     ANIMATIONSHELPER.currentTransitions.push (this.currentTransition);

                 }

                 this.currentKeyFrameIndex ++;

                 // Мы достигли последнего ключевого кадра (100%).  Мы начинаем с самого начала

                 if (this.currentKeyFrameIndex> = this.keyframesCount) {

                     this.currentKeyFrameIndex = 0;

                     this.iterationcount--;

                 }

             }

         }

     };

 }; 

Первая часть кода перебирает каждый ключевой кадр, чтобы вычислить точную продолжительность, указанную для каждого процента. Затем мы определяем функцию nextTransition() которая будет динамически создавать следующий переход для воспроизведения на основе текущего индекса в коллекции ключевых кадров. Наконец, у нас есть функция tick() которая будет отслеживать текущее состояние примененного перехода. Когда переход завершен или завершен, он запрашивает следующий переход, помещает его в стек воспроизводимых переходов и перемещает индексы.

Эта функция tick() вызывается благодаря следующему коду:

  ANIMATIONSHELPER.launchAnimation = function (animation) {

     // Запуск сервиса тиков, если требуется

     if (ANIMATIONSHELPER.tickIntervalID == 0) {

         ANIMATIONSHELPER.tickIntervalID = setInterval (ANIMATIONSHELPER.tick, 17);

     }

     // Небольшое закрытие для запуска метода tick на соответствующем экземпляре анимации

     setInterval (function () {animation.tick ();}, 17);

 }; 

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

  // Объект для создания нового универсального ключевого кадра (таким образом, не работает со свойствами 2D-преобразования CSS3)

 ANIMATIONSHELPER.keyframe = функция (процент, propertyToAnimate, значение) {

     this.percentage = процент;

     this.propertyToAnimate = propertyToAnimate;

     this.value = значение;

 };

 // Объекты для построения определенных ключевых кадров вращения

 ANIMATIONSHELPER.rotationkeyframe = функция (процент, значение) {

     this.percentage = процент;

     this.propertyToAnimate = "transform";

     this.transformType = [];

     this.transformType.push (new ANIMATIONSHELPER.transformType ("rotate", value));

 }; 

Чтобы подчеркнуть его использование, давайте воссоздаем предыдущий простой пример черепа CSS3 Animation с этой библиотекой:

  // сколько раз вы хотели бы запустить анимацию

 var iterationsNumber = 100;

 var skullElement = document.getElementById ("skull");

 var keyframes = [];

 keyframes.push (новый ANIMATIONSHELPER.rotationkeyframe (25, 15));

 keyframes.push (новый ANIMATIONSHELPER.rotationkeyframe (50, -5));

 keyframes.push (новый ANIMATIONSHELPER.rotationkeyframe (55, 0));

 keyframes.push (новый ANIMATIONSHELPER.rotationkeyframe (75, -10));

 keyframes.push (новый ANIMATIONSHELPER.rotationkeyframe (100, 0));

 var animation1 = new ANIMATIONSHELPER.animation (skullElement, "rotate-skull", 7000,

                             iterationsNumber, keyframes);

 ANIMATIONSHELPER.launchAnimation (animation1, ANIMATIONSHELPER.easingFunctions.linear); 

И вот результат, который теперь будет работать в каждом браузере, поддерживающем CSS3 2D Transform:

Наконец, в самом первом примере, продемонстрированном в начале этой статьи, используется Modernizr для проверки поддержки анимации CSS3. Если это не так, он загружает код, который будет имитировать ключевые кадры, определенные в файле master.css, moz-master.css & ms-master.css:

  // Проверка поддержки CSS3-анимации

 if (! Modernizr.cssanimations) {

 // если это так, мы можем использовать нашу резервную библиотеку JS

     supportElement.innerHTML = "CSS3-анимация <strong> не поддерживается </ strong>";

     LoadJSAnimationsFallback ();

 }

 еще {

     // если поддерживается анимация CSS3, нам нечего делать.

     // Таблицы стилей * master.css будут автоматически применены и использованы.

     supportElement.innerHTML = "Поддерживаются анимации CSS3 <strong> </ strong>";

 } 

Функция LoadJSAnimationsFallback () определена в jsfallback-master.js, который просто содержит все объявления ключевых кадров и 19 анимаций, необходимых для имитации поведения, созданного Энтони в чистом CSS3. При таком подходе разработчик должен затем переписать все правила, используя библиотеку. Другой подход может состоять в том, чтобы проанализировать один из файлов CSS с помощью вызова XHR и динамически создавать вызовы JavaScript для библиотеки. Это требует больше работы, так как вам почти нужно переопределить спецификации CSS3-анимации в JavaScript!

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

Вы можете скачать файлы для основного примера здесь: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

Он содержит незавершенные версии файлов animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript, а также различные файлы CSS3 declinaison для префиксов основных поставщиков.

Вывод

CSS3 Animations — это мощная технология, которая выводит приложения HTML5 на новый уровень. Он предлагает интересные сценарии. Дизайнеры могут использовать его для создания экранов пользовательского интерфейса нового поколения с плавной и плавной анимацией без необходимости разработчиков. Поскольку аппаратное ускорение происходит в большинстве случаев, разработчики также должны обратить внимание на эту спецификацию. Наконец, оба могли сотрудничать. Дизайнеры могут работать над серией предопределенных анимаций, охватывающих большинство сценариев. Затем разработчики могут создавать библиотеки JavaScript, которые будут реализовывать эти анимации. Эта библиотека может предложить прозрачным способом 2 реализации: динамическое создание CSS3 на лету или запасной вариант для старых браузеров.

Идти дальше

• Статья о переходах CSS3 Дэвида Катухе: Введение в переходы CSS3
• Спецификации анимации CSS3: http://www.w3.org/TR/css3-animations/
• IE Test Drive для анимации CSS3: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

Другие полезные посты:

• События относительно ограничены в спецификации CSS3 Animation. Джо Ламберт предлагает интересное решение для запуска событий на каждом ключевом кадре: события анимации на ключевом кадре CSS (решение Javascript)
• Форма учебника по анимации CSS3 Собственный ведущий дизайнер SitePoint Алекс Уокер, полный примеров.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .