Jak animovat s knihovnou mo.js

Mo.js je jedinečná knihovna pohybu pohybu JavaScript, která nejen usnadňuje animační nakladače na celé obrazovce, ale také kliknutím-k-animovat mikro-interakce a tun manipulace s tvarem.

Pokud jste po chvíli sledovali scénu webového designu, je pravděpodobné, že budete mít narazit - nebo možná interakci s - širokou škálou animačních technik a knihoven. Základní technologie jako CSS, HTML5 a JavaScript se stávají ještě silnější a podpora prohlížeče se zlepšuje s časem. Implikace je, že sofistikovanější web animace mohou být podporovány napříč zařízeními. Pamatujte si, že pokud budujete komplexní místo, vaše web hosting Služba musí být schopna podporovat váš projekt.

Potřebujete nějakou animaci inspiraci? Zde jsou některé úžasné příklady vrcholu CSS Animace znovu vytvořit. Chcete vybudovat místo bez kódování? Zkuste to Stavitelé webových stránek .

Jak může pomoci mo.js?

Webová animace, jak se objeví, je tady, aby zůstal. Nicméně, nedostatek s nejoblíbenějšími technikami animace je to, že jsou gravitační k animaci konvenčních prvků UI / UX, jako jsou slideshows, Tabbed tlačítka a rozbalovací nabídky. Výsledkem je, že použití je může nakonec učinit vaše stránky příliš známé a non-vzrušující.

Mo.js s tím může pomoci. Pomocí knihovny pomáhá animovat ne-běžné prvky webu pomocí jeho vestavěných součástí, jako je HTML, tvar, spirála, roztržení a stíničky. Knihovna je velmi snadná, rychlá, Retina Ready, modulární a otevřený zdroj. V tomto tutoriálu jsou zavedeny základy práce s mo.js a prokázaly dva techniky; výbuch a bublina.

01. ZAČÁTEK.

Začněte vytvořením složky, Mo.js, na ploše pro uložení výukových souborů. Vytvořte tři další složky v něm: CSS pro uložení styling souborů, img pro obrázky a JS pro soubory JavaScriptu. Soubory HTML budou uloženy v kořenové složce. (Možná budete chtít zvážit zálohování cloudové úložiště ).

02. Vytvořit strukturu stránek

Otevřete editor kódu a vytvořte dokument index.html tak, aby obsahoval značku pro hlavní webovou stránku. Začněte vytvořením základní struktury a uveďte vhodný titul na stránku.

 & lt; DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; hlava & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt, titul & gt; výbuch technika <
název & gt;
 & lt; / hlava & gt;
& lt; tělo & gt; & lt; / tělo & gt;
& lt; / html & gt; 

03. Struktura stránky

Výukový program je rozdělen do dvou částí; První demonstruje techniku ​​výbuchu, zatímco druhá ilustruje koncepci bublin. V důsledku toho připravujeme dva soubory HTML, jeden pro každou techniku. Chcete-li zahájit techniku ​​výbuchu, vytvořte sekci DIG, abyste mohli obsahovat název stránky. Vykreslte stránku ve svém prohlížeči, kde byste měli pozorovat bez-stylizovaný text v levém horním rohu.

 & lt; tělo & gt;
      & lt; dig class = "text" & gt;
& lt; p & gt; Mo.js animace & lt; / p & gt;
     & lt; / div & gt;
& lt; / tělo & gt;

04. Spojení CSS

Otevřete editor kódu a vytvořte soubor Styles.cssss do složky CSS. Vytvořte odkaz na tento soubor ve vašem dokumentu HTML přidáním tohoto kódu v sekci Head, & lt; link rel = "Stylesheet" href = "css / styles.css" & gt; . Vzhledem k tomu, že nebyly přidány žádné styly, poskytuje se stránky, jak je znázorněno v kroku 3. Alternativně, protože styling je minimální, můžete se rozhodnout použít inline styl kombinací HTML a CSS.

05. Styl pozadí

Dále jsme stylem stylu přidáním obrázku na pozadí. Použili jsme volnou malebnou krajinu pozadí Nikolai Ultang z Pexels. Můžeš Stáhněte si ho zde . Uložte tento (nebo vlastní obrázek) uvnitř složky IMG. Vykreslení stránky pro zobrazení změn pozadí.

 Tělo, HTML {
  Obrázek na pozadí: URL (bg.jpg);
  Velikost na pozadí: kryt;
  Polstrování: 0;
  marže: 0;
  šířka: 100%;
  výška: 100%;
  Přetečení: skryté;
}

06. Styl text

Text je pak stylizován tak, aby vykreslen ve středu stránky, protože se právě zobrazí v levém horním rohu. Všimněte si, že pro centralizaci textu vybereme absolutní pozici a nastavíme přesné umístění pomocí horní, levé a pravé okraje. Text je také transformován pomocí vlastnosti Text-Transform. Vlastnost Text-ALIGN je také nastavena na Centrum.

 Text {
  Font-family: století gotika, sans-serif;
  Barva: #fff;
  Textová transformace: velká;
  Velikost písma: 50px;
  Font-Hmotnost: odvážnější;
  Pozice: absolutní;
  top: 50px;
 vlevo: 25%;
 vpravo: 30%;
  Text-ALIGN: CENTER;
     }

07. Instalace mo.js.

Stejně jako u jiných knihoven je Mo.js instalován přes více možností. Nejjednodušší přístup, který zaměstnáváme, přistupuje k němu přímo z CDN Serveru. Do sekce těla přidejte následující kód.

 & lt; skript src = '//cdn.jsdelivr.net
MOJS / 0,265,6 / mo.min.js '& gt; & lt; / script & gt; 

V případě, že vyvíjíte čáry FF, může být knihovna Staženo přímo z GitHub a instalovány pomocí balíčků BOWER nebo NPM pomocí příslušných příkazů.

 BOWER INSTALACE MO-JS
NPM Instalovat mo-js

Jakmile je stažen, může být odkazováno přímo.

 & lt; skript src = "mo.js" type = "text
JavaScript "& gt; / script & gt;

Nakonec vytvořit nový soubor Script.js a uložte jej ve složce JS. Do tohoto souboru přidáme funkce JavaScriptu. Spojte jej v části těla následovně. Umístěte jej pod textový název podle obrázku níže.

 & lt; tělo & gt;
& lt; dig class = "text" & gt;
& lt; p & gt; Mo.js animace & lt; / p & gt;
& lt; / div & gt;
   & lt; skript src = 'https: //cdn.jsdelivr
NET / MOJS / 0,265,6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; scénář src = "js / script.js" & gt; <
Script & Gt;
& lt; / tělo & gt;

08. Vytvořte první výbuch

Než pokračujete v rozvoji kódu, je moudré zdůraznit, co vytváříme. Pro výbuch něco jednoduše znamená rozbít do menších bitů výbušným způsobem. Budeme vytvářet jednoduchý objekt (kruh) a nastavit jej hledat, že když uživatel klikne, rozbije se výbušným způsobem.

09. Vytvořte objekt kruhu

Nejprve je vytvořen objekt, který má být odstráněn (kruh). Nicméně, Mo.JS podporuje jiné tvary, včetně obdélníku (Rect), kříž, rovný, cikcak a mnohoúhelník. Tam, kde se nepodaří zadat typ tvaru, bude výchozí na Circle.To vytvořit jednoduchý kruh, deklarovat jej pomocí VAR nebo CONST a přiřadit své atributy voláním funkce tvaru.

 // Vytvoření jednoduchého objektu
CONST CIRC = NOVÝ MOJS.SHAPE ({
  IsShowstart: TRUE,
             Poloměr: 100,
});

Kód vytvoří výchozí objekt kruhu s daným poloměrem. Proměnná ISShowStart je přiřazena booleovskou hodnotu, která určuje, zda je třeba zobrazit objekt nebo ne. Vykreslte kód pro zobrazení malého purpurového barevného kruhu ve středu stránky.

10. Animujte kruh

Úryvek kódu určuje, že měřítko a krytí se změní od 1 do 0, což znamená, že objekt zmizí. Vybrojení a zpoždění animace jsou také nastaveny. Všimněte si, že animace nehraje, protože jsme ji ještě inicializovat. Chcete-li tak učinit, přidejte níže uvedenou funkci.

 Document.AddeventListener ('Click', funkce
e) {
CIRC.
 Přehrát ( );
}); 

11. Make explodující mnohoúhelníky

Teď, když kruh je animován, vytváříme výbuch animaci, která vykreslí zároveň. První výbuch používá tvary mnohoúhelníku, aby vytáhl výbuch. Chcete-li vytvořit výbuch, použijte funkci Mo.js Burst, jak je znázorněno na flippetu kódu níže.

 CONST BUST1 = NEW MOJS.BURST ({
  vlevo: 0, top: 0,
  počet: 7,
  Poloměr: {50: 250},
  Děti: {
    Vyplňte: 'White',
    Tvar: 'polygon',
    mrtvice: {'bílá': '# A50710'},
    tothwidth: 4,
    Poloměr: 'Rand (30, 60)',
    Radiusy: 0,
    Měřítko: {1: 0},
    PathScale: 'Rand (.5, 1)',
    stupeň: 360,
    ISFORCE3D: TRUE}});

Kód přiřazuje sedm polygonových tvarů do výbuchu a určuje dva poloměry. První odkazuje na celkovou animaci, zatímco druhý se zaměřuje na konkrétní polygonové objekty v animaci. Ujistěte se, že přidáte funkci posluchače událostí tak, aby reagoval na kliknutí myši. Všimněte si, že byly přidány dva nové parametry; naladit a generovat. Tune činí výbuch k kdekoli na stránce, zatímco generování inicializuje animaci roztržení. Vykreslení stránky. Dodržujte vybuchující prvky, které se zobrazují ve stejnou dobu jako kruh.

 Document.AddeventListener ('Click', funkce
e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.Pagey}).
  generovat ().
 Přehrát ();
CIRC.
 Přehrát ( );
});

12. Vytvořte druhý výbuch

Dále vytváříme druhý výbuch pomocí různých možností tvaru. Kód navazuje na strukturu předchozího výbuchu a mění pouze několik parametrů.

 CONST BUST2 = NEW MOJS.BURST ({
  top: 0, vlevo: 0,
  počet: 4,
  Poloměr: {0: 250},
Děti: {
    Tvar: ['Circle', 'Rect'],
    Body: 5,
    Vyplňte: ['Bílý'],
    Poloměr: 'Rand (30, 60)',
    zpoždění: 'stagger (50)',
    ZÍSKÁNÍ: ['CUBIC.OUT', 'CUBIC.OUT',
'Cubic.out'],
    Měřítko: {1: 0},
    PathScale: 'Rand (.5, 1)',
    ISFORCE3D: TRUE}});

Přidejte funkci posluchače události.

 Document.AddeventListener ('Click', funkce
e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.Pagey}).
  generovat ().
 Přehrát ();
             Burst2.
             TUNE ({X: E.PAGEX, Y: E.Pagey
}).
             generovat().
             Přehrát();
CIRC.
 Přehrát ( );
});

13. Přidat kruhové výbuchy

Za účelem zvýšení animace přidáváme kruhové výbuchy. Zkoumání kódu v krocích 11 a 12 odhaluje mnoho podobností existujících mezi oběma typy výbuchů. Při vytváření třetího výbuchu se vyhýbáme přepisování příliš mnoho kodexu pomocí provozovatele rozšíření, který je napsán jako tři tečky (...). Nejprve však deklarujeme proměnnou, která obsahuje podobné funkce, které chceme znovu použít. Poté mohou být další dva kruhy vytvořeny jednoduše pomocí provozovatele rozšíření.

 // vytvoření proměnné s podobným
parametry
    CONST CRECT_OPTS = {
  vlevo: 0, top: 0,
   Vyplňte: 'White',
  Měřítko: {.2: 1},
  Opacita: {1: 0},
  ISFORCE3D: TRUE,
  ISShowend: False
};

