Beispiele: SMIL-Animationen

Statische Torten und Ringe mit Animation beim Seitenaufbau

(Seite neu laden, um die Animationen neu abzuspielen.)

$(".pp.animated").progressPie({
    mode:$.fn.progressPie.Mode.COLOR,
    animate: true
});

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

$(".pr.animated").progressPie({
    mode:$.fn.progressPie.Mode.COLOR, 
    strokeWidth: 1, 
    ringWidth: 3,
    animate: {
        dur: "3s"
    }
});

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Animierte Zustandsübergänge (Wertänderungen)

Die folgenden Beispiele demonstrieren Animationen bei einer Wertänderung. Die drei Diagramme werden einmalig beim Laden der Seite wie folgt konfiguriert:

$("#ppstep").setupProgressPie({
    size: 50,
    scale: 2,
    mode: $.fn.progressPie.Mode.COLOR,
    valueData: "val",
    animate: true
}).progressPie();
$("#prstep").setupProgressPie({
    size: 100,
    strokeWidth: 10,
    ringWidth: 10,
    ringEndsRounded: true,
    strokeColor: "#ddd",
    color: "navy",
    valueData: "val",
    contentPlugin: "percent",
    contentPluginOptions: {
        color: "navy"
    },
    animate: {
        dur: "1.5s"
    }
}).progressPie();
$("#double").setupProgressPie({
    size: 100,
    mode: $.fn.progressPie.Mode.COLOR,
    strokeWidth: 8,
    ringWidth: 8,
    strokeColor: "#ddd",
    valueData: "val",
    animate: {dur: "3s"},
    animateColor: true,
    inner: {
        size: 75,
        valueData: "inner",
        animate: {dur: ".5s", calcMode: "linear"},
        animateColor: false
    }
}).progressPie();

<span id="ppstep" class="step" data-val="50"></span>
<span id="prstep" class="step" data-val="50"></span>
<span id="double" class="step double" data-val="50" data-inner="50"></span>

Die Knöpfe unten werden die (Prozent-)Werte der Diagramme erhähen oder reduzieren. Speziell für das Doppeldiagramm rechts gilt, dass die Buttons im Normalfall den äußeren Wert (Ring) verändern. Wenn Sie die Checkbox „Apply to inner pie“ markieren, ändern die Buttons dagegen (nur) den Wert der inneren Torte.

$("button.adj").click(function() {
    var inner = $("#chkInner:checked").length;
    var charts = $(inner ? ".step.double" : ".step");
    var oldVal = charts.data(inner ? "inner" : "val");
    var delta = $(this).data("delta");
    var newVal = oldVal + delta;
    newVal = Math.min(100, Math.max(0, newVal));
    charts.data(inner ? "inner" : "val", newVal).progressPie();
});

