0

Cómo crear animaciones Web Con Paper.js

La Web se está empezando a utilizar la animación también. Durante años, los archivos GIF animados y Flash gobernados. Texto movido y brilló, pero nunca fue perfecta. Animaciones había cajas a su alrededor como los vídeos de YouTube. HTML5 canvas todo cambia sobre la animación web. El canvas elemento hace posible la integración de los dibujos y animaciones con el resto de la página. Lo puedes combinar con el texto y hacer animaciones interactivas. Este mecanismo de dibujo es de gran alcance, pero muy bajo nivel. Animaciones obtener más poder y necesita menos código, cuando se combina el canvas la etiqueta con el más alto nivel, tales como bibliotecas Paper.js . Este artículo introduce HTML5 animación y le guía a través de la creación de una animación de las semillas de diente de león en el viento.

Neat es fácil, pero desordenado es difícil

Computadoras encanta limpio. Ellos hacen las hojas de cálculo y hacer las estadísticas y las curvas de la trama multivariados, siempre dentro de las líneas de color. En el mundo real, las cosas más simples son sucios. Las hojas que caen de los árboles, las salpicaduras de agua - todas las interacciones que nos rodean se sienten poco simple debido a que estamos acostumbrados a ellos, pero pequeñas ráfagas de viento son en realidad desordenada e impredecible. Para este artículo, vamos a animar a las semillas de diente de león que soplan en la brisa. Dientes de león son difíciles porque todos sabemos lo que parecen: les hemos sentido y tocado sus semillas fuera. Objetos comunes producir un reconocimiento instantáneo y los sentimientos. No tengo que decirte lo que son los dientes de león - que acaba de saber. Dientes de león son un caos de semillas apilados uno encima del otro. (Imagen: Arnoldius ) Nuestra animación de diente de león nunca reproducir la complejidad de lo real, y funcionará mejor si no lo intentamos: que sea demasiado cerca de la real y que se siente raro. En su lugar, vamos a crear un diente de león estilizada que hace que la impresión correcta, sin todos los detalles.

Paper.js

Dibujo de formas simples con el canvas la etiqueta, sin ningún tipo de bibliotecas especiales de giro, es fácil. Crear un canvas : A continuación, agregue un poco de JavaScript. Hojas de trucos para el lienzo que muestran los aspectos básicos, pero cuando te metes en más de dibujo serio, usted querrá una biblioteca de más alto nivel, como Paper.js . Paper.js es una biblioteca JavaScript de dibujos y animaciones. Se basa en gran medida de Scriptographer , un lenguaje de scripting de Adobe Illustrator . Puede escribir código JavaScript con Paper.js , pero la mayoría de las veces usted estará trabajando con una variante de JavaScript llamada PaperScript. Paper.js se llama " La navaja suiza de los gráficos vectoriales de secuencias de comandos , "y el" vector "de todo es importante. Hay dos tipos básicos de gráficos, vectorizados y trama . Los gráficos de trama son como las fotografías tomadas con su cámara: rectángulos grandes con mapas que indican el color de cada píxel. Ampliar ellos y obtendrás puntos borrosos. Los gráficos vectoriales son como se conectan los puntos de las fotos: son conjuntos de líneas y formas que dan instrucciones sobre la forma de dibujar la imagen en cualquier tamaño. Uso de gráficos de vectores, se puede hacer una imagen de la letra Z muy grande y todavía se ven más nítidos. Si usted se convirtió en una trama gráfica de tomar una foto de ella y luego sopla para arriba, la carta tendría todo borroso. Librerías gráficas vectoriales son perfectas para la animación ya que hacen el cambio de tamaño, rotar y mover objetos fácil. También son mucho más rápido, porque el programa tiene instrucciones para dibujar cada objeto en lugar de tener que averiguarlo. La página de Paper.js ejemplos muestran algunas de las cosas asombrosas que usted puede hacer con gráficos vectorizados. El diente de león es un ejemplo de funcionamiento completo, y usted puede ver todas las que se ejecuta en la página de ejemplo . También puede cambiar el código haciendo clic en el botón "Editar", ver los cambios vivir, y copie y pegue el código en su propio sitio web. A lo largo del artículo, vamos a explicar cada parte del código a su vez, pero ten en cuenta que para ejecutar el código de usted mismo, usted tendrá que dirigirse a la página de ejemplo y copiar y pegarlo en su propio entorno .

