Анимация CSS3

Делать анимацию элементов HTML5 с помощью CSS3 анимации . С аппаратным ускорением GPU, CSS3 анимация безусловно поднимает планку качества нового поколения приложений HTML.

CSS3 Animations это расширение CSS3 Transitions , рекомендую сначала прочитать статью: Переходы и анимация css3. Для создания CSS3 анимации пользуйтесь инструментом CSS3 Animations .

В этой статье, интересные демонстрации которые подчеркивают потенциал CSS3 анимации, как построить простою анимацию и как обращаться с добавленным резервом JavaScript:

Пример анимации StarWars AT-AT, который использует CSS3 Анимацию для анимации частей транспорта (к которому подключен JavaScript, если вдруг пользователь пользуется браузером который не поддерживает CSS3 Анимацию):

этот образец анимации был успешно протестирован в IE10 PP3/PP4, Chrome 15, Firefox 8 и IPad 2 и резервный JS в IE9 настольных и мобильных (Windows Phone). По неизвестной причине, он ведет себя странно в Опере 11,50, но прекрасно работает с 11,60.

CSS3 Анимация

Сначала обзор того, какие свойства можно использовать для создания анимации. CSS3 анимации работают в основном на тех же значениях что и CSS3 Transition.

Вот они: нажмите здесь, чтобы посмотреть | скрыть их

Следующие свойства должны поддерживаться для анимации: нажмите здесь, чтобы посмотреть | скрыть их

SVG

Свойства объектов SVG анимация, когда они определяются как анимация: true в SVG спецификацией: SVG . Но в то время, когда эта статья была написана, так и не удалось объединить CSS3 анимация прямо в элементы SVG в одном из последних версий браузеров.

Вот как работает Анимация CSS3

В файле CSS пишем свойства:



@keyframes name_of_the_animation {
  from {
   property_to_animate: initial_value;
  }
  50% {
     property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}


, или написать так:



@keyframes name_of_the_animation {
  0% {
   property_to_animate: initial_value;
  }
  50% {
     property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}


В этой анимации определено 3 шага 0, 50 и 100%. Нужно по крайней мере, установить (0%), и (или 100%) по мере создания правильной анимации (таким образом минимум 2 шага). После этого, вы можете добавить так много ключевых кадров, сколько нужно, но только между 0 и 100% для обработки именно различных действия вашей анимации.

После того, как определение готово, с помощью классического селектора CSS3, вам понадобится также настроить опции анимации. Вот пример для общего блока:



#id_of_the_html_element {
animation-name: name_of_the_animation;
animation-duration: number_of_seconds s;
animation-iteration-count: number | infinite;
}


Чтобы лучше понять, рассмотрим реальный образец. Прежде всего спецификации CSS3 анимации находится в стадии разработки, вам нужно будет использовать соответствующего поставщика префикса. Мы будем использовать IE10, в качестве образца префикс ms. Теперь посмотрим, как голова AT-AT движется.

Вот свойства анимации:



@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}


У нас есть 6 шагов (0, 25, 50, 55, 75 & 100%) работая на CSS3 2D преобразования атрибутов, изменив значение вращения.

Затем анимация применяется с помощью этого правила CSS:



#skull
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
}


<div> элемент имеет атрибут «id= skull «, и мы применили на нём анимацию под названием «rotate- skull «. Анимация должна быть завершена в 7s и воспроизводится бесконечное число раз.

Вот живой результат, если ваш браузер поддерживает CSS3 анимации:

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



#skull {
    -ms-animation: rotate-skull 7s infinite;
}


Анимация будет запускаться, при соответствующем правиле. Вы можете проигрывать или просто остановить анимацию с помощью JavaScript или проигрывать через CSS3 с классами указанными в теге .

Нелинейная анимация

Можно использовать свойство «animation-timing-function», если вы хотите нелинейную анимацию. Так же можно смешивать типы временных функций в каждом ключевом кадре.

В принципе, CSS3 анимации будут использовать кубические кривые безье , чтобы сгладить анимацию, различные вычисления скорости на продолжительность.

Поддерживаются следующие функции:

  • linear : Постоянная скорость
  • cubic-bezier : скорость будет рассчитываться в соответствии с кривой Безье третьего порядка определяется двумя контрольными точками: P0 и P1 (так что вам придется определить 4 значения здесь: p0x, P0y и P1x, P1y.
  • ease : скорость будет рассчитываться с кубических Безье (0,25, 0,1, 0,25, 1)
  • ease-in : скорость будет рассчитываться с кубическим Безье (0.42, 0, 1, 1)
  • ease-inout : скорость будет рассчитываться с кубическим Безье (0.42, 0, 0,58, 1)
  • пease-out : скорость будет рассчитываться с кубическим Безье (0, 0, 0.58, 1)

Инструмент моделирования который использует чистый JavaScript написан David Catuhe, для того чтобы показать влияние каждой функции времени:

этот инструмент используется в SVG поддерживается Firefox, Chrome, Opera и 11,60 IE9/10. Он не будет работать должным образом в опере 11,50 и Safari на IPad.

SVG удивительный инструмент. Вы можете с помощью мыши редактировать кривую.

Если Ваш браузер поддерживает CSS3 анимации, давайте теперь посмотрим простой пример использования easing functions to animate a canvas tag ( функции замедления анимации тегом canvas ) содержащие спрайты СSS3 анимации.

Вот код СSS3 анимации, который будет использоваться в этом демо:



@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}

#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}


С поставщиками префиксов, они также работает в Google Chrome и Mozilla Firefox:

Если Ваш браузер не поддерживает СSS3 анимации, но поддерживает canvas, анимация спрайта должны быть видна, но не будет двигаться по ширине экрана.

если вы хотите узнать больше о canvas анимации, смотрите запись: Анимация фона веб-приложения

Остановка СSS3 анимации

Свойство «animation-delay» просто запускает анимации до начала выполнения через некоторое время после его применения.

События

events (события) могут быть запущены во время анимации. Они называются «Animation Start «, «Animation End » и «Animation Iteration «. В зависимости от вашего браузера, правильное название будет, например:

  • Chrome: webkitAnimationEnd
  • Firefox: mozAnimationEnd
  • Internet Explorer: MSAnimationEnd

Действия выводят следующую информацию:

  • animationName : название анимации вызывающее событие
  • ElapsedTime : время запуска анимация (в секундах)

Пример для IE10:



elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);


Подробнее о CSS3 анимации

CSS3 анимация действительно полезна по 2-вум основным причинам:

  • Аппаратное ускорение: CSS3 Анимация большую часть времени непосредственно обрабатывается GPU и может производить плавный результат. Это очень интересный подход для мобильных устройств.
  • Разделение кода и дизайна : Я знаю, что есть некоторые дебаты по этому вопросу, но есть мнение что разработчики не должны знать о анимации всё. Так же дизайнер или художник не должен знать о JavaScript. CSS3 предлагает возможность работать дизайнерам с их классическими инструментами для создания анимации.

Поддержка браузерами CSS3 анимации

CSS3 анимации в настоящее время поддерживает широкий диапазон браузеров:


Поддержка браузеров анимации CSS3

CSS3 анимации как спецификация еще не закончена, необходимо использовать префиксы поставщиков, таких как ms-,-moz-,-WebKit-,–o- для браузеров. Не волнуйтесь за префиксы, есть замечательный способ не писать их в ручную читайте Способ сжать файл CSS

Что делать с браузерами, которые не поддерживают эту новую функцию?

Первый вариант, это просто ничего не делать. Благодаря красоте изящные деградации, вы можете просто позволить пользователю видеть только статическое изображение.

Второй вариант заключается в определении функции с помощью библиотеки JavaScript Modernizr или дугой который будет имитировать анимацию. Это то, что мы обычно называем запасной механизм. К сожалению, я не нашел сегодня рабочую и полную библиотеку JavaScript, которая могла бы заменить CSS3 анимацию, если нет поддержки браузера.

Для образца AT-AT специально написана библиотека JavaScript предназначена для этого примера.

CSS3 Анимация с резервной библиотекой JavaScript

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

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



// Анимация объектов
// Это нужно, HTML целевой элемент, имя анимации, ее продолжительность &amp; iteration  и
// кадры, содержащихся объектов в массиве
// Просмотреть анимацию просто как последовательность переходов сыграл определенное количество раз
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // сохранение значений свойств объектов
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;

    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;

    // Трансформация доля каждого ключевого кадра в Duration (продолжительность)
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }

    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;

    // NextTransition () функция возвращает следующий переход к бежать
// на основе текущего кадра, чтобы играть
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;

        // По сравнению с первоначальным TRANSITIONSHELPER Давида Catuhe
// Нам нужен специальный код, чтобы играть с CSS3 2D свойства Преобразования значения
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }

            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };

            return transition;
        }
        // Если это классический собственности на животный, мы используем более или менее TRANSITIONSHELPER как есть
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };

    // каждый анимации объект имеет отметьте функцию
// которые будут вызываться каждые 17 мс (к целевой 60 кадров / с)
// Этот Тикер является мониторинг текущего состояния, переход и
// создать новый переход, как только догорит старая/dead
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) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }

    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};


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



// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};

//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};


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




// number of times you'd like the animations to be run
var iterationsNumber = 100;

var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new 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:



// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
    // if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations are not supported";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do.
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations are supported";
}


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

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

Вы можете скачать файлы основного образца, содержащий версии unminified animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript файлов, а также различные CSS3 declinaison файлы для основных поставщиков префиксов.

Заключение

Анимация в таблице CSS3 представляет собой мощную технологию приложений HTML5 предлагая интересные сценарии. Дизайнеры могут использовать его для создания нового поколения пользовательского интерфейса без разработок JavaScript.

1 комментарий на тему “Анимация CSS3”

  1. комментарии

    Круть! Спасибо большое за статью.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>