Question

我正在尝试将使用easypiechart.js构建的动画图表绑定到waypoints，这样只有当用户向下滚动到图表时才会触发动画。创建图表的脚本如下所示：

$(function(){
$('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

但是，当我试图将此功能包装成路标功能时，它根本不起作用，即使图表消失了。

我这样做：

$('.chart').waypoint(function(event, direction) {
    $('.chart').easyPieChart({
        easing: 'easeOutBounce',
        barColor:'#545ec4',
        trackColor:'#ccc',
        scaleColor:false,
        lineWidth:2,
        size:191,
        lineCap:'circle',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
},{
  triggerOnce: true,
  offset: 'bottom-in-view'
});

任何解释或更正都将受到高度赞赏。

Answer 1

您好我正在使用此脚本，它对我来说很好用

$('.chart').waypoint(function() {
                      $(this).easyPieChart({
                        animate: 2000,
                        scaleColor: false,
                        trackColor: '#e5e5e5',
                        barColor: '#f36640',
                        lineWidth: 14,
                        size: 175,
                      });
                    }, {
                      triggerOnce: true,
                      offset: 'bottom-in-view'
                });

Answer 2

您是否尝试将简易饼图函数包装在另一个函数中并从航点函数中调用它？不确定这是不是很重要......

使用航点触发easypiechart.js的动画

2 个答案: