Die Webanimation mit Lottie: Best Practices für die Optimierung

lottie-web ist eine Bibliothek, die es Ihnen ermöglicht, Lottie-Animationen einfach in einer Webanwendung zu verwenden. Lottie ist eine Bibliothek, die Adobe After Effects-Animationen analysiert und sie nativ auf mobilen und Web-Plattformen rendert. Durch die Verwendung von lottie-web können Sie Lottie-Animationen mit nur wenigen Codezeilen in Ihre Webanwendung einbinden.

Installieren Sie Lottie-Web in Ihrem Projekt, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm install lottie-web

Sobald lottie-web installiert ist, kannst du es in deinen JavaScript-Code importieren und die loadAnimation-Funktion verwenden, um eine Animation zu laden. Hier ist ein Beispiel, wie du lottie-web in einer Webanwendung verwenden könntest:

importiere lottie von 'lottie-web';

lottie.loadAnimation({
    container: document.getElementById('animation-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/pfad/zur/animation.json',
});

In diesem Beispiel wird die Funktion loadAnimation mit einem Options-Objekt übergeben, das eine container-Eigenschaft enthält, die das DOM-Element angibt, in dem die Animation gerendert wird, eine renderer-Eigenschaft, die den Renderer angibt, der verwendet werden soll (entweder svg oder canvas), und eine path-Eigenschaft, die auf eine JSON-Datei verweist, die die Animationsdaten enthält. Die Eigenschaften loop und autoplay steuern die Wiedergabe der Animation.

Wenn Sie zuvor das Lottie-Komponente von lottie-react verwendet haben, müssen Sie es durch das DOM-Element ersetzen, das die Animation enthalten wird. Zum Beispiel könnten Sie ein div-Element wie folgt verwenden:

import React from 'react';

const MyComponent = () => {
    return (
        <div id="animation-container" />
    );
};

Du kannst dann die Funktion lottie.loadAnimation verwenden, um die Animation in den Lebenszyklusmethoden des Komponenten zu laden, wie z.B. componentDidMount oder useEffect. Hier ist ein Beispiel, wie du das machen könntest:

import React, { useEffect } from 'react';
import lottie from 'lottie-web';

const MyComponent = () => {
    useEffect(() => {
        lottie.loadAnimation({
            container: document.getElementById('animation-container'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/path/to/animation.json',
        });
    }, []);

    return (
        <div id="animation-container” />
    );
};

Optimierung von Lottie-React

Hier sind ein paar Tipps zur Optimierung der Verwendung von Lottie-React in einer Next.js-Anwendung:

• Verwenden Sie den useEffect-Hook, um das Rendern der Animation zu steuern: Sie können den useEffect-Hook verwenden, um zu steuern, wann die Animation gerendert wird und wann sie zerstört wird. Dies kann dazu beitragen, die Menge an unnötigem Rendern zu reduzieren, das auftritt.

• Verwenden Sie das useMemo-Hook, um das Rendern der Animation zu optimieren: Sie können das useMemo-Hook verwenden, um das Rendern der Animation zu optimieren, indem Sie es nur neu rendern, wenn sich die Animationsdaten oder Optionen ändern.

• Verwenden Sie das useLazyLottie Hook: Das useLazyLottie Hook ermöglicht es Ihnen, eine Lottie-Animation verzögert zu laden und ihre Darstellung mit einer einfachen Hook-API zu steuern. Dies kann eine praktische Möglichkeit sein, um die Leistung Ihrer Lottie-Animationen in einer Next.js-Anwendung zu optimieren.

Verwenden Sie den useEffect-Hook, um das Rendern der Animation zu steuern.

Das useEffect-Hook ist eine Funktion der React-Bibliothek, die es ermöglicht, Nebeneffekte in einer funktionalen Komponente auszuführen. Du kannst das useEffect-Hook verwenden, um die Darstellung einer Lottie-Animation zu steuern, indem du es verwendest, um die Animation bei Bedarf zu laden und zu entladen.

Um den useEffect-Hook zur Steuerung der Darstellung einer Lottie-Animation zu verwenden, müssen Sie den useEffect-Hook aus React importieren und ihn verwenden, um eine Funktion zu definieren, die die Animation lädt und entlädt. Hier ist ein Beispiel, wie Sie dies in einem Lottie-Web-Komponenten tun könnten:

import React, {useRef, useEffect} from 'react';
import lottie from 'lottie-web';

const MyComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const animation = lottie.loadAnimation({
            container: document.getElementById('animation-container'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/path/to/animation.json',
        });

        return () => {
            animation.destroy();
        };
    }, []);

    return (
        <div id="animation-container" />
    );
};