Nuestro dibujo de diente de león

El primer paso consiste en importar nuestro código JavaScript y archivos PaperScript. El código PaperScript para el funcionamiento de la animación se declara como text/paperscript . Ahora estamos listos para empezar a dibujar. La primera parte de nuestra diente de león es el tallo. El tallo es el arco verde, con un círculo en la parte superior de la bombilla. Vamos a hacer las dos formas con un camino , una lista de formas, puntos y líneas que el navegador se encargó de mostrar. Las rutas son los elementos básicos de la animación. Hacen líneas, curvas y polígonos. También se pueden rellenar para hacer formas complejas. Nuestro camino es el siguiente: Nuestro camino es un arco, así que necesita tres puntos: el inicio, el final y un punto medio a través del arco. Tres puntos son suficientes para definir cualquier arco que necesitamos. El arcTo función dibuja la línea entre ellos. El elemento de ruta también es compatible con información de estilo, como el color del trazo y el grosor del trazo; #567e37 y 5 hará que nuestra línea de arco verde y frondosa. Paper.js compatible con las definiciones del mismo color como CSS. Podemos añadir algunos elementos más para hacer todo más fácil de ver: Totalmente seleccionar la ruta de acceso mostrará unas líneas que nos muestre el arco; el círculo rojo nos muestra dónde está el punto a través. La raíz termina con un círculo para mostrar el bulbo de la flor y nos dan un lugar para colocar todas las semillas. Los círculos son mucho más fáciles de Paper.js que en directo canvas . Una línea de código dibuja nuestro círculo, uno más hace que sea verde, y ahora estamos listos para agregar nuestras semillas.

Una vez extraídas las semillas

Cada semilla tiene un bulbo, un tallo pequeño y una parte tenue en la parte superior. (Imagen: Hmbascom ) Nuestra semilla comienza con un pequeño óvalo de la bombilla y un arco para el vástago. El óvalo es un rectángulo con esquinas redondeadas: El tallo de la semilla es otro arco, pero éste es mucho más delgado que el tallo de la flor: Los mechones son más arcos con un círculo al final de cada línea. Cada semilla tiene un número aleatorio de mechones que comienzan en la parte superior del arco del vástago y la curva hacia fuera en direcciones diferentes. La aleatoriedad hace que se vean un poco desordenado y por lo tanto más natural. Cada semilla tiene un número aleatorio de jirones, entre 4 y 10. Ahora que hemos llegado a la semilla, tenemos que gestionar, y más tarde, vamos a querer mover y rotar la misma. La semilla se compone de un montón de partes, y no quiero tener que gestionar cada uno por separado. Paper.js tiene un buen grupo de objetos. Grupos de asociar un conjunto de objetos juntos para que podamos manipular a la vez. El último paso es empaquetar nuestra semilla en un objeto reutilizable llamada Seed . Añadimos todo el código que hemos estado escribiendo una nueva función con el nombre de Seed y agregar una función para crear las variables iniciales. En este ejemplo se llama a esa función create , pero puede que sea lo que quieras. El create función dibuja la semilla a la hora especificada punto , y el shortStem booleano nos dice si se trata de un tallo corto. Pronto nos ocuparemos de tallo corto semillas un poco más tarde. Este tipo de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript. Nuestras semillas se verá así cuando los dibuja: La Seed objeto atrae nuestras semillas de diente de león al azar. Ahora podemos añadir a nuestra flor.

Añadir un poco de caos

Las semillas se verá mejor cuando el espacio fuera de todo el círculo de nuestra bombilla de diente de león para sentirse como un halo de semillas. El bulbo es un círculo, y el círculo es un camino, por lo que puede obtener cada punto de la ruta. Esto hará que un círculo de semillas alrededor de la bombilla, pero dejan un espacio en el centro. Vamos a añadir unas cuantas semillas más para llenar en el centro. Estamos dando a los centros de semillas de corto surge de modo que muestren el blanco de los mechones más que el beige de los tallos. Las semillas en el centro será montón al azar, y haremos el diente de león mira muy bien desordenado. Ahora podemos hacer que vuele.

La animación de The Seeds

Viento empuja las semillas en patrones complejos, y dos semillas nunca soplar la misma manera. Queremos que se vean reales, por lo que vamos a necesitar un poco más de aleatoriedad. La reproducción de viento real es demasiado complicado, así que vamos a hacer que las semillas flotando en un patrón aleatorio de aspecto. Cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como un destino final: El rotateMove función de cada semilla lleva hacia su punto de destino y lo hace girar. Podemos trabajar con nuestro objeto de semillas como un grupo para rotar y mover con una sola función. Esta función se moverá la semilla hasta que es fuera de la pantalla. Llamar rotateMove para cada fotograma de la animación hará que el flotador de semillas a través de la pantalla. Paper.js nos da una manera fácil de hacer animaciones con la onFrame la función, cuando ponemos en práctica onFrame , Paper.js lo llamará para cada fotograma de la animación. Con cada marco, repetir cada semilla y se mueven por la pantalla. Las semillas se deslizan y giran un poco más cerca al punto de destino con cada fotograma de la animación. A partir de todas las semillas en el mismo punto y final a la medida, aparte hace muy bien el espacio a medida que se mueven. No queremos que todas las semillas que caen a la vez, así que vamos a utilizar un temporizador para que se alejen. El temporizador de espera durante un segundo antes de liberar la semilla que viene, dando una sensación de diente de león nuestra flotante agradable. Un poco de hierba verde y cielo azul como imagen de fondo para nuestra canvas lo pone todo en su contexto. Ahora tenemos un diente de león con las semillas que flotan en la brisa. Ver el diente de león corriendo de aquí . Usted puede editar y ejecutar el código fuente como parte de la animación o descargarlo de la página de GitHub de diente de león .

Paper.js en el mundo real

Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero usted debe saber algunas trampas antes de usarlo en su sitio web.

No funciona en navegadores antiguos

Todos los dibujos Paper.js utilizar el canvas la etiqueta y requieren HTML5. Esto significa que se requiere Internet Explorer 9 +, Firefox 4 +, Safari o Chrome 5 +. Si su sitio web debe ser compatible con los navegadores más antiguos, entonces usted no será capaz de utilizar canvas . No hay manera de evitar este requisito, si usted necesita los navegadores más antiguos, que está fuera de suerte. A medida que el sitio web de Paper.js dice: " Vamos a seguir adelante! ".

El rendimiento puede ser lento

Paper.js puede hacer que un navegador detendría incluso si el navegador soporta HTML5. Pixar vuelve a Buzz y Woody en enormes granjas de servidores - lo único que consigue es MacBook barata del usuario. No sólo son las computadoras portátiles más lentos que los clústeres de servidores, pero los navegadores empeorar las cosas que hacen que el canvas la etiqueta con la CPU en lugar de la GPU . Juegos como Halo y Rage aprovechar el procesador gráfico en su tarjeta de vídeo para hacer lanzadores de cohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que el mismo equipo que se encarga de complejos juegos de video sin problemas puede hacer que las semillas de diente de león flotante mira lenta y desigual. Asegúrese de probar todas sus animaciones con hardware más lento, y ver el uso de la CPU. Utilice los grupos para reducir al mínimo los cálculos, y tener mucho cuidado con lo que haces en cada invocación de la onFrame función.

