Ahora hemos añadido la opción de añadir un SVG, ya sea estático o animado, como imagen de la pantalla de bienvenida para reemplazar este indicador predeterminado de puntos de carga:
Tenga en cuenta que por razones de rendimiento, los SVG animados solo deben utilizar animaciones de transformación CSS u opacidad. [1]
Puede habilitar esta funcionalidad a través de nuestro sistema de Próximos Cambios ( /admin/config/upcoming-changes):
La configuración del sitio splash screen image (imagen de la pantalla de bienvenida) se utiliza para esto. Puede utilizar las variables CSS var(--primary), var(--secondary) y var(--tertiary) dentro de su SVG para hacer referencia a los colores de su tema y adaptarse al modo oscuro.
Es importante señalar que habilitar esta funcionalidad puede tener impactos en su puntuación LCP, por lo que realizar el cambio, esperar un tiempo y comprobar si tiene algún impacto en LCP o en la indexación en la consola de Búsqueda de Google es la mejor manera de probar esto.
Originalmente intentamos permitir elementos de animación SMIL (\u003canimate\u003e, \u003canimateTransform\u003e, etc.), pero estas animaciones serán pausadas por el navegador cuando se esté ejecutando javascript, causando tartamudeo. Las animaciones CSS de transformación y opacidad no están bloqueadas por JS y evitan este problema. ↩︎
Actualmente no tenemos una forma de añadir CSS personalizado porque esta pantalla se carga antes de gran parte de la aplicación y hay muchas más restricciones. ¿Puedes compartir la imagen SVG que estás utilizando aquí (o enviármela por mensaje privado)? Podría hacer algunas pruebas y ver si nuestros valores predeterminados podrían ser más adecuados.
También noté que tu SVG tiene mucho espacio en la parte superior, lo que afecta la centralización, no estoy seguro si es intencional, pero esta versión lo elimina
Tenga en cuenta que hay un ligero cambio en lo que estamos permitiendo para la animación SVG (y he actualizado el OP para reflejar esto). Originalmente permitíamos animaciones SMIL en SVG, pero resulta que estas tartamudean porque el navegador pausa este tipo de animación mientras se ejecuta javascript.
Así que, en su lugar, la recomendación es usar solo animaciones de transformación CSS y opacidad en sus SVG, ya que estas no son bloqueadas por JS.
Si echa un vistazo al SVG de @ばこん de arriba… proporciona un buen ejemplo de una animación permitida:
Además, tenga cuidado de dar a sus animaciones nombres únicos para que no entren en conflicto con otras animaciones en Discourse (nombres como “blink”, “rotate”, “fade”, etc., podrían ser demasiado genéricos). Usar un prefijo como unique- es una excelente manera de evitar esto.
Google acaba de lanzar Gemini Pro 3.1, y su primer punto destacado del modelo fueron los SVG animados. Naturalmente, intenté crear un cargador para https://discourse-on-a-pi5.falco.dev/ y obtuve esto después de solo 2 indicaciones
Sí, ¡estaba bastante contento con el resultado! Llevaba mucho tiempo probando esto con modelos, este es el primer modelo que lo maneja bien.
Aquí está la instrucción (prompt)
Genera un SVG animado que se utilizará como animación de carga en un foro sobre la placa mini pc raspberry pi. La animación debe realizarse utilizando CSS en línea de SVG.
¡Esto es genial! ¿Puedes cambiar la propia raspberry, los hexágonos rojos, la animación? Se mueven diagonalmente de arriba a la izquierda a abajo a la derecha, pero están descentrados y se ve raro. ¿Quizás los mantenemos estáticos y centralizados y con una animación más sutil?
[quote=“Bas, post:17, topic:395100”]Estás obteniendo mejores resultados que yo.
Rendirse después de un puñado de iteraciones[/quote]
Me temo que la restricción del logotipo de Discourse puede ser demasiado estricta para ello.
Lo intenté
Genera un SVG animado que se utilizará como animación de carga en un foro de discusión. El foro se ejecuta en Discourse, por lo que podría usar algunos de sus motivos en el svg, ¿como burbujas de diálogo de color arcoíris? La animación debe hacerse usando CSS en línea de SVG.
Actuará como un icono de carga entre páginas, por lo que debe ser sutil y minimalista.
Idea:
Quiero mantener la forma general sin distorsión
Creo que podemos hacer algo con las 3 formas internas: algún tipo de rotación, similar a lo que obtendrías si hicieras girar una raqueta de tenis de mesa con las manos por su mango
DEBES preservar la identidad de la marca y no romper su diseño general; esto es imperativo para la marca.
¡Volvamos a admirar el trabajo de Falco y a discutir la pantalla de inicio!
