Añade vida a tus aplicaciones Svelte integrando transiciones y animaciones cautivadoras.
Cuando se hace bien, la animación puede mejorar la experiencia del usuario y puede ser una excelente manera de enviarle comentarios. Svelte le facilita la incorporación de animaciones y transiciones en su aplicación con muy poca necesidad de bibliotecas JavaScript de terceros.
Configurar un proyecto esbelto
Para comenzar a utilizar Svelte, debe asegurarse de que el tiempo de ejecución de Node.js y Administrador de paquetes de nodos (NPM) están instalados correctamente en su computadora. Abra su terminal y ejecute el siguiente comando:
npm create vite
Esto armará un nuevo proyecto Vite.js. Nombra tu proyecto, selecciona Esbelto como marco y establezca la variante en javascript. Luego cambie al directorio del proyecto y ejecute el siguiente comando para instalar las dependencias necesarias:
npm install
Elimine el código repetitivo eliminando el activos y biblioteca carpetas y borrar el contenido de la Aplicación.esbelta y aplicación.css archivos.
Cómo utilizar la interpolación en Svelte
La interpolación es una técnica de animación y gráficos por computadora que genera fotogramas intermedios entre fotogramas clave para crear movimientos o transiciones suaves y realistas. Svelte ofrece una interpolado Utilidad que le permite animar elementos utilizando valores numéricos, simplificando la creación de transiciones fluidas y animaciones en sus aplicaciones web.
La utilidad interpolada es parte del esbelto/movimiento módulo. Para usar interpolación en su componente, debe importarlo así:
import { tweened } from'svelte/motion'
Debajo del capó, la utilidad interpolada es solo una tienda Svelte en la que se puede escribir. Una tienda Svelte es básicamente un objeto JavaScript que puedes usar para manejar la administración del estado. La tienda interpolada tiene dos métodos, a saber: colocar y actualizar. En el nivel básico, la sintaxis de una tienda interpolada se parece a esta:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
El bloque de código anterior define una variable. y y lo vincula a una tienda interpolada. En la tienda hay dos parámetros. El primer parámetro representa el valor predeterminado que y la encuadernación debería tener. El siguiente parámetro es un objeto con dos claves. duración y facilitando. El duración define cuánto tiempo debe durar la interpolación en milisegundos mientras facilitando define la función de relajación.
Las funciones de relajación en Svelte definen el comportamiento de una interpolación. Estas funciones forman parte del esbelto/relajado módulo, lo que significa que debe importar una función específica del módulo antes de poder pasarla a la tienda interpolada. Svelte tiene un visualizador de aceleración que puede utilizar para explorar el comportamiento de diferentes funciones de aceleración.
Para ilustrar completamente cómo se puede utilizar la utilidad interpolada, aquí se muestra un ejemplo del uso del almacén interpolado para aumentar el tamaño de un elemento en Svelte.