Los dispositivos móviles son más lentas

El rendimiento móvil es aún peor. La mayoría de dispositivos móviles admiten canvas , pero la mayoría son demasiado lentos para hacer que canvas y animaciones. Dispositivos aún más poderosos, como el iPad 2, no puede manejar las semillas de diente de león sin problemas.

No es compatible con eventos de nivel de objeto

Otras bibliotecas de dibujo, como SVG (ver más abajo), el apoyo a nivel de objeto eventos de ratón y teclado. Estos acontecimientos hacen que sea fácil de responder cuando una ruta o un polígono se hace clic, se cernía sobre o tocado. El canvas la etiqueta no es compatible a nivel de objeto eventos. Paper.js tiene algunas funciones básicas para la prueba de posicionamiento , pero es de muy bajo nivel. Usted puede escuchar el ratón y el teclado de eventos en todo el lienzo, pero usted necesita para manejar la cartografía aquellos eventos a los controles individuales.

¿Qué pasa con SVG?

El SVG (Scalable Vector Graphics) especificación fue definida hace 10 años, pero llegó a la vanguardia con las bibliotecas de apoyo tales como Raphaël.js , que hacen que sea fácil de generar imágenes SVG con JavaScript. SVG es potente, funciona bien para imágenes más pequeñas, y es compatible con todo el camino de regreso a Internet Explorer 7 con la conversión a VML (Vector Markup Language). SVG es la mejor opción si lo que necesita para soportar los navegadores más antiguos. Los verdaderos problemas son el soporte SVG con la velocidad, el futuro y los dispositivos móviles. Cada fabricante del navegador está trabajando activamente en la fabricación de canvas más rápido. Safari 5 ya ofrece aceleración de hardware con la GPU para la canvas , y el resto están trabajando en ello. SVG también es compatible en los dispositivos Android. Hay una creciente comunidad en torno canvas , la nueva tecnología que los fabricantes se están centrando en. Ellos están añadiendo nuevas características, corrección de bugs y lo que es mejor cada día.

Otras Bibliotecas lienzo de dibujo

Paper.js no es la única opción para canvas . Processing.js , desde el creador de jQuery , los puertos del procesamiento de lenguaje de programación JavaScript. Es compatible con animaciones y tiene muchos ejemplos . El three.js motor es compatible con canvas y el WebGL biblioteca, y se centra más en 3-D los dibujos. Google Dart también apoyará canvas con una función de representar a los objetos. Paper.js es una biblioteca madura, con una comunidad muy positiva en el Grupo Paper.js Google y muchos ejemplos más impresionantes y bien documentado. Echa un vistazo a algunas de las cosas maravillosas que la gente está haciendo con él.

Más ejemplos Paper.js

El diente de león es sólo el comienzo. A continuación se presentan algunas otras animaciones impresionantes escritos en Paper.js.

• Ejemplos , Paper.js cuenta con una página llena de ejemplos increíbles. Voronoi es uno de los mejores. Asegúrese de presionar la barra espaciadora para ver los caminos. Más ejemplos se encuentran en la carpeta de GitHub .
• Nardove , medusas, Ricardo Sánchez se escriben con Paper.js y un estanque koi escrito con Processing.js. Espera un minuto, las medusas son tímidos.
• " Jardín de nodo en Paper.js ", dijo Andrew Berg
• " El programa de reciclaje de HBO "Una infografía que he creado con Paper.js para mostrar con qué frecuencia distinta serie de HBO utilizar los mismos actores.
• " 20 gestos Multi-Touch que usted debe aprender hoy ", creado Zack Grossbart el tutorial interactivo con la ayuda de Paper.js.

¿Dónde está tu amazingness Paper.js? (AL)

• Por Zack Grossbart
• Our Bestseller: Printed Smashing Book 2

  
• 21 de noviembre 2011
• HTML , HTML5 , JavaScript
• 53 Comentarios

La Web se está empezando a utilizar la animación también. Durante años, los archivos GIF animados y Flash gobernados. Texto movido y brilló, pero nunca fue perfecta. Animaciones había cajas a su alrededor como los vídeos de YouTube. HTML5 canvas todo cambia sobre la animación web. El canvas elemento hace posible la integración de los dibujos y animaciones con el resto de la página. Lo puedes combinar con el texto y hacer animaciones interactivas. Este mecanismo de dibujo es de gran alcance, pero muy bajo nivel. Animaciones obtener más poder y necesita menos código, cuando se combina el canvas la etiqueta con el más alto nivel, tales como bibliotecas Paper.js . Este artículo introduce HTML5 animación y le guía a través de la creación de una animación de las semillas de diente de león en el viento.

Neat es fácil, pero desordenado es difícil

Computadoras encanta limpio. Ellos hacen las hojas de cálculo y hacer las estadísticas y las curvas de la trama multivariados, siempre dentro de las líneas de color. En el mundo real, las cosas más simples son sucios. Las hojas que caen de los árboles, las salpicaduras de agua - todas las interacciones que nos rodean se sienten poco simple debido a que estamos acostumbrados a ellos, pero pequeñas ráfagas de viento son en realidad desordenada e impredecible. Para este artículo, vamos a animar a las semillas de diente de león que soplan en la brisa. Dientes de león son difíciles porque todos sabemos lo que parecen: les hemos sentido y tocado sus semillas fuera. Objetos comunes producir un reconocimiento instantáneo y los sentimientos. No tengo que decirte lo que son los dientes de león - que acaba de saber. Dientes de león son un caos de semillas apilados uno encima del otro. (Imagen: Arnoldius ) Nuestra animación de diente de león nunca reproducir la complejidad de lo real, y funcionará mejor si no lo intentamos: que sea demasiado cerca de la real y que se siente raro. En su lugar, vamos a crear un diente de león estilizada que hace que la impresión correcta, sin todos los detalles.

Paper.js

Dibujo de formas simples con el canvas la etiqueta, sin ningún tipo de bibliotecas especiales de giro, es fácil. Crear un canvas : A continuación, agregue un poco de JavaScript. Hojas de trucos para el lienzo que muestran los aspectos básicos, pero cuando te metes en más de dibujo serio, usted querrá una biblioteca de más alto nivel, como Paper.js . Paper.js es una biblioteca JavaScript de dibujos y animaciones. Se basa en gran medida de Scriptographer , un lenguaje de scripting de Adobe Illustrator . Puede escribir código JavaScript con Paper.js , pero la mayoría de las veces usted estará trabajando con una variante de JavaScript llamada PaperScript. Paper.js se llama " La navaja suiza de los gráficos vectoriales de secuencias de comandos , "y el" vector "de todo es importante. Hay dos tipos básicos de gráficos, vectorizados y trama . Los gráficos de trama son como las fotografías tomadas con su cámara: rectángulos grandes con mapas que indican el color de cada píxel. Ampliar ellos y obtendrás puntos borrosos. Los gráficos vectoriales son como se conectan los puntos de las fotos: son conjuntos de líneas y formas que dan instrucciones sobre la forma de dibujar la imagen en cualquier tamaño. Uso de gráficos de vectores, se puede hacer una imagen de la letra Z muy grande y todavía se ven más nítidos. Si usted se convirtió en una trama gráfica de tomar una foto de ella y luego sopla para arriba, la carta tendría todo borroso. Librerías gráficas vectoriales son perfectas para la animación ya que hacen el cambio de tamaño, rotar y mover objetos fácil. También son mucho más rápido, porque el programa tiene instrucciones para dibujar cada objeto en lugar de tener que averiguarlo. La página de Paper.js ejemplos muestran algunas de las cosas asombrosas que usted puede hacer con gráficos vectorizados. El diente de león es un ejemplo de funcionamiento completo, y usted puede ver todas las que se ejecuta en la página de ejemplo . También puede cambiar el código haciendo clic en el botón "Editar", ver los cambios vivir, y copie y pegue el código en su propio sitio web. A lo largo del artículo, vamos a explicar cada parte del código a su vez, pero ten en cuenta que para ejecutar el código de usted mismo, usted tendrá que dirigirse a la página de ejemplo y copiar y pegarlo en su propio entorno .

Nuestro dibujo de diente de león

El primer paso consiste en importar nuestro código JavaScript y archivos PaperScript. El código PaperScript para el funcionamiento de la animación se declara como text/paperscript . Ahora estamos listos para empezar a dibujar. La primera parte de nuestra diente de león es el tallo. El tallo es el arco verde, con un círculo en la parte superior de la bombilla. Vamos a hacer las dos formas con un camino , una lista de formas, puntos y líneas que el navegador se encargó de mostrar. Las rutas son los elementos básicos de la animación. Hacen líneas, curvas y polígonos. También se pueden rellenar para hacer formas complejas. Nuestro camino es el siguiente: Nuestro camino es un arco, así que necesita tres puntos: el inicio, el final y un punto medio a través del arco. Tres puntos son suficientes para definir cualquier arco que necesitamos. El arcTo función dibuja la línea entre ellos. El elemento de ruta también es compatible con información de estilo, como el color del trazo y el grosor del trazo; #567e37 y 5 hará que nuestra línea de arco verde y frondosa. Paper.js compatible con las definiciones del mismo color como CSS. Podemos añadir algunos elementos más para hacer todo más fácil de ver: Totalmente seleccionar la ruta de acceso mostrará unas líneas que nos muestre el arco; el círculo rojo nos muestra dónde está el punto a través. La raíz termina con un círculo para mostrar el bulbo de la flor y nos dan un lugar para colocar todas las semillas. Los círculos son mucho más fáciles de Paper.js que en directo canvas . Una línea de código dibuja nuestro círculo, uno más hace que sea verde, y ahora estamos listos para agregar nuestras semillas.

Una vez extraídas las semillas

Cada semilla tiene un bulbo, un tallo pequeño y una parte tenue en la parte superior. (Imagen: Hmbascom ) Nuestra semilla comienza con un pequeño óvalo de la bombilla y un arco para el vástago. El óvalo es un rectángulo con esquinas redondeadas: El tallo de la semilla es otro arco, pero éste es mucho más delgado que el tallo de la flor: Los mechones son más arcos con un círculo al final de cada línea. Cada semilla tiene un número aleatorio de mechones que comienzan en la parte superior del arco del vástago y la curva hacia fuera en direcciones diferentes. La aleatoriedad hace que se vean un poco desordenado y por lo tanto más natural. Cada semilla tiene un número aleatorio de jirones, entre 4 y 10. Ahora que hemos llegado a la semilla, tenemos que gestionar, y más tarde, vamos a querer mover y rotar la misma. La semilla se compone de un montón de partes, y no quiero tener que gestionar cada uno por separado. Paper.js tiene un buen grupo de objetos. Grupos de asociar un conjunto de objetos juntos para que podamos manipular a la vez. El último paso es empaquetar nuestra semilla en un objeto reutilizable llamada Seed . Añadimos todo el código que hemos estado escribiendo una nueva función con el nombre de Seed y agregar una función para crear las variables iniciales. En este ejemplo se llama a esa función create , pero puede que sea lo que quieras. El create función dibuja la semilla a la hora especificada punto , y el shortStem booleano nos dice si se trata de un tallo corto. Pronto nos ocuparemos de tallo corto semillas un poco más tarde. Este tipo de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript. Nuestras semillas se verá así cuando los dibuja: La Seed objeto atrae nuestras semillas de diente de león al azar. Ahora podemos añadir a nuestra flor.