Da die animate-Option bei allen drei Beispielen gesetzt ist, werden die Diagramme alle nicht sofort ihren neuen Wert darstellen (Sprung), sondern ihre Anzeige animiert vom alten zum neuen Wert ändern.

  • Die Option animate kann einfach auf true gesetzt werden, um eine Standardanimation einzurichten,

  • oder man kann ihr ein Objekt zuweisen, dessen Properties gültige SMIL-Attribute sind. Ein solches Attribut für SMIL-Animationen ist dur für die Dauer der Animation. Die Standard-Animationsdauer von ProgressPieSVG ist eine Sekunde, durch Angabe von dur können Sie eine abweichende Dauer einstellen.
    Das zweite Beispiel setzt z.B. eine Animationsdauer von anderthalb Sekunden fest.

  • Die Standard-SMIL-Attribute, die ProgressPieSVG verwendet, sind in folgendem Objekt definiert: $.fn.progressPie.defaultAnimationAttributes. Neben der Standard-Animationsdauer von einer Sekunde finden Sie dort weitere Einstellungen zur Animationsgeschwindigkeit: Es ist nämlich keine gleichmäßige/lineare Animation voreingestellt, sondern eine zunächst sehr schnelle, dann immer weiter bis zum Stillstand „abbremsende“ Animation, definiert über einen Bézier Spline. Tatsächlich wird die Animation kurz vor dem Ziel so langsam, dass die Animationsdauer deutlich kürzer zu sein scheint als sie tatsächlich ist: Schon nach rund einer halben Sekunde ist der Balken/die Torte „fast am Ziel“ und „kriecht“ am Schluss kaum noch wahrnehmbar die letzten Pixel vorwärts. Das sollten Sie im Zweifel berücksichtigen, wenn Sie eine eigene Animationsdauer festlegen.
    Natürlich können Sie die Standardeinstellungen in obigem Objekt global überschreiben. Oder Sie können eben lokal für einzelne Plugin-Aufrufe in der animate-Option abweichende SMIL-Einstellungen angeben. Für Details dazu sei auf SMIL-Dokumentationen verwiesen.
    Die innere Torte des rechten Doppeldiagramms demonstriert die lokale Änderung des Animationsmodus: Für sie ist eine lineare Animation eingestellt. Da diese deutlich langsamer „wirkt“, wurde eine entsprechend kürzere Animationsdauer von nur einer halben Sekunde eingestellt.

  • Wenn Sie für ein Doppeldiagramm – anders als in diesem Beispiel – keine animate-Option für das innere Teil-Diagramm (also innerhalb der inner-Option) angeben, so „erbt“ das innere Teildiagramm die Animationseinstellungen vom äußeren Hauptdiagramm!

  • Falls Ihr Diagramm keine konstante Farbe hat, sonder die Farbe vom angezeigten Wert abhängt, und sich der Wert wegen der animate-Option animiert ändert, stellt sich die Frage, wie sich die Farbe ändern soll:

    • Sie können zusätzlich zu animate eine weitere Option (Typ Boolean) angeben: animateColor. Setzen Sie diese auf true, so wird sich auch die Farbe fließend mit der Animation ändern. Setzen Sie sie auf false, so wird die Farbe immer sofort bei der Wertänderung „umspringen“, bevor die eigentliche Animation startet.

    • Wenn Sie die Option animateColor gar nicht angeben (wie im ersten Beispiel), so gilt folgende Automatik: Beim ersten Aufbau der Grafik (typischerweise beim Laden der Seite) wird das Diagramm ohne Farbanimation sofort die Farbe des Startwertes annehmen, bei nachfolgenden Wertänderungen dagegen einen fließenden Farbübergang mit der Animation abspielen.
      Laden Sie die Seite neu und vergleichen Sie die Beispiel-Torten, so werden Sie den Unterschied sehen: Die linke Grafik im „Automatik-Modus“ (ohne Angabe von animateColor) wird sofort in der 50%-Farbe Gelb gezeichnet, beim Drücken von Buttons darunter jedoch fließende Farbübergänge abspielen. Der Ring des rechten Doppeldiagramms dagegen (animateColor: true) ändert auch beim Seitenaufbau seine Farbe vom 0%-Rot bis hin zum 50%-Gelb.

    • Die innere Torte des rechten Doppeldiagramms demonstriert die Option animateColor: false: Die Farbe ändert sich immer sofort, nur der Winkel der Torte ist animiert.

    • Bitte beachten: Der animierte Farbübergang ist immer ein einfacher, linearer Farbübergang zwischen der Ausgangsfarbe und der Zielfarbe der Wertänderung, d.h. die Zwischenwerte werden nicht anhand der Farbfunktion für das Tortendiagramm berechnet! Bei kleineren Wertänderungen dürfte das kaum auffallen. Aber bei großen Farbänderungen und nicht-linearen Farbfunktionen ist der Effekt erkennbar, wenn man darauf achtet:
      Betrachten Sie von diesen drei Beispielen das linke und rechte: Diese Beispiele verwenden den von ProgressPieSVG angeboteten COLOR-Modus mit roter Farbe für 0%, gelb für 50% und grün für 100%. Drücken Sie nun z.B. erst den „0%“-Button, um diese Diagramme zurückzusetzen, und anschließend den „100%“-Button, um eine Animation von 0% auf volle 100% zu starten. Die Farbe wird sich dabei direkt von Rot zu Grün ändern und nicht zwischendurch das 50%-Gelb annehmen. Der Grund: Die Farbfunktion wird nur zweimal aufgerufen, einmal für den Startwert (hier 0%) und einmal für den Zielwert (hier 100%). Der Farbübergang zwischen diesen beiden Werten wird direkt an die Rendering Engine delegiert, erfolgt also nicht in JavaScript.

Hinweise zu SMIL-Animationen und Dash-Styles

  • Diese Animationen wurde mit Hilfe der Animationssprache SMIL für SVG realisiert. SMIL wird von den meisten Browsern unterstützt – nicht jedoch von Microsofts Internet Explorer oder Edge! In diesen Browsern werden die Diagramme ohne Animation, ansonsten aber unverändert dargestellt.

  • Die Animation selbst greift auf den stroke-dasharray- und stroke-dashoffset-Stil zurück. In Konsequenz können Sie für animierte Diagramme nicht per CSS selbst ein „Strichel-Muster“ für den Vordergrund (Torte oder Ring) festlegen, denn Ihr Muster würde mit dem für die Animation verwendeten kollidieren. Genauer: Sollten Sie per CSS eine Regel wie

    progresspie-foreground { dash-strokearray: 5, 5}

    festlegen, so wird diese Regel keinen Effekt zeigen, da progressPie diese CSS-Properties bereits in lokalen style-Attributen im SVG-Code festlegt. Fügen Sie Ihrer CSS-Regel dagegen die !important directive hinzu, wird die Animation nicht mehr korrekt funktionieren.

© Copyright by Isg-Software — Letzte Änderung / Last Update: 2018-07-18

^