Cómo crear animaciones web con Paper.js

 

 

 

  • Patrones de diseño para interfaces de IA, con Vitaly Friedman
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
    2. Ordenar es fácil, pero desordenar es difícil
    3. papel.js
    4. Dibujando nuestro diente de león
    5. Dibujando las semillas
    6. Agregando un poco de caos
    7. Animando las semillas
    8. Paper.js en el mundo real
      1. No funciona en navegadores antiguos
      2. El rendimiento puede ser lento
      3. Los dispositivos móviles son más lentos
      4. No admite eventos a nivel de objeto
    9. Agregando un poco de caos
    10. Animando las semillas
    11. Paper.js en el mundo real
      1. No funciona en navegadores antiguos
      2. El rendimiento puede ser lento
      3. Los dispositivos móviles son más lentos
      4. No admite eventos a nivel de objeto
    12. ¿Qué pasa con SVG?
    13. Otras bibliotecas de dibujo de lienzos
    14. Más ejemplos de Paper.js

    La Web apenas está empezando a utilizar bien la animación. Durante años, los GIF animados y Flash dominaron. El texto se movía y parpadeaba, pero nunca era fluido. Las animaciones tenían cuadros alrededor como videos de YouTube. El lienzo HTML5 cambia todo lo relacionado con la animación web.

     

    La Web apenas está empezando a utilizar bien la animación. Durante años, los GIF animados y Flash dominaron. El texto se movía y parpadeaba, pero nunca era fluido. Las animaciones tenían cuadros alrededor como videos de YouTube. HTML5 canvascambia todo acerca de la animación web.

    El canvaselemento permite integrar dibujos y animaciones con el resto de su página. Puedes combinarlos con texto y hacer animaciones interactivas. Este mecanismo de dibujo es poderoso, pero de muy bajo nivel.

    Lecturas adicionales sobre SmashingMag:

    • El estado de la animación 2014
    • ¡Necesitaremos una API más grande!
    • Pautas y ejemplos de animación de la interfaz de usuario
    • Diseñar animaciones en Photoshop

    Las animaciones obtienen más potencia y necesitan menos codificación cuando combinas la canvasetiqueta con bibliotecas de nivel superior como Paper.js . Este artículo presenta la animación HTML5 y lo guía en la creación de una animación de semillas de diente de león ondeando al viento.

    Ordenar es fácil, pero desordenar es difícil

    A las computadoras les encanta la limpieza. Hacen hojas de cálculo, hacen estadísticas y trazan curvas multivariadas; Siempre colorean dentro de las líneas.

    En el mundo real, incluso las cosas simples son confusas. Hojas que caen de los árboles, salpicaduras de agua: todas las pequeñas interacciones que nos rodean parecen simples porque estamos acostumbrados a ellas; pero las pequeñas ráfagas de viento son en realidad confusas e impredecibles.

    Para este artículo, animaremos semillas de diente de león ondeando con la brisa.

    Los dientes de león son complicados porque todos sabemos cómo son: los hemos tocado y les hemos quitado las semillas. Los objetos comunes producen reconocimiento y sentimientos instantáneos. No hace falta que te diga qué son los dientes de león, simplemente lo sabes. Los dientes de león son un caos de semillas apiladas unas sobre otras.

    (Imagen: Arnoldio )

    Nuestra animación de diente de león nunca reproducirá la complejidad de la realidad y funcionará mejor si no lo intentamos: si la acercamos demasiado a lo real, se sentirá divertida. En su lugar, crearemos un diente de león estilizado que dé la impresión correcta sin todos los detalles.

     

    papel.js

    Dibujar formas simples con la canvasetiqueta, sin bibliotecas de dibujo especiales, es fácil. Crea tu canvas:

    canvas/canvas

    Luego agregue un poco de JavaScript.

    // Get our canvasvar canvas = $('#canvas')[0].getContext("2d");// Draw a circlecanvas.beginPath();canvas.arc(100, 100, 15, 0, Math.PI*2, true);// Close the pathcanvas.closePath();// Fill it incanvas.fill();

    Las hojas de trucos para lienzo te muestran los conceptos básicos, pero cuando te adentres en el dibujo más serio, querrás una biblioteca de nivel superior, como Paper.js .

    Paper.js es una biblioteca de JavaScript para dibujos y animaciones. Se basa en gran medida en Scriptographer , un lenguaje de programación para Adobe Illustrator . Puedes escribir JavaScript con Paper.js , pero la mayor parte del tiempo trabajarás con una variante de JavaScript llamada PaperScript.

    Paper.js se autodenomina " La navaja suiza del scripting de gráficos vectoriales " y la parte " vectorial " es importante.

    Hay dos tipos básicos de gráficos, vectorizados y rasterizados . Los gráficos rasterizados son como las fotografías que tomas con tu cámara: grandes rectángulos con mapas que indican el color de cada píxel. Amplíelos y obtendrá puntos borrosos.

    Los gráficos vectoriales son como imágenes de conectar puntos: son conjuntos de líneas y formas que dan instrucciones sobre cómo dibujar la imagen en cualquier tamaño. Usando gráficos vectoriales, puedes hacer una imagen de la letra Z realmente grande y aún así se verá nítida. Si lo convirtieras en un gráfico rasterizado tomándole una fotografía y luego ampliándola, la letra se volvería borrosa.

    Las bibliotecas de gráficos vectoriales son perfectas para la animación porque facilitan el cambio de tamaño, la rotación y el movimiento de objetos. También son mucho más rápidos, porque el programa tiene instrucciones para dibujar cada objeto en lugar de tener que resolverlo.

    La página de ejemplos de Paper.js muestra algunas de las cosas increíbles que puedes hacer con gráficos vectorizados.

    El diente de león es un ejemplo de funcionamiento completo y puede verlo todo ejecutándose en la página de ejemplo . También puede cambiar el código haciendo clic en el botón "Editar", ver los cambios en vivo y copiar y pegar el código en su propio sitio web. A lo largo del artículo, explicaremos cada parte del código por separado, pero tenga en cuenta que para ejecutar el código usted mismo, deberá dirigirse a la página de ejemplo y copiarlo y pegarlo en su propio entorno. .

    Dibujando nuestro diente de león

    El primer paso es importar nuestros archivos JavaScript y PaperScript.

    script src="paper.js" type="text/javascript" charset="utf-8"/scriptscript type="text/paperscript" canvas="canvas" src="dandelion.pjs"/script

    El código PaperScript para ejecutar la animación se declara como text/paperscript. Ahora estamos listos para empezar a dibujar.

    La primera parte de nuestro diente de león es el tallo. El tallo es el arco verde, con un círculo en la parte superior para el bulbo. Crearemos ambas formas con una ruta , una lista de formas, puntos y líneas que el navegador debe mostrar.

     

    Los caminos son los componentes básicos de la animación. Representan líneas, curvas y polígonos. También puedes rellenarlos para crear formas complejas. Nuestro camino se ve así:

    var path = new Path();path.strokeColor = '#567e37';path.strokeWidth = 5;var firstPoint = new Point(0, 550);path.add(firstPoint);var throughPoint = new Point(75, 400);var toPoint = new Point(100, 250);path.arcTo(throughPoint, toPoint);

    Nuestro camino es un arco, por lo que necesita tres puntos: el inicio, el final y un punto medio para atravesarlo. Tres puntos son suficientes para definir cualquier arco que necesitemos. La arcTofunción traza la línea entre ellos. El elemento de ruta también admite información de estilo, como el color y el ancho del trazo; #567e37y 5hará que nuestra línea de arco sea verde y gruesa. Paper.js admite las mismas definiciones de color que CSS.

    Podemos agregar algunos elementos más para que todo sea más fácil de ver:

    path.fullySelected = true;var circle = new Path.Circle(throughPoint, 5);circle.fillColor = '#CC0000';

    Al seleccionar completamente el camino se mostrarán algunas líneas para mostrarnos el arco; el círculo rojo nos muestra dónde está el punto de paso.

    El tallo termina con un círculo para mostrar el bulbo de la flor y darnos un lugar donde colocar todas las semillas. Los círculos son mucho más fáciles en Paper.js que en direct canvas.

    var bulb = new Path.Circle(toPoint, 10);bulb.fillColor = '#567e37';

    Una línea de código dibuja nuestro círculo, otra lo vuelve verde y ahora estamos listos para agregar nuestras semillas.

    Dibujando las semillas

    Cada semilla tiene un bulbo, un pequeño tallo y una parte tenue en la parte superior.

    (Imagen: Hmbascom )

    Nuestra semilla comienza con un pequeño óvalo para el bulbo y un arco para el tallo. El óvalo es un rectángulo con esquinas redondeadas:

    var size = new Size(4, 10);var rectangle = new Rectangle(p, size);var bottom = new Path.Oval(rectangle);bottom.fillColor = '#d0aa7b';

    El tallo de la semilla es otro arco, pero éste es mucho más delgado que el tallo de la flor:

    var stem = new Path();stem.strokeColor = '#567e37';stem.strokeWidth = 1;stem.add(new Point(p.x + 2, p.y));var throughPoint = new Point(p.x + 4, p.y - height / 2);var toPoint = new Point(p.x + 3, p.y - height);stem.arcTo(throughPoint, toPoint);

    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 tallo y se curvan en diferentes direcciones. La aleatoriedad los hace parecer un poco desordenados y, por lo tanto, más naturales. Cada semilla recibe un número aleatorio de mechones, entre 4 y 10.

    for (var i = 0; i random(4, 10); i++) { path = new Path(); path.strokeColor = '#fff3c9'; path.strokeWidth = 1; var p1 = new Point(p.x, p.y); path.add(new Point(p1.x + 2, p1.y + 2)); // Each flutter extends a random amount up in the air var y = random(1, 5); // We draw every other stem on the right or the left so they're // spaced out in the seed. if (i % 2 == 0) { throughPoint = new Point(p1.x + random(1, 3), p1.y - y); toPoint = new Point(p1.x + random(5, 35), p1.y - 20 - y); } else { throughPoint = new Point(p1.x - random(1, 3), p1.y - y); toPoint = new Point(p1.x - random(5, 35), p1.y - 20 - y); } path.arcTo(throughPoint, toPoint); // Now we put the circle at the tip of the flutter. circle = new Path.Circle(toPoint, 2); circle.fillColor = '#fff3c9';}

    Ahora que hemos extraído la semilla, debemos gestionarla; Más tarde, querremos moverlo y rotarlo. La semilla se compone de muchas partes y no queremos tener que gestionar cada una por separado. Paper.js tiene un bonito objeto de grupo . Los grupos asocian un conjunto de objetos para que podamos manipularlos todos a la vez.

     

    var group = new Group();group.addChild(bottom);group.addChild(stem);this.group = group;

    El último paso es empaquetar nuestra semilla en un objeto reutilizable llamado Seed. Agregamos todo el código que hemos estado escribiendo a una nueva función con el nombre Seedy agregamos una función para crear las variables iniciales. Este ejemplo llama a esa función create, pero puedes nombrarla como quieras.

    function Seed() { this.create = function (/*Point*/ p, /*boolean*/ shortStem) { …

    La createfunción dibuja la semilla en el Point especificado y el shortStemvalor booleano nos dice si se trata de una raíz corta. Veremos las semillas de tallo corto un poco más adelante.

    Estos tipos de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript.

    var seed = new Seed()seed.create(new Point(100, 100), false);

    Nuestras semillas se verán así cuando las dibujemos:

    El Seedobjeto dibuja nuestras semillas de diente de león al azar. Ahora podemos agregarlos a nuestra flor.

    Agregando un poco de caos

    Las semillas lucirán mejor cuando las espaciemos alrededor del círculo de nuestro bulbo de diente de león para que parezcan un halo de semillas. La bombilla es un círculo y el círculo es un camino, por lo que podemos obtener cada punto del camino.

    var bulb = new Path.Circle(toPoint, 10); bulb.fillColor = '#567e37';var angle = 360 / bulb.length;var seeds = [];for (var i = 0; i bulb.length; i++) { var seed = new Seed() seed.create(bulb.getPointAt(i)); // Rotate each seed so that it points out from the bulb seed.rotate(i * angle); seeds.push(seed);}

    Esto formará un círculo de semillas alrededor del bulbo pero dejará un espacio en el medio. Agregaremos algunas semillas más para rellenar el centro. Le damos tallos cortos a las semillas del centro para que muestren más el blanco de los mechones que el beige de los tallos.

    for (var i = 0; i 18; i++) { var seed = new Seed() var point = new Point(toPoint.x + random(-3, 3), toPoint.y + random(-3, 3)); seed.create(new Point(toPoint), true); seed.rotate(random(0, 360)); seeds.push(seed);}

    Las semillas del medio se agruparán al azar y harán que nuestro diente de león luzca muy desordenado. Ahora podemos hacerlos volar.

    Animando las semillas

    El viento empuja las semillas siguiendo patrones complejos y dos semillas nunca volarán de la misma manera. Queremos que parezcan reales, por lo que necesitaremos un poco más de aleatoriedad.

     

    Reproducir viento real es demasiado complicado, así que haremos que las semillas floten en un patrón aleatorio. A cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como destino final: Scifi books reviews

    this.dest = new Point(1800, random(-300, 1100));

    La rotateMovefunción empuja cada semilla hacia su punto de destino y la gira. Podemos trabajar con nuestro objeto Semilla como un grupo para rotarlo y moverlo con una función.

    this.rotateMove = function(/*int*/ angle) { if (this.group.position.x 850 this.group.position.y 650) { var vector = this.dest - this.group.position; this.group.position += vector / 150; this.angle += angle; this.group.rotate(angle); } else { this.isOffScreen = true }}

    Esta función moverá la semilla hasta que salga de la pantalla. Llamar rotateMovea cada fotograma de nuestra animación hará que la semilla flote por la pantalla.

    Paper.js nos brinda una manera fácil de realizar animaciones con la onFramefunción; Cuando implementemos onFrame, Paper.js lo llamará para cada cuadro de nuestra animación. Con cada cuadro, iteramos sobre cada semilla y la movemos por la pantalla.

    function onFrame(event) { for (var i = 0; i seedCount; i++) { if (!seeds[i].isOffscreen()) { seeds[i].rotateMove(random(2, 4)); } }}

    Las semillas se deslizan y giran un poco más cerca del punto de destino con cada cuadro de la animación. Comenzar todas las semillas en el mismo punto y terminarlas muy separadas hace que se espacien bien a medida que se mueven.

    No queremos que todas las semillas se caigan a la vez, así que usaremos un cronómetro para que se alejen.

    function start() { var id = setInterval(function() { seedCount++; if (seedCount === seeds.length) { clearInterval(id); } }, 1000);}

    El cronómetro espera un segundo antes de soltar la siguiente semilla, lo que le da a nuestro diente de león una agradable sensación de flotación.

    Un poco de hierba verde y cielo azul como imagen de fondo para nuestro canvaspone todo en contexto. Ahora tenemos un diente de león con semillas flotando en la brisa.

    Vea el diente de león corriendo aquí . Puede editar y ejecutar el código fuente como parte de la animación o descargarlo desde la página de Dandelion en GitHub .

    Paper.js en el mundo real

    Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero debes conocer algunas trampas antes de usarlo en tu sitio web.

    No funciona en navegadores antiguos

    Todos los dibujos de Paper.js usan la canvasetiqueta y requieren HTML5. Esto significa que necesita Internet Explorer 9+, Firefox 4+, Safari 5+ o Chrome. Si su sitio web debe admitir navegadores más antiguos, no podrá utilizar canvas.

    No hay forma de evitar este requisito; Si necesita navegadores más antiguos, no tiene suerte. Como dice el sitio web Paper.js: “¡ Sigamos adelante! .”

    El rendimiento puede ser lento

    Paper.js puede hacer que un navegador se detenga incluso si el navegador es compatible con HTML5. Pixar renderiza a Buzz y Woody en granjas de servidores gigantes: todo lo que obtienes es la MacBook barata de tu usuario.

     

    Las computadoras portátiles no solo son más lentas que los clústeres de servidores, sino que los navegadores empeoran las cosas al representar la canvasetiqueta con la CPU en lugar de con la GPU . Juegos como Halo y Rage aprovechan el procesador gráfico de tu tarjeta de vídeo para renderizar lanzacohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que la misma computadora que maneja videojuegos complejos sin problemas puede hacer que las semillas de diente de león flotantes parezcan lentas y entrecortadas.

    Asegúrate de probar todas tus animaciones con hardware más lento y observa el uso de la CPU. Utiliza grupos para minimizar los cálculos y ten mucho cuidado con lo que haces en cada invocación de la onFramefunción.

    Los dispositivos móviles son más lentos

    El rendimiento móvil es aún peor. La mayoría de los dispositivos móviles son compatibles canvas, pero en su mayoría son demasiado lentos para representar canvasbien las animaciones. Incluso los dispositivos más potentes, como el iPad 2, no pueden manejar las semillas de diente de león sin problemas.

    No admite eventos a nivel de objeto

    var stem = new Path();stem.strokeColor = '#567e37';stem.strokeWidth = 1;stem.add(new Point(p.x + 2, p.y));var throughPoint = new Point(p.x + 4, p.y - height / 2);var toPoint = new Point(p.x + 3, p.y - height);stem.arcTo(throughPoint, toPoint);

    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 tallo y se curvan en diferentes direcciones. La aleatoriedad los hace parecer un poco desordenados y, por lo tanto, más naturales. Cada semilla recibe un número aleatorio de mechones, entre 4 y 10.

    for (var i = 0; i random(4, 10); i++) { path = new Path(); path.strokeColor = '#fff3c9'; path.strokeWidth = 1; var p1 = new Point(p.x, p.y); path.add(new Point(p1.x + 2, p1.y + 2)); // Each flutter extends a random amount up in the air var y = random(1, 5); // We draw every other stem on the right or the left so they're // spaced out in the seed. if (i % 2 == 0) { throughPoint = new Point(p1.x + random(1, 3), p1.y - y); toPoint = new Point(p1.x + random(5, 35), p1.y - 20 - y); } else { throughPoint = new Point(p1.x - random(1, 3), p1.y - y); toPoint = new Point(p1.x - random(5, 35), p1.y - 20 - y); } path.arcTo(throughPoint, toPoint); // Now we put the circle at the tip of the flutter. circle = new Path.Circle(toPoint, 2); circle.fillColor = '#fff3c9';}

    Ahora que hemos extraído la semilla, debemos gestionarla; Más tarde, querremos moverlo y rotarlo. La semilla se compone de muchas partes y no queremos tener que gestionar cada una por separado. Paper.js tiene un bonito objeto de grupo . Los grupos asocian un conjunto de objetos para que podamos manipularlos todos a la vez.

    var group = new Group();group.addChild(bottom);group.addChild(stem);this.group = group;

    El último paso es empaquetar nuestra semilla en un objeto reutilizable llamado Seed. Agregamos todo el código que hemos estado escribiendo a una nueva función con el nombre Seedy agregamos una función para crear las variables iniciales. Este ejemplo llama a esa función create, pero puedes nombrarla como quieras.

     

    function Seed() { this.create = function (/*Point*/ p, /*boolean*/ shortStem) { …

    La createfunción dibuja la semilla en el Point especificado y el shortStemvalor booleano nos dice si se trata de una raíz corta. Veremos las semillas de tallo corto un poco más adelante.

    Estos tipos de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript.

    var seed = new Seed()seed.create(new Point(100, 100), false);

    Nuestras semillas se verán así cuando las dibujemos:

    El Seedobjeto dibuja nuestras semillas de diente de león al azar. Ahora podemos agregarlos a nuestra flor.

    Agregando un poco de caos

    Las semillas lucirán mejor cuando las espaciemos alrededor del círculo de nuestro bulbo de diente de león para que parezcan un halo de semillas. La bombilla es un círculo y el círculo es un camino, por lo que podemos obtener cada punto del camino.

    var bulb = new Path.Circle(toPoint, 10); bulb.fillColor = '#567e37';var angle = 360 / bulb.length;var seeds = [];for (var i = 0; i bulb.length; i++) { var seed = new Seed() seed.create(bulb.getPointAt(i)); // Rotate each seed so that it points out from the bulb seed.rotate(i * angle); seeds.push(seed);}

    Esto formará un círculo de semillas alrededor del bulbo pero dejará un espacio en el medio. Agregaremos algunas semillas más para rellenar el centro. Le damos tallos cortos a las semillas del centro para que muestren más el blanco de los mechones que el beige de los tallos.

    for (var i = 0; i 18; i++) { var seed = new Seed() var point = new Point(toPoint.x + random(-3, 3), toPoint.y + random(-3, 3)); seed.create(new Point(toPoint), true); seed.rotate(random(0, 360)); seeds.push(seed);}

    Las semillas del medio se agruparán al azar y harán que nuestro diente de león luzca muy desordenado. Ahora podemos hacerlos volar.

    Animando las semillas

    El viento empuja las semillas siguiendo patrones complejos y dos semillas nunca volarán de la misma manera. Queremos que parezcan reales, por lo que necesitaremos un poco más de aleatoriedad.

    Reproducir viento real es demasiado complicado, así que haremos que las semillas floten en un patrón aleatorio. A cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como destino final:

    this.dest = new Point(1800, random(-300, 1100));

    La rotateMovefunción empuja cada semilla hacia su punto de destino y la gira. Podemos trabajar con nuestro objeto Semilla como un grupo para rotarlo y moverlo con una función.

    this.rotateMove = function(/*int*/ angle) { if (this.group.position.x 850 this.group.position.y 650) { var vector = this.dest - this.group.position; this.group.position += vector / 150; this.angle += angle; this.group.rotate(angle); } else { this.isOffScreen = true }}

    Esta función moverá la semilla hasta que salga de la pantalla. Llamar rotateMovea cada fotograma de nuestra animación hará que la semilla flote por la pantalla.

     

    Paper.js nos brinda una manera fácil de realizar animaciones con la onFramefunción; Cuando implementemos onFrame, Paper.js lo llamará para cada cuadro de nuestra animación. Con cada cuadro, iteramos sobre cada semilla y la movemos por la pantalla.

    function onFrame(event) { for (var i = 0; i seedCount; i++) { if (!seeds[i].isOffscreen()) { seeds[i].rotateMove(random(2, 4)); } }}

    Las semillas se deslizan y giran un poco más cerca del punto de destino con cada cuadro de la animación. Comenzar todas las semillas en el mismo punto y terminarlas muy separadas hace que se espacien bien a medida que se mueven.

    No queremos que todas las semillas se caigan a la vez, así que usaremos un cronómetro para que se alejen.

    function start() { var id = setInterval(function() { seedCount++; if (seedCount === seeds.length) { clearInterval(id); } }, 1000);}

    El cronómetro espera un segundo antes de soltar la siguiente semilla, lo que le da a nuestro diente de león una agradable sensación de flotación.

    Un poco de hierba verde y cielo azul como imagen de fondo para nuestro canvaspone todo en contexto. Ahora tenemos un diente de león con semillas flotando en la brisa.

    Vea el diente de león corriendo aquí . Puede editar y ejecutar el código fuente como parte de la animación o descargarlo desde la página de Dandelion en GitHub .

    Paper.js en el mundo real

    Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero debes conocer algunas trampas antes de usarlo en tu sitio web.

    No funciona en navegadores antiguos

    Todos los dibujos de Paper.js usan la canvasetiqueta y requieren HTML5. Esto significa que necesita Internet Explorer 9+, Firefox 4+, Safari 5+ o Chrome. Si su sitio web debe admitir navegadores más antiguos, no podrá utilizar canvas.

    No hay forma de evitar este requisito; Si necesita navegadores más antiguos, no tiene suerte. Como dice el sitio web Paper.js: “¡ Sigamos adelante! .”

    El rendimiento puede ser lento

    Paper.js puede hacer que un navegador se detenga incluso si el navegador es compatible con HTML5. Pixar renderiza a Buzz y Woody en granjas de servidores gigantes: todo lo que obtienes es la MacBook barata de tu usuario.

    Las computadoras portátiles no solo son más lentas que los clústeres de servidores, sino que los navegadores empeoran las cosas al representar la canvasetiqueta con la CPU en lugar de con la GPU . Juegos como Halo y Rage aprovechan el procesador gráfico de tu tarjeta de vídeo para renderizar lanzacohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que la misma computadora que maneja videojuegos complejos sin problemas puede hacer que las semillas de diente de león flotantes parezcan lentas y entrecortadas.

    Asegúrate de probar todas tus animaciones con hardware más lento y observa el uso de la CPU. Utiliza grupos para minimizar los cálculos y ten mucho cuidado con lo que haces en cada invocación de la onFramefunción.

     

    Los dispositivos móviles son más lentos

    El rendimiento móvil es aún peor. La mayoría de los dispositivos móviles son compatibles canvas, pero en su mayoría son demasiado lentos para representar canvasbien las animaciones. Incluso los dispositivos más potentes, como el iPad 2, no pueden manejar las semillas de diente de león sin problemas.

    No admite eventos a nivel de objeto

    Otras bibliotecas de dibujo, como SVG (ver más abajo), admiten eventos de teclado y mouse a nivel de objeto. Esos eventos facilitan la respuesta cuando se hace clic, se pasa el cursor sobre una ruta o un polígono o se toca.

    La canvasetiqueta no admite eventos a nivel de objeto. Paper.js tiene algunas funciones básicas para realizar pruebas de acierto , pero es de muy bajo nivel. Puede escuchar los eventos del mouse y del teclado en todo el lienzo, pero deberá encargarse de asignar esos eventos a controles individuales.

    ¿Qué pasa con SVG?

    La especificación SVG (Scalable Vector Graphics) se definió hace más de 10 años, pero pasó a primer plano con bibliotecas de soporte como Raphaël.js, que facilitan la generación de imágenes SVG con JavaScript. SVG es potente, funciona bien para imágenes más pequeñas y es compatible desde Internet Explorer 7 con conversión a VML (lenguaje de marcado vectorial). SVG es la mejor opción si necesita admitir navegadores más antiguos.

    Los verdaderos problemas con SVG son la velocidad, el soporte futuro y los dispositivos móviles. Todos los fabricantes de navegadores están trabajando activamente para hacerlo canvasmás rápido. Safari 5 ya ofrece aceleración de hardware con la GPU canvasy el resto está trabajando en ello. SVG tampoco es compatible con dispositivos Android.

    Hay una comunidad creciente en torno canvasa la nueva tecnología en la que se están centrando los proveedores. Están agregando nuevas funciones, corrigiendo errores y mejorando cada día.

    Otras bibliotecas de dibujo de lienzos

    Paper.js no es la única opción para canvas. Processing.js , del creador de jQuery , traslada el lenguaje de programación Processing a JavaScript. Admite animaciones y tiene muchos ejemplos .

    El motor three.jscanvas admite la biblioteca WebGL y se centra más en dibujos 3D. Google Dart también admitirá canvasobjetos de renderizado integrados.

    Paper.js es una biblioteca madura con una comunidad de gran apoyo en el Grupo de Google Paper.js y muchos ejemplos impresionantes y bien documentados. Vea algunas de las cosas increíbles que la gente está haciendo con él.

    Más ejemplos de Paper.js

    Nuestro diente de león es sólo el comienzo. A continuación se muestran algunas otras animaciones impresionantes escritas en Paper.js.

    Cómo crear animaciones web con Paper.js

    Cómo crear animaciones web con Paper.js

    Patrones de diseño para interfaces de IA, con Vitaly Friedman Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-crear-animaciones-web-con-paper-787-0.jpg

    2024-05-20

     

    Cómo crear animaciones web con Paper.js
    Cómo crear animaciones web con Paper.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20