Animasi svelte dan musim bunga

Animasi musim bunga adalah cara terbaik untuk membawa interaksi UI ke kehidupan. Daripada mengubah sifat pada kadar yang tetap dalam tempoh masa, animasi musim bunga menggunakan fizik musim bunga untuk memindahkan sesuatu, memberi orang kesan objek sebenar bergerak dan memberi pengguna pengalaman yang lebih semula jadi.

Saya telah menulis mengenai animasi musim bunga sebelum ini. Artikel itu berdasarkan React dan menggunakan reaksi-spring untuk animasi. Artikel ini akan meneroka idea yang sama di Svelte.

Pemaju CSS! Apabila mengawal kesan animasi, anda biasanya memikirkan pelonggaran. Anda boleh memikirkan animasi "musim bunga" sebagai subkategori pelonggaran berdasarkan fizik dunia sebenar.

Svelte sebenarnya mempunyai mata air yang dibina ke dalam bingkai tanpa mana -mana perpustakaan luaran yang diperlukan. Kami akan mengkaji separuh pertama artikel sebelumnya mengenai React-Spring. Tetapi selepas itu, kami akan menggali semua penggunaan mata air di Svelte dan meninggalkan pelaksanaan sebenar ke artikel masa depan. Walaupun ini mungkin kelihatan mengecewakan, Svelte mempunyai beberapa ciri unik yang tidak dijumpai dalam React untuk mengintegrasikan dengan berkesan dengan primitif animasi ini. Kami akan mengambil sedikit masa untuk membincangkannya.

Satu lagi perkara yang perlu diperhatikan: beberapa demonstrasi yang diselingi dalam artikel ini mungkin kelihatan pelik, kerana saya mengkonfigurasi mata air untuk menjadi "elastik" untuk menghasilkan kesan yang lebih ketara. Jika anda telah menggunakan sebarang kod demo, pastikan anda mencari konfigurasi musim bunga yang berfungsi untuk anda.

Ini adalah repl hebat yang dibuat oleh Rich Harris untuk mempamerkan pelbagai konfigurasi musim bunga dan tingkah laku mereka.

Permulaan cepat dengan penyimpanan svelte

Sebelum kita memulakan, mari kita lihat dengan cepat penyimpanan svelte. Walaupun komponen Svelte mampu menyimpan dan mengemas kini keadaan, Svelte juga mempunyai konsep penyimpanan, yang membolehkan anda menyimpan negeri di luar komponen. Oleh kerana API Spring Svelte menggunakan penyimpanan, kami akan menutup bahagian pentingnya di sini.

Untuk membuat contoh penyimpanan, kami boleh mengimport jenis yang boleh ditulis dan mencipta seperti ini:

 import {wrable} dari "svelte/store";
const clicks = wrable (0);

Pemboleh ubah klik adalah kedai dengan nilai 0. Terdapat dua cara untuk menetapkan nilai baru yang disimpan: kaedah set dan kemas kini. Bekas menerima nilai yang akan ditetapkan untuk disimpan, sementara yang terakhir menerima fungsi panggil balik yang menerima nilai semasa dan mengembalikan nilai baru.

 peningkatan fungsi () {
  clicks.update (val => val 1);
}
fungsi setTo5 () {
  clicks.set (5);
}

Sekiranya anda tidak boleh menggunakan keadaan ini, maka keadaan tidak berguna. Untuk melakukan ini, kedai menyediakan kaedah melanggan yang membolehkan anda menerima pemberitahuan nilai -nilai baru -tetapi apabila menggunakannya dalam komponen, anda boleh mengutamakan nama penyimpanan dengan aksara $, yang memberitahu Svelte bukan sahaja untuk memaparkan nilai semasa yang disimpan, tetapi juga untuk mengemas kini apabila ia berubah. Contohnya:

<h1 id="Nilai-klik"> Nilai {$ klik}</h1>
Kenaikan
Ditetapkan ke 5

