Красивые приложения с переходами CSS3

• Chrome & Safari: webkitTransitionEnd
• Firefox: mozTransitionEnd
• Опера: oTransitionEnd
• Internet Explorer: MSTransitionEnd

Событие предоставит вам следующую информацию:

• propertyName : имя анимированного свойства
• elapsedTime : время выполнения перехода в секундах.

Вот пример использования для IE10: 116. block.addEventListener («MSTransitionEnd», onTransitionEvent);

Подробнее о переходах CSS3

В основном я могу предложить две причины, по которым переходы CSS3 действительно полезны:

• Аппаратное ускорение: переходы CSS3 напрямую обрабатываются на графическом процессоре (если он доступен) и дают более плавные результаты. И это действительно важно на мобильных устройствах, где вычислительная мощность действительно ограничена
• Лучшее разделение между кодом и дизайном : для меня разработчик не должен знать об анимации или чем-либо, связанном с дизайном. Точно так же дизайнер / художник не должен знать о JavaScript. Вот почему CSS3 Transitions действительно интересны, так как дизайнеры могут описывать все переходы в CSS без необходимости разработчиков

Поддержка и запасной вариант

Начиная с PP3, IE10 (который можно загрузить с Windows 8 Developer Preview здесь ) поддерживает переходы CSS3:

Этот отчет был создан с помощью http://caniuse.com/#search=CSS3 переходов .

Конечно, поскольку спецификация не закончена ( рабочий проект ), вы должны использовать префиксы поставщика, такие как -ms-, -moz-, -webkit-, -o-.

Очевидно, мы видим, что нам необходимо предоставить прозрачное решение для всех типов браузеров. Наилучшим способом будет разработка API, который сможет определять поддержку переходов CSS3. Если браузер не поддерживает эту функцию, мы вернемся к некоторому коду JavaScript.

Важно поддерживать запасной метод, если вы полагаетесь на переходы для функциональности веб-сайтов. Если вы не хотите этого делать, вам следует рассмотреть возможность использования переходов только для улучшения дизайна . В этом случае сайт все еще будет работать, но только поддерживаемые браузеры будут работать в полном объеме. Мы говорим здесь о « прогрессивных улучшениях », поскольку чем мощнее браузер, тем больше возможностей он получает.

Переходы без переходов CSS3

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

Прежде всего, мы создадим объект контейнера для нашего пространства имен:

119.    var TRANSITIONSHELPER = TRANSITIONSHELPER || {};
120.     
121.    TRANSITIONSHELPER.tickIntervalID = 0;
122.     
123.    TRANSITIONSHELPER.easingFunctions = {
124.    linear:0,
125.    ease:1,
126.    easein:2,
127.    easeout:3,
128.    easeinout:4,
129.    custom:5
130.    };
131.     
132.    TRANSITIONSHELPER.currentTransitions = [];

Чтобы поддерживать одинаковый уровень функций замедления, мы должны объявить enum со всеми необходимыми полями.

Инструментарий основан на функции, которая вызывается каждые 17 мс (для достижения анимации при 60 кадрах в секунду). Функция будет перечислять через коллекцию активных переходов. Для каждого перехода код будет оценивать следующее значение с учетом текущего значения и целевого значения.

Нам понадобятся некоторые удобные функции для извлечения значений используемых свойств и единиц:

133.    TRANSITIONSHELPER.extractValue = function (string) {
134.    try {
135.    var result = parseFloat(string);
136.     
137.    if (isNaN(result)) {
138.    return 0;
139.    }
140.     
141.    return result;
142.    } catch (e) {
143.    return 0;
144.    }
145.    };
146.     
147.    TRANSITIONSHELPER.extractUnit = function (string) {
148.     
149.    // if value is empty we assume that it is px
150.    if (string == "") {
151.    return "px";
152.    }
153.     
154.    var value = TRANSITIONSHELPER.extractValue(string);
155.    var unit = string.replace(value, "");
156.     
157.    return unit;
158.    };

Основная функция обработает активные переходы и вызовет функцию кубического Безье для оценки текущих значений:

159.    TRANSITIONSHELPER.tick = function () {
160.    // Processing transitions
161.    for (var index = 0; index < TRANSITIONSHELPER.currentTransitions.length; index++) {
162.    var transition = TRANSITIONSHELPER.currentTransitions[index];
163.     
164.    // compute new value
165.    var currentDate = (new Date).getTime();
166.    var diff = currentDate - transition.startDate;
167.     
168.    var step = diff / transition.duration;
169.    var offset = 1;
170.     
171.    // Timing function
172.    switch (transition.ease) {
173.    case TRANSITIONSHELPER.easingFunctions.linear:
174.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0, 0, 1.0, 1.0);
175.    break;
176.    case TRANSITIONSHELPER.easingFunctions.ease:
177.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0.25, 0.1, 0.25, 1.0);
178.    break;
179.    case TRANSITIONSHELPER.easingFunctions.easein:
180.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0.42, 0, 1.0, 1.0);
181.    break;
182.    case TRANSITIONSHELPER.easingFunctions.easeout:
183.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, 0, 0, 0.58, 1.0);
184.    break;
185.    case TRANSITIONSHELPER.easingFunctions.easeinout:
186.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step,0.42, 0, 0.58, 1.0);
187.    break;
188.    case TRANSITIONSHELPER.easingFunctions.custom:
189.    offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation(step, transition.customEaseP1X, transition.customEaseP1Y, transition.customEaseP2X, transition.customEaseP2Y);
190.    break;
191.    }
192.     
193.    offset *= (transition.finalValue - transition.originalValue);
194.     
195.    var unit = TRANSITIONSHELPER.extractUnit(transition.target.style[transition.property]);
196.    var currentValue = transition.originalValue + offset;
197.     
198.    transition.currentDate = currentDate;
199.     
200.    // Dead transition?
201.    if (currentDate >= transition.startDate + transition.duration) {
202.    currentValue = transition.finalValue; // Clamping
203.    TRANSITIONSHELPER.currentTransitions.splice(index, 1); // Removing transition
204.    index--;
205.     
206.    // Completion event
207.    if (transition.onCompletion) {
208.    transition.onCompletion({propertyName:transition.property,elapsedTime:transition.duration});
209.    }
210.    }
211.     
212.    // Affect it
213.    transition.target.style[transition.property] = currentValue + unit;
214.    }
215.    };

Текущая версия инструментария поддерживает только числовые значения, но если вы хотите анимировать сложные значения (например, цвет), вам просто нужно разложить их на простые значения.

Регистрация перехода в системе будет осуществляться с использованием следующего кода:

216.    TRANSITIONSHELPER.transition = function (target, property, newValue, duration, ease, customEaseP1X, customEaseP1Y,
customEaseP2X, customEaseP2Y, onCompletion) {
217.     
218.    // Create a new transition
219.    var transition = {
220.    target: target,
221.    property: property,
222.    finalValue: newValue,
223.    originalValue: TRANSITIONSHELPER.extractValue(target.style[property]),
224.    duration: duration,
225.    startDate: (new Date).getTime(),
226.    currentDate: (new Date).getTime(),
227.    ease:ease,
228.    customEaseP1X:customEaseP1X, 
229.    customEaseP2X:customEaseP2X,
230.    customEaseP1Y: customEaseP1Y,
231.    customEaseP2Y: customEaseP2Y,
232.    onCompletion: onCompletion
233.    };
234.     
235.    // Launching the tick service if required
236.    if (TRANSITIONSHELPER.tickIntervalID == 0) {
237.    TRANSITIONSHELPER.tickIntervalID = setInterval(TRANSITIONSHELPER.tick, 17);
238.    }
239.     
240.    // Remove previous transitions on same property and target
241.    for (var index = 0; index < TRANSITIONSHELPER.currentTransitions.length; index++) {
242.    var temp = TRANSITIONSHELPER.currentTransitions[index];
243.     
244.    if (temp.target === transition.target && temp.property === transition.property) {
245.    TRANSITIONSHELPER.currentTransitions.splice(index, 1);
246.    index--;
247.    }
248.    }
249.     
250.    // Register
251.    if (transition.originalValue != transition.finalValue) {
252.    TRANSITIONSHELPER.currentTransitions.push(transition);
253.    }
254.    }; 

Функция «галочка» запускается при активации первого перехода.

Наконец, вам просто нужно использовать modernizr, чтобы определить, поддерживается ли переходы CSS3 текущим браузером. Если нет, то вы можете Откат к нашему инструментарию.

Код для TransitionsHelper можно скачать здесь: http://www.catuhe.com/msdn/transitions/transitionshelper.js

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

255.    if (!PUZZLE.isTransitionsSupported) {
256.    TRANSITIONSHELPER.transition(block.div, "top", block.x * totalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
257.    TRANSITIONSHELPER.transition(block.div, "left", block.y * totalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
258.    }
259.    else {
260.    block.div.style.top = (block.x * totalSize + offset) + "px";
261.    block.div.style.left = (block.y * totalSize + offset) + "px";
262.    }

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

Некоторые платформы и наборы инструментов уже существуют для поддержки программных переходов:

• jQuery.transition.js : http://louisremi.github.com/jquery.transition.js/test/index.html
• jQUery-Animate-Enhanced: https://github.com/benbarnett/jQuery-Animate-Enhanced

Кстати, вы также можете использовать старый добрый метод animate () jQuery.

Вывод

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

Кстати, есть два решения, если вы хотите реализовать запасной вариант JavaScript:

• Вы можете делать все на стороне JavaScript, и если вы обнаружите поддержку переходов CSS3, вы добавите объявления CSS3 на страницу.
• Или вы можете использовать стандартный способ (используя настоящие объявления CSS3 в файлах CSS) и просто обнаружить необходимость возврата в JavaScript. Для меня это лучший вариант, поскольку запасной вариант должен быть вариантом, а не основным предметом. В ближайшем будущем все браузеры будут поддерживать переходы CSS3, и в этом случае вам просто нужно будет удалить запасной код. Кроме того, это лучший способ оставить весь CSS под контролем творческой группы, а не в части кода.

Идти дальше

• Блог о анимации CSS3 Дэвида Руссе: http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx
• Спецификации переходов CSS3: http://www.w3.org/TR/css3-transitions/
• IE Test Drive на переходах CSS3: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm
• Другие полезные посты:
  
  • http://addyosmani.com/blog/css3transitions-jquery/
  • http://css3.bradshawenterprises.com/
  • http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Лицензия