---
title: Animaciones y bibliotecas complementarias
slug: develop/es/animaciones-y-bibliotecas-complementarias
docTags: 
createdAt: 2025-03-11T07:03:32.131Z
---

Esta página describe la compatibilidad con animaciones y bibliotecas complementarias para el motor Chromium en reproductores BrightSign.

:::hint{type="success"}
Limite la profundidad del directorio de archivos para evitar problemas causados por estructuras de carpetas excesivamente complejas.
:::

## Animaciones JavaScript

Las animaciones que utilizan temporizadores JavaScript, incluida la biblioteca jQuery® .animate(), no hacen un uso eficiente de los recursos de GPU y no son lo suficientemente precisas para lograr animaciones fluidas. Por esta razón, recomendamos utilizar animaciones CSS siempre que sea posible. La [biblioteca Transit](https://github.com/rstacruz/jquery.transit) de jQuery® utiliza animaciones CSS y proporciona una API similar a la biblioteca .animate().

:::hint{type="info"}
Para obtener los mejores resultados al animar imágenes, recomendamos utilizar imágenes en su tamaño original en lugar de escalarlas primero. Por ejemplo, un icono de 480x270 rotará de forma más fluida si utiliza una imagen que originalmente sea de 480x270, en lugar de reducir una imagen de 1280x720 y luego intentar rotarla.
:::

## WebGL

Los reproductores BrightSign son compatibles con la API OpenGL para JavaScript (es decir, WebGL). 

:::hint{type="info"}
A veces, las texturas no se cargan en WebGL porque exceden el [tamaño de imagen](docId\:gZcaQrOoR8-ZaRNrEPKN1) permitido en los reproductores BrightSign. En estos casos, puede utilizar el método BrightScript [roVideoMode.SetImageSizeThreshold()](docId\:f0DvNrbDpvGOzlRVB29gd) para aumentar el tamaño máximo de las texturas.
:::

## Animaciones vectoriales

El protocolo SVG debe utilizarse para especificar animaciones vectoriales.

## Animaciones Canvas

Las animaciones bitmap se muestran fluidamente cuando ocupan 1/3 o menos de un canvas HTML de 1080p. Establecer el tamaño del canvas en 720p permite que animaciones grandes de alta calidad ocupen la pantalla.

## Tecnología Push

La técnica de long polling ha sido probada y ha demostrado funcionar en reproductores BrightSign.

El protocolo Websocket es totalmente compatible mediante la implementación de [Node.js](docId\:NrV_T0oESrUQTX-BogKwp) en la instancia Chromium de BrightSign. En entornos de producción, recomendamos utilizar HTTPS para iniciar conexiones Websocket con un servidor (es decir, utilizar una conexión WSS en lugar de una conexión WS).

Hay disponible una aplicación Websocket de ejemplo en la página de [BrightSign Github](https://github.com/brightsign/websocket-test).

## Almacenamiento de archivos

Los reproductores BrightSign admiten varias tecnologías de almacenamiento/indexación de archivos, incluidas Web SQL, IndexedDB, la API HTML Filesystem y la clase JavaScript *almacenamiento* . La ubicación y el tamaño de la base de datos de almacenamiento web deben establecerse durante la inicialización de [roHtmlWidget](docId\:g_TJkqqHLcfT4Fw5_Z6T0).

## Descargas de archivos

Si utiliza JavaScript para descargar archivos, recomendamos usar la Fetch API y el módulo Node.js® File System para realizar las descargas. Consulte [esta página](docId\:NrV_T0oESrUQTX-BogKwp) para obtener más detalles

## Transformaciones CSS

Todas las transformaciones CSS deben especificarse como transformaciones WebKit. Al realizar una transformación en un elemento  o gráfico, no debe especificar la transformación en línea.

:::Iframe{code="<div>"}

:::

El siguiente código muestra un ejemplo de una transformación CSS eficaz para un reproductor BrightSign:

**Ejemplo:**

```text
<style>
 
                .flipme{
                -webkit-animation-name:flipon;
                -webkit-animation-fill-mode:forwards;
                -webkit-animation-iteration-count:1;
                -webkit-animation-duration:2s;
                }
 
 
@-webkit-keyframes flipon
{
0% {-webkit-transform:rotateY(0deg);}
30% {-webkit-transform:rotateY(-90deg);}
100% {-webkit-transform: rotateY(360deg);}
}
 
</style>
```