Δημιουργήστε επιδράσεις κυματισμού με Pixijs

Sep 12, 2025

πως να

Υπάρχουν πολλές ενδιαφέρουσες επιδράσεις που μπορούν να προστεθούν σε μια σελίδα για να αυξήσουν την εμπλοκή, αλλά είναι σημαντικό να διαλέξετε τα εφέ που συνδυάζονται καλά με τη συνολική αισθητική ενός ιστότοπου (καρφώστε την αισθητική του ιστότοπού σας με ένα λαμπρό οικοδόμος ιστότοπου εργαλείο). Εδώ παρουσιάζουμε πώς να εισαγάγετε κυματισμούς μετατόπισης με JavaScript. Ολοκλήρωση παραγγελίας Mustafacelik για ένα μεγάλο παράδειγμα της επίδρασης στη δράση.

Θέλετε αναλυτική δέσμευση στη βρύση; Web hosting Οι υπηρεσίες μπορούν να βοηθήσουν με αυτό. Και φροντίστε να διατηρείτε τα δεδομένα σας ασφαλή στην κορυφή αποθήκευση σύννεφων .

1. Δημιουργήστε κυματισμούς

Προκειμένου να δημιουργηθούν τα αποτελέσματα κυματισμού που θα χρησιμοποιηθούν οι Pixijs, καθώς αυτό παρέχει απλή επίδραση μετατόπισης. Εδώ ο κωδικός JavaScript ρυθμίζει τις διαθέσιμες μεταβλητές και φορτώνει τις εικόνες για να δημιουργήσετε το αποτέλεσμα. Μόλις τοποθετηθούν οι εικόνες, η λειτουργία "SETUP" ονομάζεται.

 var app = νέα pixi.application (window.innerwidth, window.innerheight);
document.Body.AppendChild (app.View);
app.stage.interactive = true;
var posx, μετατροπέςprite, μετατόπισηFilter, bg, vx;
VAR Container = New Pixi.Container ();
app.stage.addchild (δοχείο);
Pixi.loader.add ("img / ripple.png"). Προσθήκη ("img / bg.jpg"). Φορτίο (Ρύθμιση);

2. Δημιουργήστε την μετατόπιση

Στη λειτουργία "Ρύθμιση" δημιουργείται το Sprite μετατόπισης που θα δημιουργήσει το φαινόμενο κυματισμού και αυτό προστίθεται σε ένα φίλτρο μετατόπισης. Στη συνέχεια, ορίστε να μετακινήσετε το σημείο αγκύρωσης στο κέντρο της εικόνας και τοποθετείται στην οθόνη.

 Ρύθμιση λειτουργίας () {
  posx = app.renderer.width / 2;
  ΜετατροπέςPrite = νέο pixi.sprite (pixi.loader.resources ["img / ripple.png"]. Υφή)?
  DisplacementFilter = New Pixi.Filters.DisplacementFilter (μετατοπίθεις).
  ΜετατροπέςPRITE.Anchor.Set (0,5).
  μετατροπέςprite.x = app.renderer.width
/ 2;
  μετατροπέςprite.y = app.renderer.height
/ 2;
  vx = μετατροπέςprite.x;

3. Τελειώστε τη ρύθμιση

Για να ολοκληρώσετε τη λειτουργία "Ρύθμιση", η κλίμακα φίλτρου μετατόπισης είναι ρυθμισμένη και το υπόβαθρο που βρίσκεται τοποθετημένο. Παρατηρήστε ότι η κλίμακα είναι "0" για την μετατόπιση, αυτό συμβαίνει επειδή θα οριστεί σε ύψος μόλις το ποντίκι κινείται.

 app.stage.addchild (μετατοπίσειςprite);
  container.filters = [μετατόπισηFilter];
  displacementfilter.scale.x = 0;
  displacementfilter.scale.y = 0;
  bg = new pixi.sprite (pixi.loader.resources ["img / bg.jpg"]. Υφή)?
  bg.width = app.renderer.width;
  bg.height = app.renderer.height;
  container.addchild (BG);
  app.stage.on ('mousemove', onpointermove) .on ('TouchMove', Onpointermove).
  βρόχος();
}

