Κατανόηση των μεταβάσεων και των κινούμενων εικόνων στο Svelte

Όταν γίνεται καλά, η κινούμενη εικόνα μπορεί να βελτιώσει την εμπειρία του χρήστη και μπορεί να είναι ένας πολύ καλός τρόπος για να στείλετε σχόλια στον χρήστη. Το Svelte σας διευκολύνει να ενσωματώνετε κινούμενα σχέδια και μεταβάσεις στην εφαρμογή σας με πολύ μικρή ανάγκη για βιβλιοθήκες JavaScript τρίτων.

Ρύθμιση ενός Svelte Project

Για να ξεκινήσετε με το Svelte, θα πρέπει να το βεβαιωθείτε ο χρόνος εκτέλεσης Node.js και Node Package Manager (NPM) έχουν εγκατασταθεί σωστά στον υπολογιστή σας. Ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή:

npm create vite

Αυτό θα σκαλωσιά α νέο έργο Vite.js. Ονομάστε το έργο σας, επιλέξτε Λυγερή ως πλαίσιο και ορίστε την παραλλαγή σε JavaScript. Στη συνέχεια, μεταβείτε στον κατάλογο του έργου και εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε τις απαραίτητες εξαρτήσεις:

npm install

Αφαιρέστε τον κωδικό της πλάκας λέβητα διαγράφοντας το περιουσιακά στοιχεία και lib φακέλους και εκκαθάριση των περιεχομένων του App.svelte και App.css αρχεία.

Πώς να χρησιμοποιήσετε το Tweening στο Svelte

Το Tweening είναι μια τεχνική στα κινούμενα σχέδια και στα γραφικά υπολογιστή που δημιουργεί ενδιάμεσα καρέ μεταξύ των βασικών καρέ για να δημιουργήσει ομαλή και ρεαλιστική κίνηση ή μεταβάσεις. Η Svelte προσφέρει α tweened βοηθητικό πρόγραμμα που σας επιτρέπει να κάνετε κίνηση στοιχείων χρησιμοποιώντας αριθμητικές τιμές, καθιστώντας εύκολη τη δημιουργία ρευστών μεταβάσεων και κινούμενων εικόνων στις εφαρμογές Ιστού σας.

Το βοηθητικό πρόγραμμα tweened είναι μέρος του σβέλτος/κίνηση μονάδα μέτρησης. Για να χρησιμοποιήσετε το tweened στο στοιχείο σας, πρέπει να το εισαγάγετε ως εξής:

import { tweened } from'svelte/motion'

Κάτω από την κουκούλα, το βοηθητικό πρόγραμμα tweened είναι απλώς ένα εγγράψιμο κατάστημα Svelte. Ένα κατάστημα Svelte είναι βασικά ένα αντικείμενο JavaScript που μπορείτε να χρησιμοποιήσετε για να χειριστείτε τη διαχείριση κατάστασης. Το κατάστημα tweened έχει δύο μεθόδους και συγκεκριμένα: σειρά και εκσυγχρονίζω. Σε βασικό επίπεδο, η σύνταξη για ένα κατάστημα tweened μοιάζει κάπως έτσι:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

Το μπλοκ κώδικα παραπάνω ορίζει μια μεταβλητή y και το δένει σε ένα κατάστημα tweened. Στο κατάστημα, υπάρχουν δύο παράμετροι. Η πρώτη παράμετρος αντιπροσωπεύει την προεπιλεγμένη τιμή το y δεσμευτικό πρέπει να έχει. Η επόμενη παράμετρος είναι ένα αντικείμενο με δύο πλήκτρα διάρκεια και χαλάρωση. ο διάρκεια καθορίζει πόσο θα πρέπει να διαρκεί το tween σε χιλιοστά του δευτερολέπτου ενώ χαλάρωση ορίζει τη λειτουργία χαλάρωσης.

Οι συναρτήσεις διευκόλυνσης στο Svelte καθορίζουν τη συμπεριφορά ενός tween. Αυτές οι λειτουργίες αποτελούν μέρος του σβέλτος / χαλαρωτικός ενότητα που σημαίνει ότι πρέπει να εισαγάγετε μια συγκεκριμένη συνάρτηση από τη λειτουργική μονάδα για να μπορέσετε να την περάσετε στο κατάστημα tweened. Το Svelte διαθέτει έναν οπτικοποιητή διευκόλυνσης που μπορείτε να χρησιμοποιήσετε για να εξερευνήσετε τη συμπεριφορά διαφορετικών λειτουργιών διευκόλυνσης.

Για να δείξετε πλήρως πώς μπορείτε να χρησιμοποιήσετε το βοηθητικό πρόγραμμα tweened, εδώ είναι ένα παράδειγμα χρήσης του tweened store για να αυξήσετε το μέγεθος ενός στοιχείου στο Svelte.