🎖️ 👩🏾‍🌾 🌙 Animaciones de primavera en Vue 🎹 👁‍🗨 💡

Hola Habr!

Durante mucho tiempo he querido agregar animaciones de primavera a cualquier proyecto. Pero hice esto solo para proyectos React usando react-spring, porque no sabía nada más.

¡Pero finalmente, decidí descubrir cómo funciona todo y escribir mi implementación!

Si también quieres usar animaciones de primavera en todas partes, ve debajo del gato. Allí encontrará algo de teoría, implementando Spring en JS puro e implementando la animación Spring en Vue usando componentes y composición-api.

TL; DR

Implementación de Spring Animation en JS: https://playcode.io/590645/ . Debe

agregar animaciones Spring a su proyecto: tome Spring de la biblioteca Popmotion .

Debe agregar animaciones Spring a su proyecto Vue: tome Spring de la biblioteca Popmotion y escriba un contenedor sobre él.

¿Para qué son las animaciones de primavera?

Las animaciones CSS convencionales en la web utilizan una duración y una función para calcular la posición de vez en cuando.

Las animaciones de primavera utilizan un enfoque diferente: la física de primavera.

Para la animación, establecemos las propiedades físicas del sistema: la masa del resorte, el coeficiente de elasticidad del resorte, el coeficiente de fricción del medio. Luego estiramos el resorte a la distancia que necesitamos animar y lo liberamos.

En los proyectos de front-end, veo tales ventajas en las animaciones de Spring:

1. Puede establecer la velocidad de animación inicial.

Si el sitio procesa deslizamientos con los dedos o arrastra con el mouse, las animaciones de los objetos se verán más naturales si las configura con la velocidad inicial como la velocidad de deslizamiento o la velocidad del mouse.

Animación CSS que no retiene la velocidad del mouse

Spring-animation, en la que la velocidad del mouse se transmite al spring

2. Puede cambiar el punto final de la animación

Si, por ejemplo, desea animar un objeto al cursor del mouse, no puede ayudar con CSS; cuando actualiza la posición del cursor, la animación se inicializa nuevamente, lo que provocará sacudidas es visible.

No hay tal problema con las animaciones de Spring: si necesita cambiar el punto final de la animación, estiramos o comprimimos el resorte hasta la sangría deseada.

Un ejemplo de animación de un elemento a un cursor del mouse; arriba - Animación CSS, abajo - Animación de primavera

Física de primavera

Tome un resorte ordinario con una carga. Ella todavía está en reposo.

Tírala un poco hacia abajo. Una fuerza elástica (

\vec{F_{у п}} = - k Δ \vec{X}

$\vec{F_{}} = -k\Delta \vec{X}$ ), que busca devolver el resorte a su posición original. Cuando soltemos el resorte, comenzará a oscilar a lo largo de la sinusoide:

Añadir fuerza de fricción. Deje que sea directamente proporcional a la velocidad del resorte (

\vec{F_{т р}} = - α \vec{V}

$\vec{F_{}} = -\alpha\vec{V}$ ) En este caso, las oscilaciones decaerán con el tiempo:

Queremos que nuestras animaciones de primavera se animen de la misma manera que un resorte oscila cuando se expone a la elasticidad y la fricción.

Consideramos la posición del resorte para la animación.

En el contexto de las animaciones, la diferencia entre el valor inicial y final de la animación es la tensión inicial de la primavera.

\vec{X_{0}}

$\vec{X_0}$ .

Antes del comienzo de la animación, se nos da: misa de primavera

m

$m$ , coeficiente de elasticidad de resorte

k

$k$ , coeficiente de fricción del medio

α

$\alpha$ tensión de primavera

\vec{X_{0}}

$\vec{X_0}$ , velocidad inicial

\vec{V_{0}}

$\vec{V_0}$ .

La posición de la animación se calcula varias decenas de veces por segundo. El intervalo de tiempo entre los cálculos de animación se llama

Δ t

$\Delta t$ .

Durante cada nuevo cálculo, tenemos la velocidad del resorte

\vec{V_{п р}}

$\vec{V_{}}$ y la tensión del resorte

\vec{X_{п р}}

$\vec{X_{}}$ en el último intervalo de animación. Para el primer cálculo de animación.