4. Πάρτε το ποντίκι

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

 Λειτουργία OnPointermove (EventData) {
  posx = eventData.data.global.x;
 }

5. Κάντε την κίνηση

Η λειτουργία "βρόχου" ενημερώνει συνεχώς την οθόνη. Μια ταχύτητα για τον άξονα Χ επεξεργάζεται χρησιμοποιώντας τη θέση του ποντικιού και της κυματισμού. Αυτό στη συνέχεια χαρτογραφείται στο φίλτρο για να δώσει μια τιμή μεταξύ 0 και 120.

 Λειτουργία Λειτουργίας () {
  Αιθέσιον αιτήματος (βρόχος).
  VX + = (POSX - Displacementsprite.x) * 0,045;
  μετατροπέςprite.x = vx;
  var disp = math.floor (posx - μετατοπίσειςpritesprite.x);
  Εάν (disp & lt; 0) disp = -Disp;
  VAR FS = Χάρτης (DISP, 0, 500, 0, 120).
  DISP = Χάρτης (DISP, 0, 500, 0,1, 0,6).

6. Τελειώστε τον κώδικα

Στο τέλος της λειτουργίας «βρόχου», το Sprite κλιμακώνεται στην ποσότητα μετατόπισης και φίλτρου που έχει κλιμακωθεί στην ποσότητα βάθους που πρέπει να έχει. Τέλος, η λειτουργία MAP δηλώνεται ότι η αξία των χαρτών κυμαίνεται σε νέες τιμές.

 Μετατροπέςprite.scale.x = disp;
  displacementfilter.scale.x = fs;
}
 Χάρτης = λειτουργία (n, start1, stop1, start2, stop2) {
  var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
  επιστρέψτε το NEWVAL;
};

Βρείτε τον πλήρη κωδικό για αυτό το σεμινάριο Αρχεία .

Αυτό το άρθρο εμφανίστηκε αρχικά στο περιοδικό Web Designer. Εγγραφείτε εδώ .

Μάθετε περισσότερα στη δημιουργία του Λονδίνου 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — Πάρτε να δείτε το Sarah Parmenter, Bruce Lawson, Richard Rutter και περισσότερη συζήτηση στη δημιουργία του Λονδίνου 2018

Ειδικά εφέ και πέρα είναι ότι ο ιστός κατευθύνεται και δημιουργεί η δημιουργική εργασία του ηχείου Marpi Marcinowski περιστρέφεται γύρω από το κτίριο 3D κόσμους, δημιουργώντας εμβληματική AR, εμπειρίες VR και αφήγηση σε στυλ με τη διαφορά.

Η συζήτησή του θα σας μεταφέρει σε ένα ταξίδι μέσω όλων των διαδραστικών μέσων και τεχνολογιών και θα το εξετάσει από την οπτική γωνία του χρήστη.

Μην χάσετε, πάρτε το εισιτήριό σας τώρα

Σχετικά Άρθρα:

Είναι εντάξει να οικοδομήσουμε ιστότοπους που βασίζονται στο JavaScript;
Τέλεια Javascript σε 1.000 έργα
Πώς να διαχειριστείτε τα μαθήματα CSS με το JavaScript

Δημιουργήστε επιδράσεις κυματισμού με Pixijs

1. Δημιουργήστε κυματισμούς

2. Δημιουργήστε την μετατόπιση

3. Τελειώστε τη ρύθμιση

4. Πάρτε το ποντίκι

5. Κάντε την κίνηση

6. Τελειώστε τον κώδικα

Μάθετε περισσότερα στη δημιουργία του Λονδίνου 2018

πως να - Τα πιο δημοφιλή άρθρα

Δημιουργήστε υφές με το εργαλείο σφραγίδας μοτίβου

Φύλλα χαρακτήρων για 3D μοντέλους: 15 κορυφαίες συμβουλές

7 Κορυφαίες συμβουλές για την εκκίνηση της δικής σας επιχείρησης

Πώς να ξεκινήσετε με το Forced

Πώς να ζωγραφίσει τα κτήνη φαντασίας

Πώς να αναμίξετε το χρώμα σκιάς σε βαφή

Πώς να σχεδιάσετε ένα τοπίο με παστέλ

Βελτιώστε τις βούρτσες σας σε έλαια

Κατηγορίες