Examples: SMIL animation support

Static pies / rings with initial animation

(Reload to replay the initial animations)

$(".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 %

Animated state (value) changes

The following examples demonstrate the animation of a state change: Three pie or ring charts are initially set up as follows:

$("#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>

The buttons below will increase or decrease the data of those three diagrams (resp. the data of the inner pie of the third diagram, in case the check box “Apply to inner pie” is checked) and update the diagrams:

$("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();
});

Since the animate option is set for all three example diagramms, their values will change smoothly.

• The option animate may be set to true in order to activate default animation,

• or it may be an object containing valid SMIL animation attributes. One such attribute is dur specifying the duration of the animation. (Default is 1 second.)
  Have a look at the second example, which sets an animation duration of 1.5 seconds.

• The default animation attributes are defined in $.fn.progressPie.defaultAnimationAttributes. Besides the default duration of 1 second, you'll find there the default settings for the varying animation speed, defined via a bezier spline: You'll notice that the animation begins rather fast and gradually (but not linearly) slows down to a halt. Actually, the halt gets so slow, the animation seems much shorter than the configured animation duration. Of course, you may also alter these settings, for explanations please refer to SMIL documentations. The inner pie of the last example demonstrates a change of animation mode by switching to simple linear animation (with a much shorter duration of half a second).

• If you don't set the animate option for the inner pie, it inherits the animation setup of the outer!

• If you have set up a value-dependent color (like two of the three examples have), i.e. your diagram has no fix color, but changes color as it changes its value, you can choose whether the color should change immediately (only the length of the arc will be animated then) or wheter the color transition should also be animated along with the value angle (color animation).

  • In addition to the animate option you may specify a second, boolean option named animateColor. Set it to true to enforce color animation, or to false in order to disable it.

  • If you don't set the animateColor option at all (see first example), the color animation will neither be completely disabled nor enforced, but will depend on the context (“automatic mode”): The color will not be animated during the initial animation, i.e. when (re-)loading the page. Any animation on value change, however, will use a color transition.
    To try this, reload the page and have a look at the left of these three pies or at the smaller graphics in the first section of this example page: They will load with the final color and only fill the pie or ring segment with an animation. On the other hand, if you press any of the buttons below, the left pie will always gradually change its color. The outer ring of the right example, on the other hand, will due to the setting animateColor: true also play a color animation on (re-)load of the page: It will gradually change its color from red to yellow.

  • The inner pie of the rightmost graphic demonstrates the option animateColor: false: Only the value is animated, the color changes abruptly upon pressing any button below.

  • Please note: The color animation simply does a linar blend between the color calculated for the start value (percent value before the value change) and the target value! You won't probably notice it for smaller value changes, since it looks very natural, but for larger value changes you might notice that the animation does not conform to your color function for the intermediate values.
    Have a look at the left and the right example graphics: These use progressPieSVG's predefined COLOR mode, with red color for zero, yellow for 50% and green for 100%. Now, for example, first press the “0%” button in order to reset these and then press the “100%” button in order to play an animated transition from 0 to 100: You'll notice the color will directly change from red to green, i.e. it will not turn yellow around the 50%. The reason: The color function for the pie is called only twice: for the start value (0% in this case) and the target value (100% in this case). The color transition between these colors is then delegated to the rendering engine (and not performed via JavaScript).

100% +++ ++ + - -- --- 0% Apply to inner pie

Notes on SMIL animations and dash styles

• These animations are implemented using SMIL, an SVG animation language, supported by most SVG enabled browsers – except Microsoft's Internet Exporer or Edge Browser! When displaying this page in a non-SMIL-supporting browser such like Edge, the Pies will be rendered correctly, only the animation will be missing.

• In all SMIL-enabled browsers, the animation is realized using the stroke-dasharray and stroke-dashoffset styles. The consequence is, the use of this animation would conflict with manually styling the foreground pie/ring with these CSS properties. To be more precise: Should you try to define a CSS rule like

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

  in order to draw a dashed ring or pie segment, this rule will not show any effect – unless you add the !important directive, which on the other hand, would break the animation.