\vec{X_{п р}} = \vec{X_{0}}

$\vec{X_{}}=\vec{X_0}$ ,

\vec{V_{п р}} = \vec{V_{0}}

$\vec{V_{}}=\vec{V_0}$ .

¡Comenzamos a calcular la posición de la animación para el intervalo!

Según la segunda ley de Newton, la suma de todas las fuerzas aplicadas es igual a la masa del cuerpo multiplicada por su aceleración:

\vec{F} = m \vec{a}

$\vec{F}=m\vec{a}$

Dos fuerzas actúan sobre un resorte: la fuerza elástica y la fuerza de fricción:

\vec{F_{у п}} + \vec{F_{т р}} = m \vec{a}

$\vec{F_{}} + \vec{F_{}}=m\vec{a}$

Anotaremos las fuerzas con más detalle y encontraremos la aceleración:

- k \vec{X_{п р}} - α \vec{V_{п р}} = m \vec{a}

$-k\vec{X_{}} - \alpha\vec{V_{}}=m\vec{a}$

\vec{a} = \frac{- k \vec{X_{п р}} - α \vec{V_{п р}}}{m}

$\vec{a} = \dfrac{-k\vec{X_{}} - \alpha\vec{V_{}}}{m}$

Después de eso podemos encontrar una nueva velocidad. Es igual a la suma de la velocidad en el intervalo de animación anterior y la aceleración multiplicada por el intervalo de tiempo:

\vec{V_{н в}} = \vec{V_{п р}} + \vec{a} * Δ t

$\vec{V_{}}=\vec{V_{}} + \vec{a}*\Delta t$

Conociendo la velocidad, puede encontrar la nueva posición del resorte:

\vec{X_{н в}} = \vec{X_{п р}} + \vec{V_{н в}} * Δ t

$\vec{X_{}}=\vec{X_{}} + \vec{V_{}}*\Delta t$

Tenemos la posición correcta, ¡muéstrela al usuario!

Una vez que se muestra, comience un nuevo intervalo de animación. Para un nuevo intervalo

\vec{X_{п р}} = \vec{X_{н в}}

$\vec{X_{}}=\vec{X_{}}$ ,

\vec{V_{п р}} = \vec{V_{н в}}

$\vec{V_{}}=\vec{V_{}}$ .

Vale la pena parar la animación cuando

‖ \vec{X_{н в}} ‖

$\|\vec{X_{}}\|$ y

‖ \vec{V_{н в}} ‖

$\|\vec{V_{}}\|$ se vuelven muy pequeños, en este momento las oscilaciones de primavera son casi invisibles.

JS Spring Animation

Tenemos las fórmulas necesarias, queda por escribir nuestra implementación:

class Spring {
  constructor({ mass, tension, friction, initVelocity, from, to, onUpdate }) {
    this.mass = mass;                 //  
    this.tension = tension;           //  
    this.friction = friction;         //  
    this.initVelocity = initVelocity; //  

    this.from = from;                 //    
    this.to = to;                     //    
    this.onUpdate = onUpdate;         // ,    
  }

  startAnimation() {
    const callDoAnimationTick = () => {
      const isFinished = this.doAnimationTick();

      if (isFinished) {
        return;
      }

      this.nextTick = window.requestAnimationFrame(callDoAnimationTick);
    };

    callDoAnimationTick();
  }

  stopAnimation() {
    const { nextTick } = this;

    if (nextTick) {
      window.cancelAnimationFrame(nextTick);
    }

    this.isFinished = true;
  }

  doAnimationTick() {
    const {
      mass, tension, friction, initVelocity, from, to,
      previousTimestamp, prevVelocity, prevValue, onUpdate,
    } = this;

    //  Δt
    const currentTimestamp = performance.now();
    const deltaT = (currentTimestamp - (previousTimestamp || currentTimestamp))
      / 1000;
    //   Δt 46 
    const normalizedDeltaT = Math.min(deltaT, 0.046);

    let prevSafeVelocity = prevVelocity || initVelocity || 0;
    let prevSafeValue = prevValue || from;

    //   ,    
    const springRestoringForce = -1 * tension * (prevSafeValue - to);
    const dampingForce = -1 * prevSafeVelocity * friction;
    const acceleration = (springRestoringForce + dampingForce) / mass;

    //       
    const newVelocity = prevSafeVelocity + acceleration * normalizedDeltaT;
    const newValue  = prevSafeValue + newVelocity * normalizedDeltaT;

    //    
    const precision = 0.001;
    const isFinished = Math.abs(newVelocity) < precision
      && Math.abs(newValue - to) < precision;

    onUpdate({ value: newValue, isFinished });

    this.previousTimestamp = currentTimestamp;
    this.prevValue = newValue;
    this.prevVelocity = newVelocity;
    this.isFinished = isFinished;

    return isFinished;
  }
}

