Erstellen Sie interaktive Verlaufsanimationen mit Granim.js

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Farbverläufe können das Erscheinungsbild einer Website sofort verbessern, wenn sie sorgfältig mit der richtigen Farbkombination verwendet werden. CSS hat auch einen langen Weg zurückgelegt, wenn es darum geht, einen Farbverlauf auf jedes Element anzuwenden und es zu animieren. In diesem Tutorial werden wir uns von CSS entfernen und Verlaufsanimationen mit einer JavaScript-Bibliothek namens Granim.js erstellen.

Diese Bibliothek zeichnet und animiert Verläufe auf einer bestimmten Leinwand entsprechend den Parametern, die Sie beim Erstellen einer Granim-Instanz festgelegt haben. Es gibt verschiedene Methoden, mit denen Sie Ihren Farbverlauf auf verschiedene Benutzerereignisse wie einen Klick auf eine Schaltfläche reagieren lassen können. In diesem Tutorial lernen wir diese Bibliothek im Detail und erstellen einige einfache, aber schöne Verlaufsanimationseffekte.

Erstellen von Volltonfarbverlaufsanimationen

Bevor wir mit der Erstellung eines Farbverlaufs beginnen, müssen Sie die Bibliothek in Ihr Projekt aufnehmen. Dazu können Sie entweder Granim.js von GitHub herunterladen oder direkt auf ein CDN verlinken. Die Bibliotheksversion, die ich in diesem Tutorial verwende, ist 1.1. Einige Methoden, die wir hier besprechen werden, wurden erst in Version 1.1 hinzugefügt, so dass die Verwendung einer älteren Bibliotheksversion beim Befolgen dieses Tutorials nicht immer das erwartete Ergebnis liefert. Unter Berücksichtigung dieser Punkte erstellen wir unseren ersten Farbverlauf mit Granim.js.

Jedes Mal, wenn Sie eine neue Granim-Instanz erstellen, können Sie ihr ein Objekt mit Schlüssel-Wert-Paaren übergeben, wobei der Schlüssel der Name einer bestimmten Eigenschaft und der Wert der Wert der Eigenschaft ist. Die element-Eigenschaft wird verwendet, um den CSS-Selektor oder DOM-Knoten anzugeben, der auf die Arbeitsfläche verweist, auf die Sie einen bestimmten Farbverlauf anwenden möchten.

Wenn Sie eine Verlaufsanimation erstellen, bei der die Farben von einem relativ hellen Wert zu einem dunkleren Wert wechseln, kann es unmöglich werden, Text zu lesen, den Sie auf der Leinwand positioniert haben. Beispielsweise kann der anfängliche Farbverlauf, der auf ein Element angewendet wird, eine Kombination aus Gelb und Hellgrün sein. In solchen Fällen müsste der Text der Leinwand dunkler sein, damit Benutzer ihn richtig lesen können.

In ähnlicher Weise könnte der Farbverlauf an einer anderen Stelle aus Dunkelrot und Schwarz bestehen, und in solchen Fällen wäre der dunkle Text nicht leicht zu lesen. Granim.js löst dieses Problem für Sie, indem Sie ein Containerelement angeben können, für das Sie die dunklen und hellen Klassen hinzufügen können, um den Text oder andere Elemente entsprechend zu formatieren. Der Wert der elToSetClassOn-Eigenschaft ist standardmäßig auf body festgelegt, Sie können jedoch auch jedes andere Containerelement angeben. Die dunklen und hellen Klassennamen werden automatisch basierend auf der durchschnittlichen Farbe des Farbverlaufs aktualisiert.

Die elToSetClassOn-Eigenschaft allein funktioniert nicht. Sie müssen auch einen Namen für die Granim-Instanz angeben, die Sie mit der name-Eigenschaft erstellt haben. Wenn Sie den Namen auf etwas wie den first-gradient festlegen, wird der Name der auf das Containerelement angewendeten Klassen zu first-gradient-light oder first-gradient-dark, je nachdem, wie hell oder dunkel der Gradient derzeit ist. Auf diese Weise kann jedes Element, das seine Farbe basierend auf der Helligkeit oder Dunkelheit des Farbverlaufs ändern muss, dies mit Leichtigkeit tun.

Die Richtung, in die ein Farbverlauf gezeichnet werden soll, kann mit der direction-Eigenschaft angegeben werden. Es hat vier gültige Werte: diagonal, left-right, top-bottom und radial. Die von Ihnen erstellten Farbverläufe bewegen sich nicht in diese bestimmten Richtungen– sie werden nur auf diese Weise gezeichnet. Die Position des Farbverlaufs ändert sich während der Animation nicht. Nur seine Farben tun es.

Es gibt auch eine states-Eigenschaft, die ein Objekt als Wert akzeptiert. Jeder im states-Objekt angegebene Status hat einen Namen und einen Satz von Schlüssel-Wert-Paaren. Sie können die gradients-Eigenschaft verwenden, um verschiedene Farben anzugeben, aus denen ein bestimmter Farbverlauf besteht. Sie können den Wert dieser Eigenschaft auf ein Array von Farbverläufen festlegen.

Granim.js erstellt automatisch eine Animation, bei der sich die Farben des Verlaufs von einem Satz zum anderen ändern. Der Übergang zwischen verschiedenen Farbverläufen dauert standardmäßig 5.000 Millisekunden. Sie können die Animation jedoch beschleunigen oder verlangsamen, indem Sie einen geeigneten Wert für die transitionSpeed-Eigenschaft festlegen.

Nachdem die Gradienten mit der Animation beginnen, müssen sie an der einen oder anderen Stelle enden. Sie können mit der loop-Eigenschaft angeben, ob der Farbverlauf dann einfach dort anhalten oder von Anfang an erneut animiert werden soll. Dies ist standardmäßig auf true festgelegt, was bedeutet, dass der Farbverlauf weiterhin animiert wird.

Jede Farbe in einem Farbverlauf kann eine andere Deckkraft aufweisen, die mithilfe der Eigenschaft opacity angegeben werden kann. Diese Eigenschaft akzeptiert ein Array, um zu bestimmen, wie deckend jede Farbe sein soll. Für zwei Verlaufsfarben kann der Wert [0.1, 0.8] sein. Für drei Verlaufsfarben kann der Wert [1, 0.5, 0.75] usw. sein.

Sie haben auch die Möglichkeit, die Zeit anzugeben, die benötigt wird, bis die Verlaufsanimation mit stateTransitionSpeed von einem Zustand in einen anderen übergeht. Dies unterscheidet sich von der transitionSpeed-Eigenschaft, die die Animationsgeschwindigkeit im selben Zustand steuert.

Im folgenden Codeausschnitt habe ich zwei verschiedene Granim-Instanzen erstellt, um unterschiedliche Verläufe zu zeichnen. Im ersten Fall haben wir nur einen einzigen Farbverlauf angegeben, so dass es keine tatsächliche Animation gibt und sich die Farben überhaupt nicht ändern.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Please accept marketing cookies to load this content.

Animieren von Farbverläufen über einem Bild

Eine weitere häufige Verwendung der Granim.js Bibliothek besteht darin, einen Farbverlauf über einem auf der Leinwand gezeichneten Bild zu animieren. Sie können verschiedene Eigenschaften angeben, um mithilfe der image-Eigenschaft zu steuern, wie das Bild auf der Arbeitsfläche gezeichnet wird. Es akzeptiert ein Objekt mit Schlüssel-Wert-Paaren als Wert. Sie können die source-Eigenschaft verwenden, um den Pfad anzugeben, aus dem die Bibliothek das Bild abrufen soll, um es auf der Leinwand zu zeichnen.

Jedes Bild, das Sie auf der Leinwand zeichnen, wird so gezeichnet, dass seine Mitte mit der Mitte der Leinwand übereinstimmt. Sie können jedoch die position-Eigenschaft verwenden, um eine andere Position zum Zeichnen des Bildes anzugeben. Diese Eigenschaft akzeptiert ein Array aus zwei Elementen als Wert. Das erste Element kann die Werte left, center und right haben. Das zweite Element kann die Werte top, center und bottom haben.

Diese Eigenschaften sind im Allgemeinen nützlich, wenn Sie wissen, dass die Größe der Leinwand und des Bildes nicht übereinstimmen. In diesen Situationen können Sie mit dieser Eigenschaft den Teil des Bildes angeben, der auf der Leinwand angezeigt werden soll.

