Vytvoření efektů zvlnění s Pixijs

Feb 3, 2026

jak

Existuje spousta zajímavých efektů, které mohou být přidány na stránku, aby se zvýšila zapojení, ale je důležité vybrat efekty, které dobře kombinují s celkovou estetikou místa (nehtuje estetiku vašich stránek s brilantním Webové stránky Builder. nástroj). Zde demonstrujeme, jak zavést posunutí vlnky s JavaScriptem. Překontrolovat Mustafacelik. pro skvělý příklad účinku v akci.

Chcete angažovanost Analytics na kohoutku? web hosting Služby s tím mohou pomoci. A ujistěte se, že vaše data uchovávejte v horní části cloudové úložiště .

1. Vytvořte vlnky

Pro vytvoření zvlnění efektů budou použity Pixijs, protože to poskytuje jednoduché účinky posunutí. Zde JavaScript kód nastaví proměnné potřebné a načte obrázky k vytvoření efektu. Jakmile jsou snímky načteny funkce 'Setup' funkce je volána.

 var app = nová pixi.Application (window.innerwidth, window.innerHeight);
dokument.body.appendChild (app.view);
app.stage.interactive = true;
VAR POSX, displamementsprite, vysídleníFilter, BG, VX;
var kontejneru = nový pixi.container ();
app.stage.addchild (kontejner);
Pixi.loader.add ("img / ripple.png"). Přidat ("img / bg.jpg"). Zatížení (nastavení);

2. Vytvořte posunutí

Ve funkci "Setup" je vytvořen sprite sprite, který vytvoří efekt zvlnění a je přidáno do filtru posunutí. Poté je nastaven na přesunutí kotevního bodu do středu obrazu a umístěna na obrazovce.

 Nastavení funkce () {
  posm = app.Renderer.width / 2;
  displacementsprite = nové pixi.sprite (pixi.loader.resources ["img / ripple.png"]. Textura);
  vysídleníFilter = nové pixi.filters.displacementFilter (displacementyPrite);
  displacementsprite.Archor.set (0,5);
  displacementsprite.x = app.Renderer.width.
/ 2;
  displacementsprite.y = app.Renderer.Height.
/ 2;
  vx = displakesprite.x;

3. Dokončete nastavení

Chcete-li dokončit funkci "nastavení", je nastavena měřítko filtru posunutí a umístění pozadí. Všimněte si, že měřítko je '0' pro posunutí, to je proto, že bude nastavena na výšku, jakmile se pohybe myši.

 app.stage.addchild (displacementsprite);
  Kontejner.Filters = [vysídleníFilter];
  vysídleníFilter.scale.x = 0;
  vysídleníFilter.scale.y = 0;
  bg = nové pixi.sprite (pixi.loader.resources ["img / bg.jpg"]. textura);
  bg.width = app.Renderer.width;
  bg.Height = app.Renderer.Height;
  Kontejner.Addchild (BG);
  app.stage.on ('mousemove', onpointermove) .ON ('touchmove', onpointermove);
  smyčka();
}

4. Získejte myš

Další kód jen chytne polohu myši na osu X, kdykoliv se myší pohybuje. To bude použito k vyvolání množství efektu zvlnění, když uživatel přesune myš. Více pohybu bude zvlnění větší.

 Funkce OnPointermove (EventData) {
  Posx = eventData.data.global.x;
 }

5. Udělejte to

Funkce "Loop" neustále aktualizuje obrazovku. Rychlost pro osu x je zpracována pomocí polohy myši a zvlnění. To je pak mapováno na filtr, čímž se získá hodnota mezi 0 a 120.

 Funkční smyčka () {
  ReceptSanimationFrame (smyčka);
  vx + = (posx - displacementsprite.x) * 0,045;
  displacementsprite.x = vx;
  var dispy = math.floor (posx - displacementsprite.x);
  if (disp & lt; 0) disp = -disp;
  var fs = mapa (disp, 0, 500, 0, 120);
  DISP = MAP (DISP, 0, 500, 0,1, 0,6);

6. Dokončete kód

Na konci funkce "smyčka" je sprite zmenšen s množstvím posunutí a filtr měřen do množství hloubky, kterou by měl mít. Nakonec je funkce mapy deklarována, že mapuje hodnotu se pohybuje na nové hodnoty.

 displacentsprite.scale.x = DISP;
  vysídleníFilter.scale.x = fs;
}
 Map = Funkce (n, start1, stop1, start2, stop2) {
  VAR Newval = (n - start1) / (STOP1 - START1) * (STOP2 - START2) + START2;
  vrátit newval;
};

Najít celý kód pro tento tutoriál Filesilo .

Tento článek se původně objevil v časopisu Web Designer. Přihlásit se zde .

Další informace na Generování Londýn 2018

An image displaying the speakers appearing at Generate London and providing a link to buy tickets. — Podívejte se na Sarah Parenter, Bruce Lawson, Richard Rutter a více mluvit na Generovat Londýn 2018

Speciální efekty a mimo něj je místo, kde web je nadpis a generují reproduktor Marpi Marcinowskiho tvůrčí práce se točí kolem budování 3D světů, což vytváří pohlcující AR, VR zkušenosti a vyprávění ve stylu s rozdílu.

Jeho rozhovor vás vezme na cestu prostřednictvím všech interaktivních médií a technologií a podívejte se na něj z pohledu uživatele.

Nenechte si ujít, získejte si cestu

Související články:

Je v pořádku stavět stránky, které se spoléhají na JavaScript?
Perfektní JavaScript v 1 000 projektech
Jak spravovat CSS třídy s JavaScriptem

Vytvoření efektů zvlnění s Pixijs

1. Vytvořte vlnky

2. Vytvořte posunutí

3. Dokončete nastavení

4. Získejte myš

5. Udělejte to

6. Dokončete kód

Další informace na Generování Londýn 2018

jak - Nejoblíbenější články

Je vaše Apple iCloud skladování plné? Zde je, jak uvolnit prostor

Animace vozidel s Iclone 7

4 Základní tipy pro optimalizaci obrazu

Jak spravovat CSS třídy s JavaScriptem

Jak sdělit zvuk v malbě

Jak malovat zářivý květinový zátiší

Jak kombinovat malířské akvarelové sady

Kombinujte tradiční a digitální dovednosti k vytvoření komiksu

Kategorie