👉🏽 🕺🏾 🙅🏿 Animasi musim semi di Vue 🏇🏽 🧛🏻 👩‍👩‍👧‍👧

Halo, Habr!

Saya sudah lama ingin menambahkan animasi Spring ke proyek apa pun. Tetapi saya melakukan ini hanya untuk proyek Bereaksi menggunakan musim semi-reaksi, karena saya tidak tahu apa-apa lagi.

Namun akhirnya, saya memutuskan untuk mencari tahu cara kerjanya dan menulis implementasi saya!

Jika Anda juga ingin menggunakan animasi Musim Semi di mana-mana, pergilah ke bawah kucing. Di sana Anda akan menemukan beberapa teori, menerapkan Spring di JS murni, dan menerapkan animasi Spring di Vue menggunakan komponen dan komposisi-api.

TL; DR

Menerapkan Animasi Musim Semi di JS: https://playcode.io/590645/ .

Anda perlu menambahkan animasi Spring ke proyek Anda - ambil Spring dari perpustakaan Popmotion .

Anda perlu menambahkan animasi Spring ke proyek Vue Anda - ambil Spring dari perpustakaan Popmotion dan tulis pembungkus di atasnya.

Apa itu Animasi Musim Semi?

Animasi css konvensional di web menggunakan durasi dan fungsi untuk menghitung posisi dari waktu ke waktu.

Animasi musim semi menggunakan pendekatan yang berbeda - fisika pegas.

Untuk animasi, kita mengatur sifat fisik sistem: massa pegas, koefisien elastisitas pegas, koefisien gesekan medium. Kemudian kita meregangkan pegas ke jarak yang kita butuhkan untuk menghidupkan, dan melepaskannya.

Dalam proyek front-end, saya melihat keuntungan seperti itu di animasi Spring:

1. Anda dapat mengatur kecepatan animasi

awal.Jika situs memproses gesekan dengan jari-jari Anda atau seret dengan mouse, maka objek animasi akan terlihat lebih alami jika Anda mengaturnya dengan kecepatan awal seperti kecepatan gesek atau kecepatan mouse.

Animasi CSS yang tidak mempertahankan kecepatan mouse

Animasi pegas, di mana kecepatan mouse ditransmisikan ke pegas

2. Anda dapat mengubah titik akhir animasi

Jika, misalnya, Anda ingin menganimasikan objek ke kursor mouse, maka Anda tidak dapat membantu dengan CSS - saat Anda memperbarui posisi kursor, animasi diinisialisasi lagi, yang akan menyebabkan menyentak terlihat.

Tidak ada masalah dengan animasi Pegas - jika Anda perlu mengubah titik akhir animasi, kami merentangkan atau memadatkan pegas ke indentasi yang diinginkan.

Contoh menggerakkan elemen ke kursor mouse; animasi CSS - atas, animasi bawah - Spring

Fisika musim semi

Ambil pegas biasa dengan beban. Dia masih beristirahat.

Tarik sedikit ke bawah. Kekuatan elastis (

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

$\vec{F_{}} = -k\Delta \vec{X}$ ), yang berupaya mengembalikan pegas ke posisi semula. Saat kami melepaskan pegas, ia akan mulai berayun di sepanjang sinusoid:

Tambahkan gaya gesekan. Biarkan berbanding lurus dengan kecepatan pegas (

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

$\vec{F_{}} = -\alpha\vec{V}$ ) Dalam hal ini, osilasi akan membusuk seiring waktu:

Kami ingin animasi Pegas kami dianimasikan dengan cara yang sama seperti pegas terombang-ambing ketika terkena elastisitas dan gesekan.

Kami mempertimbangkan posisi pegas untuk animasi

Dalam konteks animasi, perbedaan antara nilai awal dan akhir dari animasi adalah ketegangan awal pegas

\vec{X_{0}}

$\vec{X_0}$ .

Sebelum dimulainya animasi, kita diberikan: pegas

m

$m$ , koefisien pegas elastisitas

k

$k$ , koefisien gesekan medium

α

$\alpha$ ketegangan pegas

\vec{X_{0}}

$\vec{X_0}$ , kecepatan mulai

\vec{V_{0}}

$\vec{V_0}$ .

Posisi animasi dihitung beberapa puluh kali per detik. Interval waktu antara perhitungan animasi disebut

Δ t

$\Delta t$ .

Selama setiap perhitungan baru, kami memiliki kecepatan pegas

\vec{V_{п р}}

$\vec{V_{}}$ dan ketegangan pegas

\vec{X_{п р}}

$\vec{X_{}}$ pada interval animasi terakhir. Untuk perhitungan animasi pertama

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

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

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

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

Kami mulai menghitung posisi animasi untuk interval!

Menurut hukum kedua Newton, jumlah semua gaya yang diterapkan adalah sama dengan massa tubuh dikalikan dengan akselerasinya:

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

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

Dua gaya bekerja pada pegas - gaya elastis dan gaya gesekan:

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

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

Kami akan menuliskan kekuatan secara lebih rinci dan menemukan akselerasi:

- 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}$

Setelah itu kita dapat menemukan kecepatan baru. Itu sama dengan jumlah kecepatan dalam interval animasi sebelumnya dan percepatan dikalikan dengan interval waktu:

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

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

Mengetahui kecepatan, Anda dapat menemukan posisi baru pegas:

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

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

Kami mendapat posisi yang tepat, menampilkannya kepada pengguna!

Setelah ditampilkan, mulailah interval animasi baru. Untuk interval baru

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

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

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

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

Animasi ini layak dihentikan ketika

‖ \vec{X_{н в}} ‖

$\|\vec{X_{}}\|$ dan

‖ \vec{V_{н в}} ‖

$\|\vec{V_{}}\|$ menjadi sangat kecil - pada saat ini osilasi pegas hampir tidak terlihat.

JS Spring Animation

Kami memiliki formula yang diperlukan, masih menulis implementasi kami:

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 dengan kode kelas Spring dan contoh penggunaannya:
https://playcode.io/590645

Peningkatan Animasi Musim Semi Kecil

Ada masalah kecil dengan kelas Musim Semi kami -

Δ t

$\Delta t$ akan berbeda setiap kali dengan permulaan animasi yang baru.

Buka di ponsel lama -

Δ t

$\Delta t$ akan sama dengan 46 milidetik, batas maksimum kami. Buka di komputer yang kuat -

Δ t

$\Delta t$ akan menjadi 16-17 milidetik.

Berubah

Δ t

$\Delta t$ berarti bahwa durasi animasi dan perubahan nilai animasi akan sedikit berbeda setiap kali.

Untuk mencegah hal ini terjadi, kita dapat melakukan ini:

Ambil

Δ t

$\Delta t$ sebagai nilai tetap. Dengan interval animasi baru, kita harus menghitung berapa banyak waktu yang telah berlalu sejak interval terakhir dan berapa banyak nilai tetap di dalamnya

Δ t

$\Delta t$ . Jika waktu tidak habis dibagi

Δ t

$\Delta t$ , lalu transfer sisanya ke interval animasi berikutnya.

Lalu kita hitung

\vec{X_{н в}}

$\vec{X_{}}$ dan

\vec{V_{н в}}

$\vec{V_{}}$ sebanyak yang kita dapatkan nilai tetap. Nilai terakhir

\vec{X_{н в}}

$\vec{X_{}}$ ditampilkan kepada pengguna.

Contoh:

Δ t

$\Delta t$ mari kita ambil 1 milidetik, 32 milidetik berlalu antara interval animasi terakhir dan baru.

Kita harus menghitung fisika 32 kali,

\vec{X_{н в}}

$\vec{X_{}}$ dan

\vec{V_{н в}}

$\vec{V_{}}$ ; terakhir

\vec{X_{н в}}

$\vec{X_{}}$ harus ditunjukkan kepada pengguna.

Inilah yang akan terlihat seperti metode 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;
  }
}

Metode perhitungan fisika ini menggunakan reaksi-pegas, dalam artikel ini Anda dapat membaca lebih lanjut.

Tentang koefisien atenuasi dan periode osilasi intrinsik

Melihat sifat-sifat sistem - massa beban, koefisien elastisitas dan koefisien gesekan medium - sama sekali tidak jelas bagaimana musim semi berperilaku. Saat membuat animasi Musim Semi, variabel-variabel ini dipilih secara acak sampai programmer puas dengan "springiness" dari animasi.

Namun, dalam fisika ada beberapa variabel untuk pegas teredam, melihat mereka Anda bisa tahu bagaimana musim semi berperilaku.

Untuk menemukannya, mari kembali ke persamaan kita tentang hukum kedua Newton:

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

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

Kami menulisnya sebagai persamaan diferensial:

- 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}$

Itu dapat ditulis ulang sebagai:

\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,$

Dimana

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

$\omega_{0} = \sqrt\frac{k}{m}$ - Frekuensi osilasi pegas tanpa memperhitungkan gaya gesekan,

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

$\zeta = \frac{\alpha}{2\sqrt{mk}}$ - koefisien atenuasi.

Jika kita memecahkan persamaan ini, maka kita mendapatkan beberapa fungsi

x (t)

$x(t)$ yang menentukan posisi pegas versus waktu. Saya akan meletakkan solusinya di bawah spoiler agar tidak terlalu banyak meregangkan artikel, kami akan langsung menuju hasilnya.

Solusi persamaan

, :
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$ kita mendapatkan persamaan yang menggambarkan getaran pegas yang teredam. Kurang

ζ

$\zeta$ , semakin rendah gaya gesek dan getaran yang lebih terlihat.

Di

ζ = 1

$\zeta = 1$ kita mendapatkan persamaan dengan gesekan kritis, yaitu persamaan di mana sistem kembali ke posisi keseimbangan tanpa ragu-ragu, dengan cara tercepat.

Di

ζ > 1

$\zeta > 1$ kita mendapatkan persamaan di mana sistem kembali ke posisi keseimbangan tanpa ragu-ragu. Ini akan lebih lambat dibandingkan dengan

ζ = 1

$\zeta = 1$ ; dengan peningkatan

ζ

$\zeta$ laju konvergensi ke posisi keseimbangan menurun.

Contoh animasi untuk berbagai $\zeta$ . Kecepatan animasi dikurangi dengan 4 kali.

Selain

ζ

$\zeta$ , ada karakteristik lain dari osilasi pegas - periode osilasi pegas tanpa memperhitungkan gesekan:

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

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

Kami mendapat dua parameter:

→

ζ

$\zeta$ , yang menentukan seberapa banyak animasi akan berfluktuasi.

Nilai yang Mungkin

ζ

$\zeta$ 0 hingga 1.

kurang

ζ

$\zeta$ , semakin banyak getaran yang terlihat pada musim semi. Pada 0, sistem tidak akan memiliki gesekan, pegas akan berosilasi tanpa pelemahan; pada 1, pegas akan menyatu ke posisi keseimbangan tanpa ragu-ragu.

Nilai yang lebih besar dari 1 tidak diperlukan bagi kami - nilai tersebut berfungsi sebagai 1, hanya sia-sia menyeret animasi kami.

→

T

$T$ yang akan mengatakan berapa lama animasi akan bertahan.

Harus diingat parameternya

T

$T$ berbicara tentang durasi satu getaran pegas tanpa memperhitungkan gaya gesekan, dan bukan tentang total durasi animasi.

Sekarang kita dapat memperoleh koefisien elastisitas dan koefisien gesekan medium, dengan mengetahui

ζ

$\zeta$ dan

T

$T$ dan dengan asumsi itu

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}$

Kami menerapkan logika ini dalam kode:

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: () => { /* ... */ },
});

Sekarang kami memiliki metode getSpringValues yang menerima koefisien atenuasi yang dapat dibaca manusia

ζ

$\zeta$ dan periode osilasi

T

$T$ dan mengembalikan massa pegas, koefisien gesekan dan koefisien elastisitas.

Metode ini ada di kotak pasir di tautan di bawah ini, Anda dapat mencoba menggunakannya alih-alih properti sistem yang biasa:
https://playcode.io/590645

Vue Spring Animation

Untuk menggunakan animasi Spring dengan mudah di Vue, Anda dapat melakukan dua hal: menulis komponen pembungkus atau metode komposisi-api .

Animasi pegas melalui komponen

Mari kita menulis komponen yang mengabstraksi penggunaan kelas Spring.

Sebelum menulis, bayangkan bagaimana kita ingin menggunakannya:

<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>

Kami ingin:

Anda bisa mengatur properti pegas
Dalam parameter animationProps, dimungkinkan untuk menentukan bidang yang ingin kita menghidupkan
Parameter animasi melewati nilai apakah animasiProp harus dianimasikan
Setiap kali bidang berubah di animationProps, bidang tersebut diubah menggunakan animasi Spring dan ditransfer ke slot yang dicakup

Untuk fungsionalitas penuh, komponen masih harus dapat mengubah kecepatan pegas, tetapi kami tidak akan melakukan ini agar tidak menyulitkan kode.

Kami memulai pengembangan:

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 dengan komponen dan contoh penggunaannya:
https://playcode.io/591686/

Animasi musim semi melalui metode komposisi-api

Untuk menggunakan komposisi-api, yang akan muncul di Vue 3.0, kita memerlukan paket komposisi-api .

Tambahkan ke diri kita sendiri:

npm i @vue/composition-api

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

Vue.use(VueCompositionApi);

Sekarang mari kita pikirkan bagaimana kita ingin melihat metode animasi kita:

<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>

Kami ingin:

Anda bisa mengatur properti pegas
Fungsi mengambil objek dengan bidang yang ingin kita beri animasi sebagai input.
Fungsi mengembalikan pembungkus yang dikomputasi. Setters akan menerima nilai-nilai yang ingin kita animate sebagai input; getter akan mengembalikan nilai animasi
Fungsi mengembalikan variabel bernyawa, yang akan bertanggung jawab untuk apakah kita perlu memutar animasi atau tidak.

Seperti dalam kasus komponen, kami tidak akan menambahkan penyesuaian kecepatan pegas agar tidak menyulitkan kode.

Kami mulai membuat metode:

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 dengan metode komposisi-api dan contoh penggunaannya:
https://playcode.io/591812/

Kata terakhir

Dalam artikel tersebut, kami memeriksa fitur dasar animasi Spring dan mengimplementasikannya di Vue. Tetapi kami masih memiliki ruang untuk perbaikan - dalam komponen Vue Anda dapat menambahkan kemampuan untuk menambahkan bidang baru setelah inisialisasi, menambahkan perubahan dalam kecepatan pegas.

Benar, menulis Spring Anda di proyek nyata tidak diperlukan sama sekali: perpustakaan Popmotion sudah memiliki implementasi Musim Semi yang sudah jadi . Anda dapat menulis pembungkus untuk Vue, seperti yang kami lakukan di atas.

Terima kasih sudah membaca sampai akhir!

Animasi musim semi di Vue