Sandbox con código de clase Spring y un ejemplo de su uso:
https://playcode.io/590645

Mejora de animación de primavera menor

Hay un pequeño problema con nuestra clase de primavera:

Δ t

$\Delta t$ será diferente cada vez con nuevos comienzos de la animación.

Abrir en un teléfono celular viejo

Δ t

$\Delta t$ será igual a 46 milisegundos, nuestro límite máximo. Abrir en una computadora poderosa -

Δ t

$\Delta t$ será de 16-17 milisegundos.

Cambiando

Δ t

$\Delta t$ significa que la duración de la animación y los cambios en el valor animado serán ligeramente diferentes cada vez.

Para evitar que esto suceda, podemos hacer esto:

tomar

Δ t

$\Delta t$ como un valor fijo Con un nuevo intervalo de animación, tendremos que calcular cuánto tiempo ha pasado desde el último intervalo y cuántos valores fijos hay en él.

Δ t

$\Delta t$ . Si el tiempo no es divisible por

Δ t

$\Delta t$ , luego transfiera el resto al siguiente intervalo de animación.

Entonces calculamos

\vec{X_{н в}}

$\vec{X_{}}$ y

\vec{V_{н в}}

$\vec{V_{}}$ tantas veces como obtuvimos valores fijos. Último valor

\vec{X_{н в}}

$\vec{X_{}}$ mostrando al usuario.

Ejemplo:

Δ t

$\Delta t$ tomemos como 1 milisegundo, 32 milisegundos pasados entre el último y el nuevo intervalo de animación.

Tenemos que calcular la física 32 veces,

\vec{X_{н в}}

$\vec{X_{}}$ y

\vec{V_{н в}}

$\vec{V_{}}$ ; último

\vec{X_{н в}}

$\vec{X_{}}$ debe mostrarse al usuario.

Así es como se verá el método doAnimationTick:

class Spring {
  /* ... */

  doAnimationTick() {
    const {
      mass, tension, friction, initVelocity, from, to,
      previousTimestamp, prevVelocity, prevValue, onUpdate,
    } = this;

    const currentTimestamp = performance.now();
    const fractionalDiff = currentTimestamp - (previousTimestamp || currentTimestamp);
    const naturalDiffPart = Math.floor(fractionalDiff);
    const decimalDiffPart = fractionalDiff % 1;
    const normalizedDiff = Math.min(naturalDiffPart, 46);

    let safeVelocity = prevVelocity || initVelocity || 0;
    let safeValue = prevValue || from;

    //     1-  
    for (let i = 0; i < normalizedDiff; i++) {
      const springRestoringForce = -1 * tension * (safeValue - to);
      const dampingForce = -1 * safeVelocity * friction;
      const acceleration = (springRestoringForce + dampingForce) / mass;

      safeVelocity = safeVelocity + acceleration / 1000;
      safeValue  = safeValue + safeVelocity / 1000;
    }

    const precision = 0.001;
    const isFinished = Math.abs(safeVelocity) < precision
      && Math.abs(safeValue - to) < precision;

    onUpdate({ value: safeValue, isFinished });

    //       ,
    //      
    this.previousTimestamp = currentTimestamp - decimalDiffPart;
    this.prevValue = safeValue;
    this.prevVelocity = safeVelocity;
    this.isFinished = isFinished;

    return isFinished;
  }
}

Este método de cálculo físico usa react-spring, en este artículo puedes leer más.

Sobre el coeficiente de atenuación y el período de oscilación intrínseca

Al observar las propiedades del sistema (la masa de la carga, el coeficiente de elasticidad y el coeficiente de fricción del medio), no está completamente claro cómo se comporta el resorte. Al crear animaciones de Spring, estas variables se seleccionan aleatoriamente hasta que el programador esté satisfecho con el "springiness" de la animación.

Sin embargo, en física hay un par de variables para un resorte amortiguado, al observarlas se puede saber cómo se comporta el resorte.

Para encontrarlos, volvamos a nuestra ecuación de la segunda ley de Newton:

- k \vec{X_{п р}} - α \vec{V_{п р}} = m \vec{a}

$-k\vec{X_{}} - \alpha\vec{V_{}}=m\vec{a}$

Lo escribimos como una ecuación diferencial:

- k x - α \frac{d x}{d t} = m \frac{d^{2} x}{d t^{2}}

$-kx - \alpha\frac{dx}{dt}=m\frac{d^2x}{dt^2}$

Se puede reescribir como:

\frac{d^{2} x}{d t^{2}} + 2 ζ ω_{0} \frac{d x}{d t} + ω_{0}^{2} x = 0,

$\frac{d^2x}{dt^2} + 2\zeta\omega_{0}\frac{dx}{dt} + \omega_{0}^2x = 0,$

Dónde

ω_{0} = \sqrt{\frac{k}{m}}

$\omega_{0} = \sqrt\frac{k}{m}$ - la frecuencia de oscilación del resorte sin tener en cuenta la fuerza de fricción,

ζ = \frac{α}{2 \sqrt{m k}}

$\zeta = \frac{\alpha}{2\sqrt{mk}}$ - coeficiente de atenuación.

Si resolvemos esta ecuación, obtenemos varias funciones.

x (t)

$x(t)$ que determinan la posición de la primavera frente al tiempo. Pondré la solución debajo del spoiler para no estirar demasiado el artículo, iremos directamente al resultado.

Solución de ecuaciones

, :
https://www.youtube.com/watch?v=uI2xt8nTOlQ

:

x^{″} + 2 ζ ω_{0} x^{'} + ω_{0}^{2} x = 0, ω_{0} > 0, ζ \geq 0

$x'' + 2 \zeta\omega_0x' + \omega_0^2x = 0, \omega_0 >0, \zeta \geq 0$

g^{2} + 2 ζ ω_{0} g + ω_{0}^{2} = 0

$g^2 + 2 \zeta\omega_0g + \omega_0^2 = 0$

D = (2 ζ ω_{0})^{2} - 4 ω_{0}^{2} = 4 ω_{0}^{2} (ζ^{2} - 1)

$D = (2\zeta\omega_0)^2 - 4\omega_0^2 = 4\omega_0^2(\zeta^2 - 1)$

:

1.

D > 0

$D > 0$

D > 0

$D > 0$

ζ > 1

$\zeta > 1$ .

D > 0

$D > 0$ :

x (t) = C_{1} e^{r_{1} t} + C_{2} e^{r_{2} t},

$x(t) = C_1e^{r_1t} + C_2e^{r_2t},$

r_{1, 2}

$r_{1,2}$ — , :

r_{1, 2} = \frac{- 2 ζ ω_{0} \pm \sqrt{4 ω_{0}^{2} (ζ^{2} - 1)}}{2} = - ω_{0} (ζ \pm \sqrt{ζ^{2} - 1})

$r_{1,2} = \frac{-2\zeta\omega_0 \pm \sqrt{4\omega_0^2(\zeta^2 - 1)}}{2} = -\omega_0(\zeta \pm \sqrt{\zeta^2 - 1})$

x (t) = C_{1} e^{- ω_{0} β_{1} t} + C_{2} e^{- ω_{0} β_{2} t},

$x(t) = C_1e^{-\omega_0\beta_1t} + C_2e^{-\omega_0\beta_2t},$

β_{1, 2} = ζ \pm \sqrt{ζ_{2} - 1}

$\beta_{1, 2} = \zeta \pm \sqrt{\zeta_2 - 1}$ .

, 0.

2.

D = 0

$D = 0$

D = 0

$D = 0$

ζ = 1

$\zeta = 1$ .

D = 0

$D = 0$ :

x (t) = (C_{1} + C_{2} t) e^{r t},

$x(t) = (C_1 + C_2t)e^{rt},$

r

$r$ — , :

r = - ζ ω_{0}

$r = - \zeta\omega_0$

x (t) = (C_{1} + C_{2} t) e^{- ζ ω_{0} t}

$x(t) = (C_1 + C_2t)e^{- \zeta\omega_0t}$

, 0. ,

D > 0

$D > 0$ .

, , , 0 ,

D > 0

$D > 0$ . , ?

3.

D < 0

$D < 0$

D < 0

$D < 0$

ζ < 1

$\zeta < 1$ .

D < 0

$D < 0$ :

x (t) = e^{α t} (C_{1} c o s (β t) + C_{2} * s i n (β t))

$x(t) = e^{\alpha t}(C_1cos(\beta t) + C_2 * sin(\beta t))$

α

$\alpha$

β

$\beta$ — , :

r 1, 2 = α \pm β i = - ω_{0} ζ \pm ω_{0} \sqrt{ζ^{2} - 1}) = - ω_{0} ζ \pm ω_{0} \sqrt{1 - ζ^{2}} i

$r{1,2} = \alpha \pm \beta i = -\omega_0\zeta \pm\omega_0\sqrt{\zeta^2 - 1}) = -\omega_0\zeta \pm \omega_0\sqrt{1 - \zeta^2}i$

α = - ω_{0} ζ, β = ω_{0} \sqrt{1 - ζ^{2}}

$\alpha = -\omega_0\zeta, \beta = \omega_0\sqrt{1 - \zeta^2}$

x (t) = e^{- ω_{0} ζ t} (C_{1} c o s (ω_{0} \sqrt{1 - ζ^{2}} t) + C_{2} s i n (ω_{0} \sqrt{1 - ζ^{2}} t))

$x(t) = e^{-\omega_0\zeta t}(C_1cos(\omega_0\sqrt{1 - \zeta^2} t) + C_2sin(\omega_0\sqrt{1 - \zeta^2} t))$

, 0.

ζ

$\zeta$ ,

e^{- ω_{0} ζ t}

$e^{-\omega_0\zeta t}$ 0, .. .

ζ = 0

$\zeta = 0$ .

ζ < 1

$\zeta < 1$ obtenemos una ecuación que describe las vibraciones amortiguadas de un resorte. Menos

ζ

$\zeta$ , cuanto menor es la fuerza de fricción y las vibraciones más visibles.

A

ζ = 1

$\zeta = 1$ obtenemos la ecuación con fricción crítica, es decir La ecuación en la que el sistema vuelve a la posición de equilibrio sin dudarlo, de la manera más rápida.

A

ζ > 1

$\zeta > 1$ obtenemos una ecuación en la que el sistema vuelve a la posición de equilibrio sin dudarlo. Esto será más lento que con

ζ = 1

$\zeta = 1$ ; con aumento

ζ

$\zeta$ la tasa de convergencia a la posición de equilibrio disminuye.

Ejemplos de animaciones para varios $\zeta$ . Velocidad de animación reducida en 4 veces.

Además de

ζ

$\zeta$ , hay otra característica comprensible de las oscilaciones de resorte: el período de las oscilaciones de resorte sin tener en cuenta la fricción:

T = 2 π \sqrt{\frac{m}{k}}

$T = 2\pi\sqrt{\frac{m}{k}}$

Tenemos dos parámetros:

→

ζ

$\zeta$ , que determina cuánto fluctuará la animación.

Valores posibles

ζ

$\zeta$ 0 a 1.

menos

ζ

$\zeta$ , las vibraciones más visibles tendrá la primavera. En 0, el sistema no tendrá fricción, el resorte oscilará sin atenuación; en 1, el resorte convergerá a la posición de equilibrio sin dudarlo.

Los valores superiores a 1 no son necesarios para nosotros: funcionan como 1, solo en vano arrastran nuestra animación.

→

T

$T$ que dirá cuánto durará la animación.

Hay que tener en cuenta el parámetro

T

$T$ habla sobre la duración de una sola vibración del resorte sin tener en cuenta la fuerza de fricción, y no sobre la duración total de la animación.

Ahora podemos derivar el coeficiente de elasticidad y el coeficiente de fricción del medio, sabiendo

ζ

$\zeta$ y

T

$T$ y suponiendo que