In diesem Beispiel wird das useEffect-Hook verwendet, um eine Funktion zu definieren, die die Lottie-Animation lädt, wenn das Komponente montiert wird. Die Funktion gibt eine Aufräumfunktion zurück, die aufgerufen wird, wenn das Komponente demontiert wird und die Animation zerstört. Dies stellt sicher, dass die Animation nur geladen und gerendert wird, wenn sie benötigt wird, was dazu beitragen kann, die Leistung Ihrer Anwendung zu verbessern.

Verwenden Sie eine veränderbare Referenz auf den Container.

Um ein Ref zu verwenden, um das Container-Element für eine Lottie-Animation in der lottie-web-Bibliothek zu referenzieren, müssen Sie ein Ref mit dem useRef-Hook erstellen und es als Container-Option an die loadAnimation-Funktion übergeben. Hier ist ein Beispiel, wie Sie dies in einem React-Komponenten tun könnten:

import React, {useRef, useEffect} from 'react';
import lottie from 'lottie-web';

const MyComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const animation = lottie.loadAnimation({
            container: containerRef.current,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/path/to/animation.json',
        });

        return () => {
            animation.destroy();
        };
    }, []);

    return (
        <div ref={containerRef} />
    );
};

In diesem Beispiel wird der useRef-Hook verwendet, um eine veränderliche Referenz auf das Container-Element zu erstellen, die in der Variablen containerRef gespeichert ist. Die Ref wird als ref-Prop an das div-Element übergeben, was es ermöglicht, darauf im Code des Components zu verweisen. Der useEffect-Hook wird verwendet, um eine Funktion zu definieren, die die Lottie-Animation lädt, wenn der Component montiert wird. Die Funktion verwendet die Variable containerRef als Container-Option für die loadAnimation-Funktion, die das DOM-Element angibt, in dem die Animation gerendert wird.

Verwenden Sie das useMemo-Hook, um das Rendern der Animation zu optimieren.

Das useMemo-Hook ist eine Funktion der React-Bibliothek, die es ermöglicht, das Rendern eines Komponenten zu optimieren, indem das Ergebnis einer aufwändigen Berechnung zwischengespeichert wird. Du kannst den useMemo-Hook verwenden, um das Rendern einer Lottie-Animation in der lottie-web-Bibliothek zu optimieren, indem du das Options-Objekt, das an die loadAnimation-Funktion übergeben wird, zwischenspeicherst.

Um das useMemo-Hook zur Optimierung der Darstellung einer Lottie-Animation in der lottie-web-Bibliothek zu verwenden, müssen Sie die useMemo- und useEffect-Hooks aus React importieren und sie verwenden, um eine Funktion zu definieren, die die Animation lädt. Hier ist ein Beispiel, wie Sie dies in einem React-Komponente tun könnten:

import React, { useMemo, useEffect, useRef } from 'react';
import lottie from 'lottie-web';

const MyComponent = () => {
    const containerRef = useRef(null);
    const options = useMemo(() => {
        return {
            container: containerRef.current,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/path/to/animation.json',
        };
    }, []);

    useEffect(() => {
        const animation = lottie.loadAnimation(options);

        return () => {
            animation.destroy();
        };
    }, [options]);

    return (
        <div ref={containerRef} />
    );
};

Erstellen Sie einen benutzerdefinierten - useLazyLottie Hook.

