👩🏿‍🤝‍👨🏻 🤺 👨‍👨‍👧‍👧 Mit Anime.js realisieren wir einen interessanten Effekt 👳🏿 👌🏼 ✈️

Guten Tag, Freunde!

In diesem Artikel werden wir, wie der Name schon sagt, einen interessanten Effekt mithilfe einer interessanten Bibliothek ( anime.js ) implementieren . Ich werde diese Bibliothek nicht loben, aber diejenigen, die mit Animation beschäftigt sind, sollten auf jeden Fall darauf achten. Einfache Oberfläche + exzellente Dokumentation, was braucht man sonst noch für Kreativität?

Basierend auf den Materialien dieses wunderbaren Artikels.

Der Autor dieses Artikels nannte seinen Effekt "Partikel-Trail-Animation".

Wir werden den Code aus dem Artikel nehmen, ihn detailliert analysieren und ein wenig verbessern.

Machen Sie zuerst die Partikel bunt. Weil eine Farbe langweilig ist.

Zweitens wird die Animation durch Klicken gestartet. Weil endlose Animationen nerven.

Drittens befestigen wir die Mitte der Animation (Spirale) an der Stelle des Klicks. Weil die Benutzererfahrung an erster Stelle steht.

Wir werden keine Leinwand verwenden. Viele kleine Blöcke (Divs) werden animiert.

Also, lass uns gehen (wie Gagarin sagte, ins All gehen).

Woraus besteht unser HTML? Darin verbinden wir die Bibliothek, unser Skript und tatsächlich alles.

Die Stile sind auch kaum beeindruckend:

body {
    margin: 0;
    background: #333;
    overflow: hidden;
}

/*   */
.dot {
    position: absolute;
    /*   */
    border-radius: 50%;
}

Gib JavaScript! Wie du möchtest.

Wir verpacken unseren gesamten Code in einen Click-Event-Handler des Window-Objekts:

window.addEventListener('click', event => {  ... })

Erstellen Sie einen Container für Partikel mit der Klasse "box":

let box = document.createElement('div')
box.classList.add('box')
document.body.appendChild(box)

Wir bestimmen einige Werte (keine magischen Zahlen, keine Sorge, sei glücklich):

//     
let n = 10

//   
//     
let a = 20

//  
//      
let l = 110

Wir erzeugen Partikel mit zwei for-Schleifen:

for (let i = 0; i <= l; i++) {
    //  
    let angle = 0.1 * i

    //     
    let x = (a * angle) * Math.cos(angle) + event.clientX
    let y = (a * angle) * Math.sin(angle) + event.clientY

    //  n    
    for (let j = 0; j < n; j++) {
        //     "dot"
        let dot = document.createElement('div')
        dot.classList.add('dot')
        box.appendChild(dot)

        //       "anime.random()"
        //    
        //   
        let size = anime.random(5, 10)

        //  
        //   "style"
        dot.setAttribute('style',
        //    ()  
        //  
        `width: ${size}px; height: ${size}px;

        //    anime.random()
        top: ${y + anime.random(-15, 15)}px; left: ${x + anime.random(-15, 15)}px;

        //      
        opacity: 0;

        //        
        background: #${     }`)
    }
}

Die Funktion zum Erhalten einer beliebigen Farbe kann folgendermaßen aussehen:

function getRandomColor() {
    let letters = '0123456789abcdef',
        color = '#'
    for (let i = 0; i < 6; i++) {
        color += letters[Math.trunc(Math.random() * 16)]
    }
    return color
}

Aber wir suchen nicht nach einfachen Wegen, also wird es so aussehen:

(Math.random()*0xffffff<<0).toString(16)

Es wird eine bitweise Verschiebung nach links verwendet und in eine hexadezimale Zeichenfolge umgewandelt.

Als nächstes werden die von uns erstellten Partikel mit Anime animiert:

anime({
    //  
    targets: document.querySelectorAll('.dot'),
    // 
    loop: false,
    //   
    //     ()
    easing: 'linear',

    //  
    // 
    //    
    opacity: [
        {
            value: 1,
            // 
            duration: 50,
            // 
            delay: anime.stagger(2)
        },
        {
            value: 0,
            duration: 1200
        }
    ],

    //   ()
    // 
    width: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },
    // 
    height: {
        value: 2,
        duration: 500,
        delay: anime.stagger(2)
    },

    //  
    //    
    translateX: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    },
    //    y
    translateY: {
        value: () => anime.random(-30, 30),
        duration: 1500,
        delay: anime.stagger(2)
    }
})

Zu guter Letzt fügen Sie am Anfang die Prüfung auf das Vorhandensein eines Kästchens hinzu:

if (document.querySelector(".box")) {
    document.body.removeChild(document.querySelector(".box"));
  }

Ergebnis:

GitHub- Code .

Das war's Leute! Vielen Dank für Ihre Aufmerksamkeit.

Mit Anime.js realisieren wir einen interessanten Effekt

More articles: