Un guapo aplicación debe proporcionar usuario con retroalimentación visual. El usuario debe saber siempre que una orden (un clic, un grifo o lo que sea) es bien recibido y entendido por la aplicación y animaciones son una gran herramienta para hacerlo.

El nuevo HTML 5 especificación (para ser honesto, debo decir “el nuevo CSS 3 especificación”) presenta una gran herramienta para la manija sencilla animaciones:. las transiciones

De acuerdo con “Transiciones CSS Nivel Módulo 3” especificación en el sitio W3C, CSS3 transiciones permite que los cambios de propiedad en valores CSS que se produzca sin problemas a través de una duración especificada .

El objetivo de este artículo será describir por primera vez el concepto de transiciones y luego para ver cómo funciona CSS3 transiciones y cómo podemos manejar los navegadores que no soportan la función: HTML5 Desarrollado con CSS3 / Styling


  1. Las transiciones CSS3
  2. Poniendo todo junto
  3. Las transiciones CSS3 transiciones sin
  4. Conclusión
  5. Yendo más lejos

    Además, le sugiero que lea el “ Introducción a CSS3 Animaciones ” (por David Rousset ), que es un excelente compañero para este artículo.

    Para ver cómo se puede utilizar CSS3 transiciones, he desarrollado es una muestra de un juego que utiliza CSS3 transiciones a las células de un rompecabezas animados (y que se replegará para JavaScript si su navegador no soporta CSS3 Transitions). Se puede jugar de juego aquí.

    Tabla de contenidos

    Transiciones CSS3

    Introducción

    Al principio, el grupo de trabajo W3C CSS resistió añadir transiciones a discutir CSS que las transiciones no son realmente las propiedades de estilo. Pero con el tiempo los diseñadores y desarrolladores lograron convencerlos de que las transiciones es acerca de los estilos dinámicos y pueden tener lugar en un archivo CSS.

    SVG

    Las propiedades de los objetos SVG son animatable cuando se definen como animatable: true en la especificación SVG: http:. //Www.w3.org/TR/SVG/struct.html

    Declaraciones

    Para declarar una transición en un archivo CSS, sólo hay que escribir el siguiente código:


    1. transición de propiedad: todos;
    2. transición de duración: 0,5 s;
    3. transición-timing-función: facilidad;
    4. transición de retardo: 0s;

      Esta declaración define que cualquier actualización sobre cualquier propiedad se hará en 0,5 s (y no de modo inmediato
      .)

      Puede también definir sus traducciones en función de cada propiedad:


      1. transición de propiedad: opacidad izquierda arriba;
      2. transición de duración: 0,5 s 0,8 s 0,1 s;
      3. transición-timing-function: a aliviar facilidad lineal;
      4. transición de retardo: 0s 0s 1s;

        Y finalmente, puede utilizar la propiedad abreviada “ transición ” para definir todo lo que necesita en una sola línea:


        1. transición: todos 0s facilidad 0.5s;

          En esta versión abreviada que pueda precisa tantas propiedades como desee separados por una coma:


          1. transición: Opacidad 0.5s 0s facilidad, 0.8s izquierda lineales 0s;

            Las transiciones se activará cuando una propiedad del objeto de destino se actualiza. La actualización se puede realizar con JavaScript o utilizando CSS3 por asignar nueva clase de una etiqueta .

            Por ejemplo, el uso de IE10 si tiene la siguiente declaración CSS 3:


            1. -ms-transición de propiedad: opacidad superior izquierda;
            2. -ms-transición de duración: 0,5 s 0,8 s 0,5 s;
            3. -ms-transición-timing-función: facilidad lineal facilidad;

              Al actualizar la opacidad de su etiqueta, el valor actual se animó al nuevo valor de más de 0,5 segundos con una función de la facilidad de tiempo (que dan una animación suave).

              no lineal transiciones

              Los “transición de sincronización de función” define la línea de que la transición no será lineal pero va a utilizar una función de temporización para producir un no lineal animación.

              Básicamente, las transiciones CSS3 utilizarán curva de Bezier cúbico para suavizar la transición mediante el cálculo de diferente velocidad sobre su duración.

              Las siguientes funciones son compatibles:


              • linear: Velocidad constante
              • cúbicas Bézier: velocidad se calcula de acuerdo con una curva de Bezier definir por dos puntos de control: P0 y P1 (por lo que tendrá que definir 4 valores aquí: P0x, P0y y P1X, P1Y .
              • facilidad: velocidad se calcula con cúbico-Bezier (0,25, 0,1, 0,25, 1)
              • facilidad en: velocidad se calcula con cúbico-Bezier (0,42, 0, 1, 1)
              • facilidad inout: velocidad se calcula con cúbico-Bezier (0,42, 0, 0,58, 1)
              • facilidad de salida: velocidad se calcula con cúbicas Bézier (0, 0, 0,58, 1)

                Aquí es una herramienta de simulación (utilizando SVG por supuesto
                ) Para mostrar el impacto de cada función de temporización:

                Este simulador está escrito con JavaScript puro código para facilitar la comprensión de la función:


                1. TRANSITIONSHELPER.computeCubicBezierCurveInterpolation = función (t, x1, y1, x2, y2) {
                2. // Extracto de X (que es igual al tiempo aquí)
                3. var f0 = 1 – 3 * x2 + 3 * x1;
                4. var f1 = 3 * x2 – 6 * x1;
                5. var f2 = 3 * x1;

                6. var refinedT = t;
                7. for (var i = 0; i & lt; 5; i ++) {
                8. var refinedT2 = refinedT * refinedT;
                9. var refinedT3 = refinedT2 * refinedT;

                10. var x = f0 * refinedT3 + f1 * refinedT2 + f2 * refinedT;
                11. pendiente var = 1,0 / (3,0 * f0 * refinedT2 + 2,0 * f1 * refinedT + f2);
                12. refinedT – = (x – t) * pendiente;
                13. refinedT = Math.min (1, Math.max (0, refinedT));
                14. }

                15. // Resolve Bezier cúbico para la x dado
                16. volver 3 * Math.pow (1 – refinedT, 2) * * refinedT y1 +
                17. 3 * (1 – refinedT) * Math.pow (refinedT, 2) * y2 +
                18. Math.pow (refinedT, 3);
                19. };

                  Este código es la aplicación de la Bézier cúbica sobre la base de esta definición y se puede encontrar la fuente del simulador aquí.

                  Delay

                  La línea “transición de retardo” define el retardo entre una actualización de una propiedad y el inicio de la transición

                  Eventos

                  Un evento se eleva al final de una transición: “ TransitionEnd ”. De acuerdo con el navegador el nombre correcto será:


                  • Chrome & amp; Safari: webkitTransitionEnd
                  • Firefox: mozTransitionEnd
                  • Opera: oTransitionEnd
                  • Internet Explorer: MSTransitionEnd

                    El evento le dará la información siguiente:


                    • nombrePropiedad: Nombre de la propiedad animada
                    • elapsedTime: La cantidad de tiempo que la transición ha estado funcionando, en segundo

                      Aquí está una muestra de uso de IE10:


                      1. block.addEventListener ( “MSTransitionEnd”, onTransitionEvent);

                        Más sobre CSS3 transiciones

                        Puedo proponer principalmente dos razones por las transiciones CSS3 son realmente útiles:


                        • aceleración de hardware: CSS3 Transitions se manejan directamente en la GPU (donde esté disponible) y producen resultados más suaves. Y es realmente importante en los dispositivos móviles, donde la potencia de cálculo es muy limitado
                        • Mejor separación entre el código y el diseño: Para mí, el desarrollador no tiene que ser consciente de animaciones o cualquier cosa relacionada con el diseño. De la misma manera que el diseñador / artista no debe estar al tanto de JavaScript. Es por eso que CSS3 transiciones son muy interesantes como los diseñadores pueden describir todas las transiciones en el CSS sin necesidad de desarrolladores

                          Soporte y repliegue

                          Desde PP3, IE10 (que se puede descargar con Windows “8” Developer Preview aquí) soporta CSS3 transiciones:


                          Este informe fue producido por http://caniuse.com/#search=CSS3 transiciones.

                          Por supuesto, como la especificación no está terminado ( borrador de trabajo ), debe utilizar prefijos de proveedores tales como -MS-, -moz-, -webkit-, -O -.

                          Obviamente puede ver que necesitamos para proporcionar un solución transparente con el fin de hacer frente a todo tipo de navegadores. La mejor manera será desarrollar una API que puede detectar el apoyo de las transiciones CSS3. Si el navegador no soporta la característica, que se replegará para un cierto código JavaScript.

                          Es importante apoyar un método de respaldo si se basan en las transiciones para los Web site funcionalidades. Si no quieres hacer eso, usted debe considerar el uso de las transiciones sólo para mejoras en el diseño . En este caso, el sitio seguirá funcionando pero sólo soportados los navegadores le ofrecer la experiencia completa. Hablamos aquí de “ mejoras progresivas ” como el más potente es el navegador, el más características que recibe.

                          Las transiciones CSS3 transiciones sin

                          Así que para ser capaz de soportar una reserva para CSS3 transiciones, vamos a desarrollar un pequeño juego de herramientas para proporcionar transiciones de código.

                          En primer lugar, vamos a crear un objeto contenedor para nuestro espacio de nombres:


                          1. var TRANSITIONSHELPER = TRANSITIONSHELPER || {};

                          2. TRANSITIONSHELPER.tickIntervalID = 0;

                          3. TRANSITIONSHELPER.easingFunctions = {
                          4. linear: 0,
                          5. facilidad: 1,
                          6. easeIn: 2,
                          7. easeOut: 3,
                          8. easeInOut: 4,
                          9. el usuario: 5
                          10. };
                          11. TRANSITIONSHELPER.currentTransitions = [];

                            Para apoyar el mismo nivel de funciones de aceleración, que debe declarar una “enumeración” con todos los campos requeridos.

                            El juego de herramientas se basa en una función que es llamada cada 17 ms (para lograr animaciones a 60 fps). La función enumerará a través de una colección de transiciones activas. Para cada transición del código evaluará el siguiente valor dado el valor actual y el valor objetivo.

                            Vamos a necesitar algunos mano funciones a extraer valor de las propiedades y las unidades utilizadas:


                            1. TRANSITIONSHELPER.extractValue = función (string) {
                            2. try {
                            3. resultado var = parseFloat (string);

                            4. si (isNaN (resultado)) {
                            5. return 0;
                            6. }

                            7. Resultado de retorno;
                            8. } catch (e) {
                            9. return 0;
                            10. }
                            11. };

                            12. TRANSITIONSHELPER.extractUnit = función (string) {

                            13. // si el valor está vacío suponemos que es px
                            14. si (string == “”) {
                            15. retorno “px”;
                            16. }

                            17. valor var = TRANSITIONSHELPER.extractValue (string);
                            18. unidad var = String.Replace (valor, “”);

                            19. unidad de retorno;
                            20. };

                              La función principal procesará transiciones activas y llamará a la función de Bezier cúbico para evaluar los valores de corriente:


                              1. TRANSITIONSHELPER.tick = function () {
                              2. // transiciones de procesamiento
                              3. para (índice var = 0; índice & lt; TRANSITIONSHELPER.currentTransitions.length; índice ++) {
                              4. transición var = TRANSITIONSHELPER.currentTransitions [índice];

                              5. // Calcular nuevo valor
                              6. var currentDate = (nuevos Fecha) .getTime ();
                              7. var diff = currentDate – transition.startDate;

                              8. paso var = diff / transition.duration;
                              9. var offset = 1;

                              10. // función de sincronización
                              11. interruptor (transition.ease) {
                              12. caso TRANSITIONSHELPER.easingFunctions.linear:
                              13. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, 0, 0, 1,0, 1,0);
                              14. break;
                              15. caso TRANSITIONSHELPER.easingFunctions.ease:
                              16. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, 0,25, 0,1, 0,25, 1,0);
                              17. break;
                              18. caso TRANSITIONSHELPER.easingFunctions.easein:
                              19. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, 0,42, 0, 1,0, 1,0);
                              20. break;
                              21. caso TRANSITIONSHELPER.easingFunctions.easeout:
                              22. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, 0, 0, 0,58, 1,0);
                              23. break;
                              24. caso TRANSITIONSHELPER.easingFunctions.easeinout:
                              25. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, 0,42, 0, 0,58, 1,0);
                              26. break;
                              27. caso TRANSITIONSHELPER.easingFunctions.custom:
                              28. offset = TRANSITIONSHELPER.computeCubicBezierCurveInterpolation (paso, transition.customEaseP1X, transition.customEaseP1Y, transition.customEaseP2X, transition.customEaseP2Y);
                              29. break;
                              30. }

                              31. desplazamiento * = (transition.finalValue – transition.originalValue);

                              32. unidad var = TRANSITIONSHELPER.extractUnit (transition.target.style [transition.property]);
                              33. var CurrentValue = transition.originalValue + offset;

                              34. transition.currentDate = currentDate;

                              35. // transición Muerto?
                              36. si (currentDate & gt; = transition.startDate + transition.duration) {
                              37. CurrentValue = transition.finalValue; // sujeción
                              38. TRANSITIONSHELPER.currentTransitions.splice (índice, 1); // transición Extracción
                              39. index -;

                              40. // evento de finalización
                              41. si (transition.onCompletion) {
                              42. transition.onCompletion ({propertyName: transition.property, elapsedTime: transition.duration});
                              43. }
                              44. }

                              45. // afectarlo
                              46. transition.target.style [transition.property] = CurrentValue + unidad;
                              47. }
                              48. };

                                La versión actual de la caja de herramientas sólo es compatible con los valores numéricos, pero si desea animar valores complejos (como el color) sólo hay que descomponerlos a valores simples.

                                Registro de una transición en el sistema se realiza utilizando el siguiente código:


                                1. TRANSITIONSHELPER.transition = función (objetivo, la propiedad, newValue, duración, facilidad, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y, onCompletion) {

                                2. // Crear una nueva transición
                                3. transición var = {
                                4. target: objetivo,
                                5. propiedad: Vivienda,
                                6. finalValue: nuevoValor,
                                7. OriginalValue: TRANSITIONSHELPER.extractValue (target.style [propiedad]),
                                8. Duración: duración,
                                9. startDate: (nueva fecha) .getTime (),
                                10. currentDate: (nueva fecha) .getTime (),
                                11. facilidad: facilidad,
                                12. customEaseP1X: customEaseP1X,
                                13. customEaseP2X: customEaseP2X,
                                14. customEaseP1Y: customEaseP1Y,
                                15. customEaseP2Y: customEaseP2Y,
                                16. onCompletion: onCompletion
                                17. };

                                18. // Inicio del servicio de garrapata, si es necesario
                                19. si (TRANSITIONSHELPER.tickIntervalID == 0) {
                                20. TRANSITIONSHELPER.tickIntervalID = setInterval (TRANSITIONSHELPER.tick, 17);
                                21. }

                                22. // Eliminar las transiciones anteriores en misma propiedad y destino
                                23. para (índice var = 0; índice & lt; TRANSITIONSHELPER.currentTransitions.length; índice ++) {
                                24. var temp = TRANSITIONSHELPER.currentTransitions [índice];

                                25. Si (temp.target === transition.target & amp; & amp; temp.property === transition.property) {
                                26. TRANSITIONSHELPER.currentTransitions.splice (índice, 1);
                                27. index -;
                                28. }
                                29. }

                                30. // Registro
                                31. Si (transition.originalValue! = Transition.finalValue) {
                                32. TRANSITIONSHELPER.currentTransitions.push (transición);
                                33. }
                                34. };

                                  El “ garrapata ” función se inicia cuando se activa la primera transición.

                                  Por último sólo hay que usar Modernizr para definir si CSS3 Transitions está soportado por el navegador actual. Si no es así, puede repliegue a nuestra caja de herramientas.

                                  El código para el TransitionsHelper se puede descargar aquí: http://www.catuhe.com/msdn/transitions/transitionshelper.js

                                  Por ejemplo, en mi juego de puzzle, el siguiente código se utiliza para animar las células:


                                  1. if (! PUZZLE.isTransitionsSupported) {
                                  2. TRANSITIONSHELPER.transition (block.div, “superior”, block.x * TotalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
                                  3. TRANSITIONSHELPER.transition (block.div, “izquierda”, block.y * TotalSize + offset, 500, TRANSITIONSHELPER.easingFunctions.ease);
                                  4. }
                                  5. else {
                                  6. block.div.style.top = (block.x * TotalSize + offset) + “px”;
                                  7. block.div.style.left = (block.y * TotalSize + offset) + “px”;
                                  8. }

                                    Podemos observar que podría utilizar otra manera para animar mis células cuando las transiciones CSS3 son compatibles: Podría haber definido un conjunto de clases de CSS3 con valores predefinidos izquierdo y superior (uno para cada celda) para afectar a las células correctas.

                                    Algunos marcos y conjuntos de herramientas que ya existen para las transiciones de software de soporte:

                                    Por cierto, también puede utilizar la vieja buena animado () método de jQuery.

                                    Conclusión

                                    Como hemos visto, las transiciones CSS3 es un fácil manera realmente para agregar animaciones a su proyecto. Se puede producir una mayor reactiva aplicación simplemente mediante el uso de algunas transiciones cuando se desea cambiar los valores.

                                    Por cierto, hay dos soluciones si se desea implementar un repliegue JavaScript:


                                    • Usted puede hacer todo en el lado de JavaScript y si detecta el apoyo de las transiciones CSS3, que inyectará declaraciones CSS3 en la página.
                                    • O puede utilizar manera estándar (usando verdaderas declaraciones de CSS3 en los archivos CSS) y acaba de detectar la necesidad de repliegue en JavaScript. Para mí, es la mejor opción ya que el repliegue debe ser una opción y no el sujeto principal. En un futuro cercano, todos los navegadores apoyarán CSS3 transiciones y en este caso sólo tendrá que retirar su código de reserva. Además, es una mejor manera de dejar toda la CSS bajo el control del equipo creativo y no en la parte de código.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *