动画宪章上显示

Question

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

但我想宪章动画在同一个凉爽的方式ChartJS饼图不会显示在图表的时候，是这样的： http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html

我读过你可以以某种方式将CSS动画添加到宪章，但我无法弄清楚如何。

Answer 1

这是用宪章“提供的，使用SMIL - http://gionkunz.github.io/chartist-js/examples.html#svg-path-animation。

虽然这将作为在浏览器 - 你可能需要对IE一个垫片 - SVG animation not working IE9/IE10

---

这是一个相当愚蠢的反弹实现（它看起来更像是吃豆子，但它应该很容易足以找出正确的反转和持续时间一点点试验和错误;或者你可以欺骗，并检查了在chart.js之代码easeOutBounce实现）

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; 
      } 
     } 
    } 
});