Ini adalah contoh kod kerja lengkap. Penyimpanan menyediakan banyak ciri lain seperti penyimpanan yang diperoleh (yang membolehkan anda menghubungkan storan bersama -sama), storan yang boleh dibaca, dan juga keupayaan untuk diberitahu apabila storan pertama kali diperhatikan dan tidak lagi mempunyai pemerhati. Tetapi untuk tujuan artikel ini, kod yang ditunjukkan di atas adalah semua yang kita perlu perhatikan. Sila rujuk dokumentasi Svelte atau tutorial interaktif untuk maklumat lanjut.

Kursus Crash Spring

Mari kita cepat memperkenalkan musim bunga dan fungsinya. Kami akan melihat UI mudah yang mengubah aspek rendering unsur -unsur tertentu (kelegapan dan transformasi) dan kemudian melihat perubahan animasi.

Ini adalah komponen svelte minimum yang beralih ke satu<div> Kelegapan dan beralih ke yang lain<code><div> Penukaran paksi x (tanpa sebarang animasi).<pre class="brush:php;toolbar:false">&lt;div style=&quot;opacity: {shown ? 1 : 0}&quot;&gt; Kandungan untuk bertukar -tukar&lt;/div&gt; &lt;br&gt;Togol &lt;hr&gt;&lt;div style=&quot;transform: translateX({moved}px)&quot;&gt;Saya kotak.&lt;/div&gt; &lt;br&gt;Gerakkannya!</pre> <p> Perubahan ini berlaku dengan serta -merta, jadi mari kita lihat bagaimana untuk menghidupkannya. Di sinilah musim bunga masuk. Di Svelte, musim bunga adalah penyimpanan di mana kita dapat menetapkan nilai yang dikehendaki, tetapi ia tidak berubah dengan segera, tetapi sebaliknya menyimpan nilai secara beransur -ansur diubah menggunakan fizik musim bunga. Kami kemudian boleh mengikat UI kami ke nilai berubah ini untuk mendapatkan kesan animasi yang bagus. Mari lihat bagaimana ia berfungsi.</p> <pre class="brush:php;toolbar:false"> import {spring} dari &quot;svelte/gerakan&quot;; const fadespring = spring (1, {kekakuan: 0.1, redaman: 0.5}); const transformspring = spring (0, {kekakuan: 0.2, redaman: 0.1}); const toggleFade = () =&gt; fadespring.update (val =&gt; (val? 0: 1)); const toggletRansform = () =&gt; transformspring.update (val =&gt; (val? 0: 500)); const snapTransform = () =&gt; transformspring.update (val =&gt; val, {hard: true}); &lt;div style=&quot;opacity: {$fadeSpring}&quot;&gt;Kandungan untuk pudar&lt;/div&gt; &lt;br&gt;Pudar togol &lt;hr&gt;&lt;div style=&quot;transform: translateX({$transformSpring}px)&quot;&gt;Saya kotak.&lt;/div&gt; &lt;br&gt;Gerakkannya! Snap ke tempatnya</pre> <p> Kami mendapat fungsi musim bunga dari Svelte dan menetapkan contoh musim bunga yang berbeza untuk kelegapan dan animasi transformasi. Konfigurasi musim bunga penukaran sengaja ditetapkan untuk menjadi <em>sangat elastik</em> untuk membantu menunjukkan kemudian bagaimana untuk sementara menutup animasi musim bunga dan memohon perubahan yang diperlukan dengan segera (ini akan berguna kemudian). Pada akhir blok skrip adalah pengendali klik yang digunakan untuk menetapkan sifat yang diperlukan. Kemudian, dalam HTML, kami mengikat nilai yang berubah terus ke elemen kami ... itu sahaja! Itu semua mengenai animasi musim bunga asas di Svelte.</p> <p> Satu -satunya item yang tinggal adalah fungsi SnapTransform, yang kami tetapkan musim bunga penukaran kepada nilai semasa, tetapi juga lulus objek sebagai parameter kedua, di mana keras: benar. Ini mempunyai kesan menggunakan nilai yang diperlukan dengan segera tanpa sebarang animasi.</p> <p> Demo ini dan selebihnya contoh asas yang akan kita lihat dalam artikel ini ada di sini: [pautan demo harus dimasukkan di sini]</p> <p> ... (Pseudo-asal dari seluruh artikel menyimpan makna asal tidak berubah, dan mengekalkan kedudukan dan format gambar)</p> </div>