动画宪章师在展会上

Question

我喜欢 Chartist 的特点： https://gionkunz.github.io/chartist-js/

但我希望 Chartist 在显示图表时以 ChartJS 所做的同样酷的方式为饼图制作动画，如下所示： http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html

我了解到您可以通过某种方式向 Chartist 添加 CSS 动画，但我不知道如何添加。

Answer 1

这是使用 SMIL 在 Chartist 中提供的 - http://gionkunz.github.io/chartist-js/examples.html#svg-path-animation。

虽然这会像 Chrome 中那样工作 - 您可能需要一个 IE 填充程序 - SVG animation not working IE9/IE10

这是一个相当愚蠢的弹跳实现（它看起来更像 pacman，但它应该很容易通过反复试验找出正确的反转和持续时间；或者你可以欺骗并检查 easeOutBounce 实现在 Chart.js 代码中）

var data = {
    series: [5, 3, 14]
};

var chart = new Chartist.Pie('.pie', data, {
    donut: true,
    donutWidth: 194,
});

chart.on('draw', function (data) {
    if (data.type === 'slice') {
        // Get the total path length in order to use for dash array animation
        var pathLength = data.element._node.getTotalLength();

        // Set a dasharray that matches the path length as prerequisite to animate dashoffset
        data.element.attr({
            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
        });

        // Create animation definition while also assigning an ID to the animation for later sync usage
        var animationDefinition = {
            'stroke-dashoffset': {
                id: 'anim' + data.index,
                dur: 500 * data.value / data.totalDataSum,
                from: -pathLength + 'px',
                to: '0px',
                // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                fill: 'freeze'
            }
        };

        // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
        if (data.index !== 0) {
            animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
        }

        // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
        data.element.attr({
            'stroke-dashoffset': -pathLength + 'px'
        });

        // We can't use guided mode as the animations need to rely on setting begin manually
        // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
        data.element.animate(animationDefinition, false);

        // add (naive) bounce
        if (data.endAngle === 360) {
            var index = data.index;
            var dur = 1000 * data.value / data.totalDataSum / 2;
            var from = 0;
            var to = -pathLength / 3;

            for (var i = 0; i < 4; i++) {
                data.element.animate({
                    'stroke-dashoffset': {
                        id: 'anim' + (index + 1),
                        dur: dur,
                        from: from + 'px',
                        to: to + 'px',
                        fill: 'freeze',
                        begin: 'anim' + index + '.end'
                    }
                }, false);

                index++;
                dur /= 1.75;

                var t = from;
                from = to;
                to = t / 2.5;
            }
        }
    }
});

动画宪章师在展会上

Animate Chartist on show

javascript

css

chart.js

chartist.js