Sådan animerer man Mo.js Library

Mo.js er et unikt motion grafik JavaScript-bibliotek, der ikke kun letter fuldskærms-animations læssere, men også klik-til-animerede mikrointeraktioner og tonsvis af form manipulationer.

Hvis du har fulgt webdesign scene i et stykke tid nu, er chancerne for, at du vil komme på tværs af - eller måske interagere med - en bred vifte af animationsteknikker og biblioteker. Kernemeteknologier som CSS, HTML5 og JavaScript bliver endnu mere kraftfuld, og browserstøtte forbedres med tiden. Implikationen er, at mere sofistikerede web-animationer kan understøttes på tværs af enheder. Husk, hvis du bygger et komplekst websted, din Web Hosting. Tjenesten skal være i stand til at støtte dit projekt.

Har du brug for nogle animationsinspiration? Her er nogle fantastiske eksempler på toppen CSS animation. at genskabe. Vil du bygge et websted uden kodning? Prøv disse Website Builders. .

Hvordan kan mo.js hjælpe?

Web animation, som det ser ud, er her for at blive. Imidlertid er en mangel med mest populære animationsteknikker, at de er graviteret mod at animere konventionelle UI / UX-elementer, såsom diasshows, faneblade og rullemenuer. Som følge heraf kan du bruge dem til sidst gøre dit websted for kendt og ikke-spændende.

Mo.js kan hjælpe med dette. Brug af biblioteket hjælper med at animere de ikke-så almindelige webstedselementer ved at udnytte sine indbyggede komponenter som HTML, form, hvirvel, burst og forskuger. Biblioteket er meget nemt at bruge, hurtig, retina klar, modulær og open source. I denne tutorial indføres det grundlæggende ved at arbejde med MO.Js, og to teknikker demonstrerede; Blast og boble.

01. Kom godt i gang

Begynd ved at oprette en mappe, mo.js, på dit skrivebord for at gemme tutorialfilerne. Opret tre yderligere mapper inden for det: CSS for at gemme stylingfilerne, IMG for billeder og JS til JavaScript-filerne. HTML-filer gemmes i rodmappen. (Du vil måske overveje at sikkerhedskopiere med Sky lagring ).

02. Opret sidestruktur

Åbn din kode editor og opret et indeks.html-dokument for at indeholde mark op til hovedwebsiden. Begynd med at oprette den grundlæggende struktur og give en passende titel på siden.

 & lt;! DOCTYPE HTML & GT;
& lt; html lang = "da" & gt;
    & lt; hoved & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; titel & gt; blast teknik;
Titel & GT;
 & lt; / Head & GT;
& lt; body & gt; & lt; / body & gt;
& lt; / HTML & GT; 

03. Struktur siden

Tutorialen er opdelt i to dele; Den første demonstrerer blastteknikken, mens den anden illustrerer boblebegrebet. Som følge heraf forbereder vi to HTML-filer, en til hver teknik. For at kick-starte Blast Technique, skal du oprette en div sektion for at indeholde sidetitel. Giver siden i din browser, hvor du skal observere UN-stylet tekst øverst til venstre.

 & lt; body & gt;
      & lt; div class = "text" & gt;
& lt; p & gt; Mo.js animation & lt; / p & gt;
     & lt; / div & gt;
& lt; / body & gt;

04. Link CSS

Åbn din kode editor og opret stilarter.css fil inde i CSS-mappen. Opret et link til denne fil i dit HTML-dokument ved at tilføje denne kode i hovedsektionen, & lt; link rel = "stylesheet" href = "CSS / Styles.css" & gt; . Da der ikke er tilføjet nogen stilarter, gør siden som vist i trin 3. Alternativt, da stylingen er minimal, kan du vælge at bruge inline-styling ved at kombinere HTML- og CSS.

05. Stil baggrunden

Derefter stiver vi baggrunden ved at tilføje et baggrundsbillede. Vi har brugt det gratis naturskønne landskabs baggrund af Nikolai Ultang fra Pexels. Du kan Download det her . Gem dette (eller dit eget billede) inde i IMG-mappen. Gør siden for at vise ændringer i baggrunden.

 Krop, HTML {
  Baggrundsbillede: url (bg.jpg);
  Baggrundsstørrelse: Dæk;
  Padding: 0;
  Margin: 0;
  Bredde: 100%;
  Højde: 100%;
  Overløb: Skjult;
}

06. Style teksten

Teksten styles derefter til at gøre i midten af ​​siden, da den i øjeblikket vises øverst til venstre. Bemærk, at for at centralisere teksten, vælger vi en absolut position og sætter sin nøjagtige positionering ved hjælp af top-, venstre og højre margener. Teksten omdannes også ved hjælp af tekst-transformationsegenskaben. Tekstjusteringsegenskaben er også sat til centrum.

 Tekst {
  Font-Family: Century Gothic, Sans-Serif;
  Farve: #fff;
  Tekst-transformation: store bogstaver;
  Font-størrelse: 50px;
  Font-Vægt: Bolder;
  position: absolut;
  Top: 50px;
 Venstre: 25%;
 Højre: 30%;
  Tekst-Align: Center;
     }