m = 1

$m=1$ :

ζ = \frac{α}{2 \sqrt{m k}}, T = 2 π \sqrt{\frac{m}{k}}

$\zeta = \frac{\alpha}{2\sqrt{mk}}, T = 2\pi\sqrt{\frac{m}{k}}$

k = (\frac{2 π}{T})^{2}, α = \frac{4 π ζ}{T}

$k = (\frac{2\pi}{T})^2, \alpha = \frac{4\pi\zeta}{T}$

Implementamos esta lógica en el código:

const getSpringValues = ({ dampingRatio, period }) => {
  const mass = 1;
  const tension = Math.pow(2 * Math.PI / period, 2);
  const friction = 4 * Math.PI * dampingRatio / period;

  return {
    mass,
    tension,
    friction,
  };
};

//  

new Spring({
  ...getSpringValues({
    dampingRatio: 0.3, //   - 
    period: 0.6, //   600 
  }),
  from: 0,
  to: 20,
  onUpdate: () => { /* ... */ },
});

new Spring({
  ...getSpringValues({
    dampingRatio: 1, //   
    period: 0.2, //   200 
  }),
  from: 0,
  to: 20,
  onUpdate: () => { /* ... */ },
});

Ahora tenemos un método getSpringValues que acepta el coeficiente de atenuación legible por humanos

ζ

$\zeta$ y periodo de oscilación

T

$T$ y devuelve la masa del resorte, el coeficiente de fricción y el coeficiente de elasticidad.

Este método está en la caja de arena en el siguiente enlace, puede intentar usarlo en lugar de las propiedades habituales del sistema:
https://playcode.io/590645

Vue Spring Animation

Para usar convenientemente las animaciones de Spring en Vue, puede hacer dos cosas: escribir un componente contenedor o el método de composición-api .

Animación de primavera a través del componente

Escribamos un componente que abstraiga el uso de la clase Spring.

Antes de escribirlo, imagina cómo queremos usarlo:

<template>
  <div>
    <SpringWrapper
      :mass="1"
      :tension="170"
      :friction="14"
      :animationProps="{ x, y }" 
      :animate="true" 
      v-slot="{ x: newX, y: newY }"
    >
      <div :style="{ transform: `translate(${newX}px, ${newY}px)` }" />
    </SpringWrapper>
  </div>
</template>

<script>
import SpringWrapper from 'path/to/SpringWrapper';

export default {
  components: {
    SpringWrapper,
  },

  data() {
    return {
      x: 0,
      y: 0,
    };
  },

  mounted() {
    setTimeout(() => {
      this.x = 100;
      this.y = 100;
    }, 1000);
  },
};
</script>

Nos gustaría:

Podrías establecer las propiedades de la primavera
En el parámetro animationProps, fue posible especificar los campos que queremos animar
El parámetro animado pasó el valor de si animationProps debería ser animado
Cada vez que los campos cambian en animationProps, se cambian usando la animación Spring y se transfieren a la ranura del alcance

Para una funcionalidad completa, el componente aún debe poder cambiar la velocidad del resorte, pero no haremos esto para no complicar el código.

Comenzamos el desarrollo:

const SpringWrapper = {
  props: {
    friction: { type: Number, default: 10 },
    tension: { type: Number, default: 270 },
    mass: { type: Number, default: 1 },
    animationProps: { type: Object, required: true },
    animate: { type: Boolean, required: true },
  },

  data: () => ({
    //    
    actualAnimationProps: null,
  }),

  created() {
    this.actualAnimationProps = this.animationProps;
    // ,     Spring-
    this._springs = {};
  },

  watch: {
    animationProps: {
      deep: true,

      //    animationProps
      handler(animationProps) {
        const {
          friction, tension, mass,
          animate, actualAnimationProps, _springs,
        } = this;

        //     ,    
        if (!animate) {
          this.actualAnimationProps = animationProps;

          return;
        }

        //      
        Object.entries(animationProps).forEach((([key, value]) => {
          const _spring = _springs[key];
          const actualValue = actualAnimationProps[key];

          //      Spring-,
          //      
          if (_spring && !_spring.isFinished) {
            _spring.to = value;

            return;
          }

          const spring = new Spring({
            friction,
            tension,
            mass,
            initVelocity: 0,
            from: actualValue,
            to: value,
            onUpdate: ({ value }) => {
              actualAnimationProps[key] = value;
            },
          });

          spring.startAnimation();

          _springs[key] = spring;
        }));
      }
    },

    animate(val) {
      const { _springs } = this;

      //     ,
      //    Spring-
      if (!val) {
        Object.values(_springs).forEach((spring) => {
          spring.stopAnimation();
        })

        this.actualAnimationProps = this.animationProps;
      }
    },
  },

  render() {
    const { $scopedSlots, actualAnimationProps } = this;

    //     scopedSlot
    return $scopedSlots.default(actualAnimationProps)[0];
  },
};

