anime.js: Detaillierte Erl?uterung der leichten JavaScript -Animationsbibliothek

anime.js ist eine hervorragende JavaScript -Animationsbibliothek, die für ihre Benutzerfreundlichkeit, pr?gnante API und leistungsstarke Funktionen bekannt ist. Es ist kompakt und kompatibel mit allen modernen Browsern, einschlie?lich IE/Edge 11. Obwohl die Dokumentation pr?zise ist, ist seine Struktur klar und leicht zu beginnen. In diesem Artikel wird ausführlich erkl?rt, wie man ihn verwendet.

Kernpunkte:

• anime.js ist eine leichte, benutzerfreundliche JavaScript-Animationsbibliothek, die CSS-Eigenschaften, SVG, DOM-Eigenschaften und JavaScript-Objekte unterstützt und es für eine Vielzahl von Webanimationsprojekten kompetent macht.
• Verwenden Sie Anime.js, importieren Sie einfach über Skript -Tags aus dem CDN oder laden Sie die Bibliotheksdatei direkt herunter und definieren Sie dann die Ziele und Eigenschaften in der Funktion anime(), um die Animation zu erstellen.
Die leistungsstarke Timeline -Funktion von
• anime.js erm?glicht es, mehrere Animationen zu synchronisieren, was für komplexe Animationssequenzen besonders wichtig ist.
• Diese Bibliothek verwendet Keyframes und Interlacing -Effekte, um Animationsdetails und Steuerung zu verbessern und Entwicklern Tools zu bieten, um dynamische und visuell ansprechende Webanimationen zu erstellen.
• Um interaktivere und reaktionsschnelle Animationen zu erstellen, kann Anime.js in Ereignish?rer integriert werden, um Animationen basierend auf Benutzeraktionen (z. B. Klicks oder Mausbewegungen) auszul?sen, wodurch das Engagement der Benutzer auf der Webseite verbessert wird.

Anf?nger von Anime.js:

Laden Sie zuerst die Anime.js -Datei herunter und geben Sie in Ihre HTML -Seite ein:

<!-- 下載后引入 -->
<??>

oder verwenden Sie die neueste Version auf CDN:

<!-- 使用CDN -->
<??>

Erstellen Sie eine Animation, verwenden Sie die Funktion anime(), die ein Objekt als Parameter akzeptiert und alle Animationsdetails in diesem Objekt beschreibt:

let myAnimation = anime({
  /* 動(dòng)畫(huà)細(xì)節(jié) */
});

• Ziele: Elementverweis auf Animation. Es kann sich um einen CSS -Selektor (Div, #Square, .Rectangle), ein DOM -Knoten oder eine Liste von Knoten oder ein reines JavaScript -Objekt sein. Es kann auch eine Kombination von Arrays der oben genannten Typen sein.
• Eigenschaften: Eigenschaften, die animiert werden k?nnen, einschlie?lich CSS -Attributen, Attributen von JavaScript -Objekten, DOM -Attributen und SVG -Attributen.
• Eigenschaftsparameter: Parameter im Zusammenhang mit Eigenschaften wie Dauer, Verz?gerung, Lockerungsfunktionen usw.
• Animationsparameter: Parameter in Bezug auf Animation wie Richtung, Schleife usw.

let animation = anime({
  targets: 'div', // 目標(biāo)
  translateX: 100, // 屬性
  borderRadius: 50, // 屬性
  duration: 2000, // 屬性參數(shù)：持續(xù)時(shí)間 2 秒
  easing: 'linear', // 屬性參數(shù)：線性緩動(dòng)
  direction: 'alternate' // 動(dòng)畫(huà)參數(shù)：交替方向
});

1. Wir w?hlen ein grünes Quadrat (stilisierter Div).
2. Wir bewegen es 100 Pixel nach links, w?hrend wir es in einen Kreis umwandeln.
3. Wir haben dies in zwei Sekunden reibungslos eingestellt (linear bedeutet, dass die Animation keine Lockerung angewendet wird).
4. Indem wir die Richtungseigenschaft so einstellen, dass wir das DIV -Element anweisen, seine Anfangsposition und -form nach Abschluss der Animation zurückzugeben. Anime.js tut dies, indem es Animationen umgekehrt abspielt.

Bitte beachten Sie, dass wir beim Angeben von Eigenschaftswerten keine Einheiten verwenden müssen. Wenn der ursprüngliche Wert Einheiten hat, wird er automatisch zum Animationswert hinzugefügt. Wenn Sie jedoch ein bestimmtes Ger?t verwenden m?chten, müssen Sie es explizit hinzufügen.

komplexere Animation:

Folgende Animationsbeispiele, einschlie?lich Swing-Animation, batteriebetontem Animation und Animationen mit Keyframes und Timelines. (Die CodePen -Beispiel -Links und entsprechenden Codeausschnitte werden hier enthalten und der Code wird ausführlich erl?utert, ?hnlich der Struktur des Originaldokuments)

Schlussfolgerung:

anime.js ist eine einfache und leistungsstarke Animations -Engine, mit der eine Vielzahl von Animationen erstellt werden k?nnen. Ich hoffe, dieser Artikel kann Ihnen helfen, Anime.js besser zu verstehen und zu verwenden. (Sie k?nnen hier einige zus?tzliche Informationen über die zukünftige Entwicklung von Anime.js oder verwandten Ressourcen hinzufügen)

Das obige ist der detaillierte Inhalt vonErste Schritte mit Anime.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!