07. Installer mo.js.

Som med andre biblioteker installeres mo.js via flere muligheder. Den enkleste tilgang, som vi anvender, har adgang til den direkte fra en CDN-server. Tilføj følgende kode i kroppen.

 & lt; script src = '//cdn.jsdelivr.net
mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; 

I tilfælde af at du udvikler o FF-linje, kan biblioteket være Downloadet direkte fra GitHub og installeret ved hjælp af Bower eller NPM-pakkerne ved at bruge de relevante kommandoer.

 Bower Installer MO-JS
NPM installerer MO-JS

Når den er downloadet, kan det refereres direkte.

 & lt; script src = "mo.js" type = "tekst
javascript "& gt; & lt; / script & gt;

Endelig oprette en ny script.js-fil og gem det i JS-mappen. Vi vil tilføje JavaScript-funktionalitet til denne fil. Link det i kroppsektionen som følger. Placer det under teksttitel som vist nedenfor.

 & lt; body & gt;
& lt; div class = "text" & gt;
& lt; p & gt; mo.js animation & lt; / p & gt;
& lt; / div & gt;
   & lt; script src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; script src = "js / script.js" & gt; & lt;
script & gt;
& lt; / body & gt;

08. Opret den første blast

Før du fortsætter med at udvikle koden, er det klogt at fremhæve, hvad vi skaber. For at sprænge noget betyder simpelthen at bryde det fra hinanden i mindre bits på en eksplosiv måde. Vi vil oprette et simpelt objekt (cirkel) og sætte det op søgning, at når en bruger klikker det, går det fra hinanden på en eksplosiv måde.

09. Opret cirkelobjektet

For det første er det objekt, der skal blæstes, oprettes (cirkel). Mo.js støtter imidlertid andre former, herunder rektangel (RECT), Cross, Lige, Zigzag og Polygon. Hvor du undlader at angive formstypen, vil den standard til en cirkel. For at oprette en simpel cirkel, erklære den ved hjælp af Var eller Const og tildele dens attributter ved at kalde formfunktionen.

 // Oprettelse af et simpelt objekt
Const Circ = New Mojs.Shape ({
  isshowstart: sandt,
             RADIUS: 100,
});

Koden opretter standardcirkelobjektet med den givne radius. ISSHOWSTART Variablen er tildelt en boolsk værdi for at angive, om du skal vise objektet eller ej. Gør koden for at vise en lille magenta-farvet cirkel i midten af ​​siden.

10. Animere cirklen

Kodeklippet angiver, at skalaen og opaciteten ændres fra 1 til 0, hvilket indikerer, at objektet forsvinder. Aduration og forsinkelse af animationen er også indstillet. Bemærk, at animationen ikke spiller, da vi endnu ikke skal initialisere det. For at gøre det skal du tilføje funktionen nedenfor.

 DOCUMENT.ADDEVENTLISTENER ('Klik', funktion
(e) {
CIRC.
 replay ();
}); 

11. Gør eksploderende polygoner

Nu hvor cirklen er animerende, skaber vi en blast animation, der gør det på samme tid. Den første blast anvender polygonformerne for at tegne eksplosionen. For at oprette en blast skal du bruge MO.JS-funktionen burst som vist i kodesnippet nedenfor.

 Const Burst1 = Ny Mojs.burst ({
  Venstre: 0, Top: 0,
  Tæl: 7,
  RADIUS: {50: 250},
  Børn: {
    Fyld: 'White',
    form: 'polygon',
    Stroke: {'White': '# A50710'},
    Strokewidth: 4,
    RADIUS: 'RAND (30, 60)',
    Radiusy: 0,
    Skala: {1: 0},
    Pathscale: 'rand (.5, 1)',
    Grad: 360,
    isforce3d: true}});

Koden tildeler syv polygonformer til eksplosionen og specificerer to radii. Den første refererer til den overordnede animation, mens den anden fokuserer på de specifikke polygonobjekter i animationen. Sørg for at tilføje brast til begivenhedens lytterfunktion, så den reagerer på museklik. Bemærk, at to nye parametre er blevet tilføjet; melodien og generere. Tune gør blast til at gøre overalt på siden, mens generere initialiser burst animationen. Gør siden. Overhold de eksploderende elementer, der vises på samme tid som cirklen.

 DOCUMENT.ADDEVENTLISTENER ('Klik', funktion
(e) {
             Burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
CIRC.
 replay ();
});

12. Opret den anden blast

Derefter opretter vi den anden blast ved at bruge forskellige formindstillinger. Koden følger strukturen af ​​den tidligere blast og ændrer kun nogle parametre.

 Const Burst2 = Ny Mojs.burst ({
  Top: 0, Venstre: 0,
  Tæl: 4,
  RADIUS: {0: 250},
Børn: {
    Form: ['cirkel', 'rile'],
    Point: 5,
    Udfyld: ['hvid'],
    RADIUS: 'RAND (30, 60)',
    Forsinkelse: 'Stagger (50)',
    lempelse: ['cubic.out', 'cubic.out',
'Cubic.out'],
    Skala: {1: 0},
    Pathscale: 'rand (.5, 1)',
    isforce3d: true}});

Tilføj burst til begivenhedens lytterfunktion.

 DOCUMENT.ADDEVENTLISTENER ('Klik', funktion
(e) {
             Burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
             Burst2.
             tune ({x: e.pagex, y: e.pagey
}).
             frembringe().
             replay ();
CIRC.
 replay ();
});

13. Tilføj cirkel eksplosioner

For at forbedre animationen yderligere tilføjer vi cirkulære eksplosioner. Undersøgelsen af ​​koden i trin 11 og 12 viser mange ligheder mellem de to typer af udbrud. Ved at skabe den tredje blast, undgår vi at omskrive for meget kode ved at bruge spreadoperatøren, som er skrevet som tre prikker (...). Men først erklærer vi en variabel, der indeholder de tilsvarende funktioner, som vi ønsker at genbruge. Derefter kan de to andre cirkler oprettes ved blot at bruge spreadoperatøren.

 // Oprettelse af variablen med lignende
parametre.
    const circle_opts = {
  Venstre: 0, Top: 0,
   Fyld: 'White',
  Skala: {.2: 1},
  Opacitet: {1: 0},
  isforce3d: true,
  isshowend: falsk
};

Koden angiver fyldstypen, skalaen, opaciteten og om at vise dem i slutningen af ​​animationen. De to cirkel animationer er skabt som følger.

 Conns Circle1 = Ny Mojs.Shape ({
  ... Circle_opts,
  RADIUS: 200});
Const Circle2 = Ny Mojs.Shape ({
  ... Circle_opts,
  RADIUS: 240,
  lempelse: 'cubic.out',
  forsinkelse: 300});

Tilsæt de cirkulære former.

 DOCUMENT.ADDEVENTLISTENER ('Klik', funktion
(e) {
             Burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
             Burst2.
             tune ({x: e.pagex, y: e.pagey
}).
             frembringe().
             replay ();
CIRC.
 replay ();
});

14. Giver en grundlæggende boble

I modsætning til blast animationen, som bryder objektet i mindre stykker, boble animationen på den anden side, oversætter det klikede objekt til et større rum. Konceptet vedtager analogien om at sprænge en ballon, hvor objektet løbende udvider i størrelse. For at gøre dette skaber vi simpelthen en ny variabel openbackground og tildeler attributter, der vil gøre hele baggrunden opnå en lignende farve til objektet. Som et resultat skaber dette nuansen af ​​boblende.

 Const OpenBackground = Ny mojs.Shape ({
  Udfyld: '# FC2D79',
  Venstre: 0, Top: 0,
  Skala: {0: 4.5},
  isshowstart: sandt,
  RADIUS: 15,
  isforce3d: true,
  Istimelineless: TRUE,
forsinkelse: 150,
  RADIUS: 200,
  lempelse: 'cubic.out',
  tilbagevendende: 'expo.in',});

Sørg for at tilføje baggrundsvariablen til begivenhedens lytterfunktion.

 OpenBackground.
  tune ({x: e.pagex, y: e.pagey}).
  Replay (); 

15. Tilføj flere former

Efter konceptet i trin 14 fremmer vi nu eksemplet for at inkludere flere farvede cirkulære objekter, som ved at klikke på Expand på en lignende måde og vise nogle tekst. Rediger den eksisterende HTML-fil og kopier koden i kroppen. Det skaber den grundlæggende struktur på siden.

16. Tilføj hjælperbiblioteker

Dernæst tilføjes nogle yderligere biblioteker i kroppsektionen for at lette rulning og producere lyde, når objekterne klikkes.

& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / Libs / Howler / 1.1.26 / Howler.min.js '& GT; & lt;
script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
mojs / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
Hammerjs / 2.0.4 / hammer.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / ISCROLL / 5.1.1 / ISCROLL-PROBE.MIN
JS '& GT;
& lt; / script & gt;

17. Advance animationen

Dernæst tilføjer vi stilarter for de enkelte klasser fremhævet i HTML-filerne. MO.JS-funktionaliteten tilsættes derefter. Den fulde kode (CSS og JS) deles med vejledningsfilerne til gennemgang.

18. Lær mere om mo.js

Mens vejledningen viser boble- og blastteknikkerne, er der yderligere tilgængelige ressourcer online, der kan hjælpe dig med at spore din læringsproces. Nogle af disse omfatter mo.js tutorials på github og Demoer også på GitHub .

Denne artikel blev oprindeligt offentliggjort i udstedelse 291 af Creative Web Design Magazine Webdesigner . Køb problem 291. .

Læs mere:

• CSS kunst bliver briljant ødelagt af gamle browsere
• Bedste stykker af brugertestsoftware
• Great UI designs.