Sandbox con un componente y un ejemplo de su uso:
https://playcode.io/591686/

Animación de primavera a través del método composición-api

Para usar composición-api, que aparecerá en Vue 3.0, necesitamos el paquete composición-api .

Agrégalo a nosotros mismos:

npm i @vue/composition-api

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

Ahora pensemos cómo nos gustaría ver nuestro método de animación:

<template>
  <div>
    <div :style="{ transform: `translate(${x}px, ${y}px)` }" />
  </div>
</template>

<script>
import useSpring from 'path/to/useSpring';

export default {
  setup() {
    const { x, y, animate } = useSpring({
      mass: 1, 
      tension: 170, 
      friction: 10,
      x: 0,
      y: 0,
    });

    setTimeout(() => {
      x.value = 100;
      y.value = 100;
    }, 1000);

    return {
      x,
      y,
      animate,
    };
  },
};
</script>

Nos gustaría:

Podrías establecer las propiedades de la primavera
La función tomó un objeto con los campos que queremos animar como entrada.
La función devolvió contenedores calculados. Los setters aceptarán los valores que queremos animar como entrada; getters devolverán un valor animado
La función devolvió la variable animada, que será responsable de si necesitamos reproducir la animación o no.

Como en el caso del componente, no agregaremos personalización de la velocidad del resorte para no complicar el código.

Comenzamos a hacer un método:

import { reactive, computed, ref, watch } from '@vue/composition-api';
import { Spring } from '@cag-animate/core';

const useSpring = (initialProps) => {
  const {
    mass, tension, friction,
    animate: initialAnimate,
    ...restInitialProps
  } = initialProps;

  //  ,      
  const actualProps = reactive(restInitialProps);

  const springs = {};
  const mirrorProps = {};

  Object.keys(initialProps).forEach(key => {
    //     computed-
    // 
    // Getter     actualProps
    // Setter  Spring-
    mirrorProps[key] = computed({
      get: () => actualProps[key],
      set: val => {
        const _spring = springs[key];
        const actualValue = actualProps[key];

        if (!mirrorProps.animate.value) {
          actualProps[key] = val;

          return
        }

        if (_spring && !_spring.isFinished) {
          _spring.to = val;

          return;
        }

        const spring = new Spring({
          friction,
          tension,
          mass,
          initVelocity: 0,
          from: actualValue,
          to: val,
          onUpdate: ({ value }) => {
            actualProps[key] = value;
          },
        });

        spring.startAnimation();

        springs[key] = spring;
      },
    });
  });

  mirrorProps.animate = ref(initialAnimate || true);

  watch(() => mirrorProps.animate.value, (val) => {
    if (!val) {
      Object.entries(springs).forEach(([key, spring]) => {
        spring.stopAnimation();
        actualProps[key] = spring.to;
      });
    }
  });

  return mirrorProps;
};

export default useSpring;

Sandbox con el método de composición-api y un ejemplo de su uso:
https://playcode.io/591812/

La última palabra

En el artículo, examinamos las características básicas de las animaciones de Spring y las implementamos en Vue. Pero todavía tenemos margen para mejoras: en los componentes Vue puede agregar la capacidad de agregar nuevos campos después de la inicialización, agregar un cambio en la velocidad de la primavera.

Es cierto, escribir su Spring en proyectos reales no es necesario en absoluto: la biblioteca Popmotion ya tiene una implementación Spring preparada . Puede escribir un contenedor para Vue, como lo hicimos anteriormente.

¡Gracias por leer hasta el final!

Animaciones de primavera en Vue