Wenn die Bilder und die Leinwand unterschiedliche Abmessungen haben, können Sie das Bild auch so dehnen, dass es richtig in die Leinwand passt. Die stretchMode-Eigenschaft akzeptiert auch ein Array mit zwei Elementen als Wert. Drei gültige Werte für diese beiden Elemente sind stretch, stretch-if-smaller und stretch-if-larger.

Ein Farbverlauf mit einem auf normal eingestellten Mischmodus blendet das darunter liegende Bild vollständig aus. Die einzige Möglichkeit, ein Bild unter einem Farbverlauf anzuzeigen, besteht darin, einen anderen Mischmodus zu wählen. Sie können alle möglichen Mischmoduswerte für eine Leinwand auf MDN lesen.

Ich möchte darauf hinweisen, dass die Möglichkeit, einen Farbverlauf über einem Bild zu animieren, erst in Version 1.1 der Granim.js-Bibliothek hinzugefügt wurde. Sie müssen also diese oder eine höhere Version verwenden, wenn Sie möchten, dass diese Funktion ordnungsgemäß funktioniert.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  image: {
    source: "path/to/rose_image.jpg",
    position: ["center", "center"],
    blendingMode: "lighten"
  },
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"], ["#FF0000", "#000000"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  image: {
    source: "path/to/landscape.jpg",
    stretchMode: ["stretch", "stretch"],
    blendingMode: "overlay"
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Please accept marketing cookies to load this content.

Methoden zum Steuern der Wiedergabe von Verlaufsanimationen

Bis zu diesem Zeitpunkt hatten wir keine Kontrolle über die Wiedergabe der Verlaufsanimation, sobald sie instanziiert wurde. Wir konnten es nicht anhalten / abspielen oder seinen Zustand, seine Richtung usw. ändern. Die Granim.js Bibliothek verfügt über verschiedene Methoden, mit denen Sie all diese Aufgaben problemlos erledigen können.

Sie können jede Animation mit den Methoden play() und pause() wiedergeben oder anhalten. Ebenso können Sie den Status der Verlaufsanimation mit der changeState('state-name')-Methode ändern. Der state-name hier muss einer der Statusnamen sein, die Sie beim Instanziieren der Granim-Instanz definiert haben.

In Version 1.1 wurden weitere Methoden hinzugefügt, mit denen Sie die Richtung und den Mischmodus einer Animation im laufenden Betrieb mit den Methoden changeDirection('direction-name') und changeBlendingMode('blending-mode-name') ändern können.

Im folgenden Codeausschnitt verwende ich ein Schaltflächenklickereignis, um alle diese Methoden aufzurufen, aber Sie können jedes andere Ereignis verwenden, um sie aufzurufen.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
        source: 'path/to/landscape.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "red-state": {
      gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$(".play").on("click", function(){
  firstGranim.play();
});

$(".pause").on("click", function(){
  firstGranim.pause();
});

$(".diagonal").on("click", function(){
  firstGranim.changeDirection('diagonal');
});

$(".radial").on("click", function(){
  firstGranim.changeDirection('radial');
});

$(".red-state").on("click", function(){
  firstGranim.changeState('red-state');
});

$(".green-state").on("click", function(){
  firstGranim.changeState('green-state');
});

$(".color-dodge").on("click", function(){
  firstGranim.changeBlendingMode('color-dodge');
});

$(".color-burn").on("click", function(){
  firstGranim.changeBlendingMode('color-burn');
});

$(".lighten").on("click", function(){
  firstGranim.changeBlendingMode('lighten');
});

$(".darken").on("click", function(){
  firstGranim.changeBlendingMode('darken');
});

Please accept marketing cookies to load this content.

Abschließende Gedanken

In diesem Tutorial habe ich die Grundlagen der Granim.js Bibliothek behandelt, damit Sie so schnell wie möglich damit beginnen können. Es gibt einige andere Methoden und Eigenschaften, die Sie beim Erstellen dieser Verlaufsanimationen nützlich finden können. Sie sollten die offizielle Dokumentation lesen, um über alle Möglichkeiten zu lesen.

Wenn Sie nach zusätzlichen JavaScript-Ressourcen suchen, die Sie kennen lernen oder in Ihrer Arbeit verwenden können, lesen Sie, was wir im Envato Market zur Verfügung haben.

Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich gerne in den Kommentaren wissen.