Das useLazyLottie-Hook ist ein benutzerdefinierter Hook, den Sie verwenden können, um das Lazy Loading einer Lottie-Animation in einer funktionalen Komponente zu implementieren. Der useLazyLottie-Hook ist kein integriertes Feature der lottie-react- oder lottie-web-Bibliotheken, aber er könnte als benutzerdefinierter Hook implementiert werden, der die useEffect- und useRef-Hooks kombiniert, um das Lazy Loading einer Lottie-Animation zu implementieren.

Hier ist ein Beispiel, wie das useLazyLottie-Hook unter Verwendung der lottie-web-Bibliothek implementiert werden könnte:

import { useEffect, useRef } from 'react';
import lottie from 'lottie-web';

const useLazyLottie = (options) => {
  const containerRef = useRef(null);
  const animationRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const animation = lottie.loadAnimation({
          ...options,
          container: containerRef.current,
        });
        animationRef.current = animation;
        observer.disconnect();
      }
    });
    observer.observe(containerRef.current);

    return () => {
      if (animationRef.current) {
        animationRef.current.destroy();
      }
     	observer.disconnect();
    };
  }, [options]);

  return { containerRef, animationRef };
};

In diesem Beispiel verwendet das useLazyLottie-Hook die IntersectionObserver-API, um zu erkennen, wann die Animation im Viewport sichtbar wird. Wenn die Animation sichtbar wird, lädt der Hook die Animation mit der lottie-web-Bibliothek und speichert eine Referenz zur Animationsinstanz in der animationRef-Variablen. Der Hook gibt auch die containerRef- und animationRef-Variablen zurück, die verwendet werden können, um das Container-Element und die Animationsinstanz im Code des Komponenten zu referenzieren.

Um Optionen an den useLazyLottie-Hook zu übergeben, können Sie ein Optionsobjekt als Argument an den Hook übergeben. Das Optionsobjekt sollte alle Optionen enthalten, die Sie an die loadAnimation-Funktion der lottie-web-Bibliothek übergeben möchten.

Hier ist ein Beispiel, wie du das useLazyLottie-Hook verwenden und Optionen übergeben könntest:

import React from 'react';
import { useLazyLottie } from './useLazyLottie';

const MyComponent = () => {
  const { containerRef, animationRef } = useLazyLottie({
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/path/to/animation.json',
  });

  return (
    <div ref={containerRef} />
  );
};

In diesem Beispiel wird das useLazyLottie-Hook mit einem Options-Objekt aufgerufen, das den Renderer, die Schleife, die Autoplay- und Pfadoptionen für die loadAnimation-Funktion enthält. Diese Optionen werden an die loadAnimation-Funktion übergeben, wenn die Animation im Viewport sichtbar wird.

Code-Splitting — Dynamisches Import-Paket

Um Code-Splitting mit der lottie-web Bibliothek in einer Next.js-Anwendung zu verwenden, können Sie die dynamische Importfunktion von Next.js nutzen, um die lottie-web Bibliothek und die Animationsdaten verzögert zu laden.

Hier ist ein Beispiel, wie Sie Code-Splitting mit der lottie-web Bibliothek und Next.js verwenden könnten:

import React, { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

const Lottie = dynamic(() => import('lottie-web'), { ssr: false });

const MyComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const animation = lottie.loadAnimation({
      container: containerRef.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/path/to/animation.json',
    });

    return () => {
      animation.destroy();
    };
  }, []);

  return (
    <div ref={containerRef} />
  );
};

export default MyComponent;

In diesem Beispiel wird die dynamische Importfunktion verwendet, um die Lottie-Web-Bibliothek und die Animationsdaten verzögert zu laden. Die ssr-Option ist auf false gesetzt, um zu verhindern, dass die Bibliothek während des serverseitigen Renderns auf der Serverseite geladen wird. Der useEffect-Hook wird dann verwendet, um die Animation zu laden, wenn das Komponente montiert wird, und die containerRef-Variable wird verwendet, um das Container-Element für die Animation zu referenzieren.