¿Para qué sirve la librería Spring?

Spring sirve para crear animaciones a través de la física de resortes, lo que significa, hacer animaciones basadas en el movimiento real del usuario. Esta librería es funcional tanto en iOS como en Android.

Además es multiplataforma, admite web, react-native, react-native-web …

¿Cómo se utiliza?

Deberemos instalar Spring en nuestro proyecto React:

Necesitamos la animación-primitiva en sí, y  animated que nos facilita elementos nativos para recibir valores animados.

Gracias a «useSpring» podremos dotar de funcionalidad a los objetos. Con la palabra reservada animated podremos crear objetos dinámicos. Este nombre puede ser sustituido por otro, pero siempre haciendo referencia a esta palabra. Muchas veces nos encontraremos con ésta sintaxis:

Esa variable hará función de objeto. Cuando queramos renderizarlo deberemos añadir un .div al objeto, ya que tenemos que introducir ese elemento en un contenedor padre. No será obligatorio cuando importemos los estilos y los usemos en forma de objeto.

Además de renderizarse a través del objeto, lo hacen gracias a ReactDom.

Hay muchas funcionalidades, desde arrastrar (utilizando useGesture) como cliclear(useSpring). Para cada una de esas funcionalidades deberemos instalar las dependencias que nos indique el código y aplicarlas a nuestro objeto animado.

Caso Práctico

En nuestro proyecto, procederemos a instalar en primer lugar la librería Spring como se ha detallado anteriormente. Una vez creado el proyecto, en la página de ejemplos de Spring, seleccionaremos uno de ellos. En nuestro caso utilizaremos el ejemplo de animación en cadena.

Es muy sencillo, puesto que el código ya está creado, solamente debemos de adaptarlo a nuestro proyecto. Accederemos a ése código desde aquí:

Aparecerá ésta ventana:

Como podéis ver, nos detalla todo el código. Abajo en la parte izquierda veremos las dependencias que deberemos instalar por cmd. Una vez instaladas, crearemos 3 archivos: «data.js» en donde almacenaremos los objetos que vayamos a renderizar, «styles.js» aparecerán los estilos predeterminados de la animación e»index.js» para aplicar el código animado y conseguir que se renderice.

Si queremos añadir imágenes o hacer que se renderice mediante un componente deberemos de:

1.- Añadir las fotos que deseemos en nuestros objetos, que se encuentran en la carpeta data.js como propiedad, ya que usa sintaxis JSON.

 {
      name: 'Rare Wind',
      description: '#a8edea → #fed6e3',
      css: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
      foto : "https://www.cleverfiles.com/howto/wp-   content/uploads/2018/03/minion.jpg",
      height: 200
    } 

2.- Deberemos de implantar el código que nos han proporcionado en un componente. ¿Cómo? Creando una función que a su vez será un objeto. Además añadiremos estilos en línea para que nuestras imágenes se vean centradas y ocupando el espacio del contenedor.

 animacionSpring =() => {        
        const SpringFunction = function() {
            const [open, set] = useState(false)
        
            const springRef = useRef()
            const { size, opacity, ...rest } = useSpring({
            ref: springRef,
            config: config.stiff,
            from: { size: '20%', background: 'hotpink' },
            to: { size: open ? '100%' : '20%', background: open ? 'white' : 'hotpink' }
            })
        
            const transRef = useRef()
            const transitions = useTransition(open ? data : [], item => item.name, {
            ref: transRef,
            unique: true,
            trail: 400 / data.length,
            from: { opacity: 0, transform: 'scale(0)' },
            enter: { opacity: 1, transform: 'scale(1)' },
            leave: { opacity: 0, transform: 'scale(0)' }
            })        

            useChain(open ? [springRef, transRef] : [transRef, springRef], [0, open ? 0.1 : 0.6])  

            return (
            <>
                <Global />
                <Container style={{ ...rest, width: size, height: size }} onClick={() => set(open => !open)}>
                {transitions.map(({ item, key, props }) => (                    
                    <Item key={key} style={{ ...props,
                        backgroundImage: `url(${item.foto})`,
                        backgroundPosition: "center", /* Center the image */
                        backgroundRepeat: "no-repeat", /* Do not repeat the image */
                        backgroundSize: "cover"}} />
                ))}                
                </Container>
            </>
            )
        }
        render(<SpringFunction />, document.getElementById('root'))
    } 

3.- Añadiremos en App.js el componente que hemos creado y de esta manera se renderizará con las imágenes que hemos añadido a nuestros objetos.

¡Consejo! — La mayoría de parámetros son específicos para que la animación pueda funcionar, por lo que muchos de ellos son por defecto. No obstante podemos cambiar fondos de color, ancho de objetos, imágenes… Para más información pulsa aquí y verás todos los parámetros que puede soportar la animación.

Como veis, es muy fácil de utilizar. Es entender cómo funciona el código y adaptarlo a nuestras necesidades. Experimentar con el código, ver cómo se comporta y sobre todo ver qué contienen los objetos de la animación, nos ayudará a entender su funcionamiento.

Autor: Sara Bachiller Parra

Curso: Microsoft MCSA Web Applications + MCSD App Builder

Centro: Tajamar

Año académico: 2019-2020

GitHub: https://github.com/SaraBachiPaMeGo/LibreriaSpring

LinkedIn: www.linkedin.com/in/sara-bachiller-desarrollo-web

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.