Kód Určuje typ výplně, měřítko, opacity a zda je zobrazit na konci animace. Oba kruhové animace jsou vytvořeny následovně.

 CONST CIRECK1 = NEW MOJS.SHAPS ({
  ... Circle_opts,
  Poloměr: 200});
CONST CIRECT2 = NEW MOJS.SHAPE ({
  ... Circle_opts,
  Poloměr: 240,
  Označení: 'Cubic.Out',
  zpoždění: 300});

Přidejte kruhové tvary.

 Document.AddeventListener ('Click', funkce
e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.Pagey}).
  generovat ().
 Přehrát ();
             Burst2.
             TUNE ({X: E.PAGEX, Y: E.Pagey
}).
             generovat().
             Přehrát();
CIRC.
 Přehrát ( );
});

14. Vykreslte základní bublinu

Na rozdíl od animace výbuchu, který rozbije objekt na menší kousky, bublina animace na druhé straně překládá klikovaný objekt do většího prostoru. Koncept přijímá analogii foukání balónu, kde objekt neustále rozšiřuje velikost. K tomu jednoduše vytvoříme nové proměnné Openbackground a přiřadit atributy, které budou celé pozadí dosáhnout podobné barvy k objektu. V důsledku toho to vytváří nuance bublajícího.

 CONST OpenBackground = Nový MOJS.SHAPE ({
  Vyplňte: '# fc2d79',
  vlevo: 0, top: 0,
  Měřítko: {0: 4.5},
  IsShowstart: TRUE,
  Poloměr: 15,
  ISFORCE3D: TRUE,
  istimeliceless: true,
Zpoždění: 150,
  Poloměr: 200,
  Označení: 'Cubic.Out',
  Zařízení: "Expo.in",});

Zkontrolujte, zda chcete přidat proměnnou pozadí do funkce posluchače událostí.

 Openbackground.
  TUNE ({X: E.PAGEX, Y: E.Pagey}).
  Přehrávání (); 

15. Přidejte více tvarů

Následovat koncept v kroku 14, nyní předvádíme příklad, abychom zahrnuli více barevných kruhových objektů, které při klepnutí na kliknutí se extrahuje podobným způsobem a zobrazte nějaký text. Upravte existující soubor HTML a zkopírujte kód v rámci těla. Vytvoří základní strukturu stránky.

16. Přidání pomocných knihoven

Dále jsou v části těla přidány některé další knihovny, aby se usnadnilo posouvání a vytvářet zvuky, když jsou objekty kliknutí.

& lt; skript src = 'https: //cdnjs.cloudflare.com
Ajax / LIBS / Howler / 1.1.26 / Howler.min.js '& gt;
Script & Gt;
& lt; skript src = 'https: //cdn.jsdelivr.net
MOJS / 0,119,0 / mo.min.js '& gt; & lt; / script & gt;
& lt; skript src = 'https: //cdn.jsdelivr.net
Hammerjs / 2.0.4 / Hammer.min.js '& gt; & lt; / script & gt;
& lt; skript src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / ISCROLL / 5.1.1 / ISCROLL-PROBE.MIN
JS '& Gt;
& lt; / script & gt;

17. Procout animace

Dále přidáme styly pro jednotlivé třídy zvýrazněné v souborech HTML. Funkce mo.js je pak přidána. Úplný kód (CSS a JS) je sdílen s výukovými soubory pro recenzi.

18. Další informace o mo.js

Zatímco tutoriál demonstruje techniky bublin a výbuchu, existují další zdroje dostupné online, které vám mohou pomoci rychle sledovat váš proces učení. Některé z nich zahrnují Mo.js Výukové programy na GitHub a Demos také na GitHub .

Tento článek byl původně publikován v čísle 291 časopisu Creative Web Design Web Designer. . Prodám vydání 291. .

Přečtěte si více:

• CSS Art je brilantně zničeno starými prohlížeči
• Nejlepší kusy uživatelského testování softwaru
• Skvělé UI Designs.