Añadir un poco de caos

Las semillas se verá mejor cuando el espacio fuera de todo el círculo de nuestra bombilla de diente de león para sentirse como un halo de semillas. El bulbo es un círculo, y el círculo es un camino, por lo que puede obtener cada punto de la ruta. Esto hará que un círculo de semillas alrededor de la bombilla, pero dejan un espacio en el centro. Vamos a añadir unas cuantas semillas más para llenar en el centro. Estamos dando a los centros de semillas de corto surge de modo que muestren el blanco de los mechones más que el beige de los tallos. Las semillas en el centro será montón al azar, y haremos el diente de león mira muy bien desordenado. Ahora podemos hacer que vuele.

La animación de The Seeds

Viento empuja las semillas en patrones complejos, y dos semillas nunca soplar la misma manera. Queremos que se vean reales, por lo que vamos a necesitar un poco más de aleatoriedad. La reproducción de viento real es demasiado complicado, así que vamos a hacer que las semillas flotando en un patrón aleatorio de aspecto. Cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como un destino final: El rotateMove función de cada semilla lleva hacia su punto de destino y lo hace girar. Podemos trabajar con nuestro objeto de semillas como un grupo para rotar y mover con una sola función. Esta función se moverá la semilla hasta que es fuera de la pantalla. Llamar rotateMove para cada fotograma de la animación hará que el flotador de semillas a través de la pantalla. Paper.js nos da una manera fácil de hacer animaciones con la onFrame la función, cuando ponemos en práctica onFrame , Paper.js lo llamará para cada fotograma de la animación. Con cada marco, repetir cada semilla y se mueven por la pantalla. Las semillas se deslizan y giran un poco más cerca al punto de destino con cada fotograma de la animación. A partir de todas las semillas en el mismo punto y final a la medida, aparte hace muy bien el espacio a medida que se mueven. No queremos que todas las semillas que caen a la vez, así que vamos a utilizar un temporizador para que se alejen. El temporizador de espera durante un segundo antes de liberar la semilla que viene, dando una sensación de diente de león nuestra flotante agradable. Un poco de hierba verde y cielo azul como imagen de fondo para nuestra canvas lo pone todo en su contexto. Ahora tenemos un diente de león con las semillas que flotan en la brisa. Ver el diente de león corriendo de aquí . Usted puede editar y ejecutar el código fuente como parte de la animación o descargarlo de la página de GitHub de diente de león .

Paper.js en el mundo real

Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero usted debe saber algunas trampas antes de usarlo en su sitio web.

No funciona en navegadores antiguos

Todos los dibujos Paper.js utilizar el canvas la etiqueta y requieren HTML5. Esto significa que se requiere Internet Explorer 9 +, Firefox 4 +, Safari o Chrome 5 +. Si su sitio web debe ser compatible con los navegadores más antiguos, entonces usted no será capaz de utilizar canvas . No hay manera de evitar este requisito, si usted necesita los navegadores más antiguos, que está fuera de suerte. A medida que el sitio web de Paper.js dice: " Vamos a seguir adelante! ".

El rendimiento puede ser lento

Paper.js puede hacer que un navegador detendría incluso si el navegador soporta HTML5. Pixar vuelve a Buzz y Woody en enormes granjas de servidores - lo único que consigue es MacBook barata del usuario. No sólo son las computadoras portátiles más lentos que los clústeres de servidores, pero los navegadores empeorar las cosas que hacen que el canvas la etiqueta con la CPU en lugar de la GPU . Juegos como Halo y Rage aprovechar el procesador gráfico en su tarjeta de vídeo para hacer lanzadores de cohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que el mismo equipo que se encarga de complejos juegos de video sin problemas puede hacer que las semillas de diente de león flotante mira lenta y desigual. Asegúrese de probar todas sus animaciones con hardware más lento, y ver el uso de la CPU. Utilice los grupos para reducir al mínimo los cálculos, y tener mucho cuidado con lo que haces en cada invocación de la onFrame función.

Los dispositivos móviles son más lentas

El rendimiento móvil es aún peor. La mayoría de dispositivos móviles admiten canvas , pero la mayoría son demasiado lentos para hacer que canvas y animaciones. Dispositivos aún más poderosos, como el iPad 2, no puede manejar las semillas de diente de león sin problemas.

No es compatible con eventos de nivel de objeto

Otras bibliotecas de dibujo, como SVG (ver más abajo), el apoyo a nivel de objeto eventos de ratón y teclado. Estos acontecimientos hacen que sea fácil de responder cuando una ruta o un polígono se hace clic, se cernía sobre o tocado. El canvas la etiqueta no es compatible a nivel de objeto eventos. Paper.js tiene algunas funciones básicas para la prueba de posicionamiento , pero es de muy bajo nivel. Usted puede escuchar el ratón y el teclado de eventos en todo el lienzo, pero usted necesita para manejar la cartografía aquellos eventos a los controles individuales.

¿Qué pasa con SVG?

El SVG (Scalable Vector Graphics) especificación fue definida hace 10 años, pero llegó a la vanguardia con las bibliotecas de apoyo tales como Raphaël.js , que hacen que sea fácil de generar imágenes SVG con JavaScript. SVG es potente, funciona bien para imágenes más pequeñas, y es compatible con todo el camino de regreso a Internet Explorer 7 con la conversión a VML (Vector Markup Language). SVG es la mejor opción si lo que necesita para soportar los navegadores más antiguos. Los verdaderos problemas son el soporte SVG con la velocidad, el futuro y los dispositivos móviles. Cada fabricante del navegador está trabajando activamente en la fabricación de canvas más rápido. Safari 5 ya ofrece aceleración de hardware con la GPU para la canvas , y el resto están trabajando en ello. SVG también es compatible en los dispositivos Android. Hay una creciente comunidad en torno canvas , la nueva tecnología que los fabricantes se están centrando en. Ellos están añadiendo nuevas características, corrección de bugs y lo que es mejor cada día.

Otras Bibliotecas lienzo de dibujo

Paper.js no es la única opción para canvas . Processing.js , desde el creador de jQuery , los puertos del procesamiento de lenguaje de programación JavaScript. Es compatible con animaciones y tiene muchos ejemplos . El three.js motor es compatible con canvas y el WebGL biblioteca, y se centra más en 3-D los dibujos. Google Dart también apoyará canvas con una función de representar a los objetos. Paper.js es una biblioteca madura, con una comunidad muy positiva en el Grupo Paper.js Google y muchos ejemplos más impresionantes y bien documentado. Echa un vistazo a algunas de las cosas maravillosas que la gente está haciendo con él.

Más ejemplos Paper.js

El diente de león es sólo el comienzo. A continuación se presentan algunas otras animaciones impresionantes escritos en Paper.js.

• Ejemplos , Paper.js cuenta con una página llena de ejemplos increíbles. Voronoi es uno de los mejores. Asegúrese de presionar la barra espaciadora para ver los caminos. Más ejemplos se encuentran en la carpeta de GitHub .
• Nardove , medusas, Ricardo Sánchez se escriben con Paper.js y un estanque koi escrito con Processing.js. Espera un minuto, las medusas son tímidos.
• " Jardín de nodo en Paper.js ", dijo Andrew Berg
• " El programa de reciclaje de HBO "Una infografía que he creado con Paper.js para mostrar con qué frecuencia distinta serie de HBO utilizar los mismos actores.
• " 20 gestos Multi-Touch que usted debe aprender hoy ", creado Zack Grossbart el tutorial interactivo con la ayuda de Paper.js.

¿Dónde está tu amazingness Paper.js?