延迟饼图动画直到在视口中答案

【问题标题】：Delay pie chart animation until in viewport延迟饼图动画直到在视口中
【发布时间】：2014-12-13 08:45:35
【问题描述】：

我正在使用 LugoLabs 的这个名为“Circles”的 jquery 插件来为我正在构建的网站上的一些饼图制作动画。 (https://github.com/lugolabs/circles)

效果很好，但是饼图动画在页面加载时开始，我想延迟它直到被查看者看到。

是否可以使用 viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) 之类的东西来仅在有人查看动画时才启动动画？我之前在其他项目中成功使用过它，但我很难将它与现有的 javascript 集成。

----示例设置---

HTML：

<div class="circle" id="circles-1"></div>

脚本：

var myCircle = Circles.create({
id:           'circles-1',
radius:       60,
value:        43,
maxValue:     100,
width:        10,
text:         function(value){return value + '%';},
colors:       ['#D3B6C6', '#4B253A'],
duration:       400,
wrpClass:     'circles-wrp',
textClass:      'circles-text'
styleWrapper: true,
styleText:    true
});

【问题讨论】：

如果你错过了 - 圈子 github 有一个例子：github.com/lugolabs/circles/blob/master/spec/viewport.html，完成一个函数 elementInViewport()，我刚刚将它添加为 Fiddle jsfiddle.net/d5b4r5q1
谢谢！我试过了，但由于某种原因无法让它工作。会再试一次。
抱歉这些愚蠢的问题，但是您如何将上述脚本插入到该 javascript 中以使其工作？当我做我认为有意义的事情时，它没有运行。它的格式略有不同，因为它不使用递增的数值变量来创建圆圈。
我刚刚用你的圈子更新了 Fiddle，不知道它是否应该是这样的：jsfiddle.net/2vz6zb13我刚刚将你的代码添加到createCircles-function 中并添加了一个, 在您的设置中错过的textClass: 'circles-text' 之后。
效果很好！谢谢！（如果您作为答案提交，我会标记它）

标签： javascript jquery animation jquery-plugins

【解决方案1】：

正如前面提到的评论：circles github 有一个示例，用于在看到圆圈时启动圆圈动画：https://github.com/lugolabs/circles/blob/master/spec/viewport.html。
我添加了一个包含此示例的Fiddle，并且由于存在如何从 OP 调整圆以使用此示例的问题，我在另一个Fiddle 中对此进行了调整。唯一的调整是更改函数createCircles如下：

function createCircles() {
  var myCircle = Circles.create({
     id:           'circles-1',
     radius:       60,
     value:        43,
     maxValue:     100,
     width:        10,
     text:         function(value){return value + '%';},
     colors:       ['#D3B6C6', '#4B253A'],
     duration:     400,
     wrpClass:     'circles-wrp',
     textClass:    'circles-text',
     styleWrapper: true,
     styleText:    true
  });
}

【讨论】：

【解决方案2】：

你不能像这样计算滚动高度吗：

$(document).scroll(function(){
    if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
    {   
        $(function() {
         ///your pies, 810px is your height
        });

    });
    }
});

而不是加载插件...

【讨论】：

每次滚动时它都会重新加载动画。是什么原因造成的？