Question

我在此处找到了一个圈子进度脚本：http://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/

我将它添加到我的网站，事实是我在页面中间有这些元素（页面加载时不在视图中）。我的目的是在用户向下滚动到该位置时显示动画，但效果会在每个滚动上循环。如何在元素进入视图时使其仅运行一次并防止循环和/或重新启动？

到目前为止，这是我的代码： http://jsfiddle.net/1f58u1o5/1/

CSS

.progressbar {
    display: inline-block;
    width: 100px;
    margin: 25px;
}

.circle {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    display: inline-block;
    position: relative;
    text-align: center;
}

.circle canvas { vertical-align: middle; }

.circle div {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
}

.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}

.circle span {
    display: block;
    color: #aaa;
    margin-top: 12px;
}

HTML

<div style="width:100%;height:500px;"></div>
<h3>Sed scelerisque</h3>
<div class="progressbar">
    <div class="circle" data-percent="98"><div></div><p>Quisque's</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="30"><div></div><p>Maecenas</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="77"><div></div><p>Pellentesque</p></div>
</div>
<div class="progressbar">
    <div class="circle" data-percent="49"><div></div><p>Etiam sodales</p></div>
</div>
<div style="width:100%;height:500px;"></div>

的JavaScript

$(document).ready(function($){
    function animateElements(){
        $('.progressbar').each(function(){
            var elementPos  = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            var percent     = $(this).find('.circle').attr('data-percent');
            var percentage  = parseInt(percent, 10) / parseInt(100, 10);
            if(elementPos<topOfWindow+$(window).height()-30){
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percentage,
                    thickness: 14,
                    fill: { color: '#1B58B8' }
                }).on('circle-animation-progress', function(event,progress,stepValue) {
                    $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
                }).stop();
            }
        });
    }

    // Show animated elements
    animateElements();
    $(window).scroll(animateElements);
});

有什么建议吗？非常感谢。

Answer 1

这是jsfiddle：http://jsfiddle.net/edward_lee/1f58u1o5/2/

在<div class="progressbar">上添加数据属性以检查是否播放了动画。它的初始值为false，因为动画尚未播放。

<div class="progressbar" data-animate="false">

在if if(elementPos<topOfWindow+$(window).height()-30 && !animate)语句中添加属性为false condition。

播放动画后，将属性设置为true。

$('.progressbar').each(function(){
    var elementPos  = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    var percent     = $(this).find('.circle').attr('data-percent');
    var percentage  = parseInt(percent, 10) / parseInt(100, 10);
    var animate = $(this).data('animate');
    if(elementPos<topOfWindow+$(window).height()-30 && !animate){
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
            startAngle: -Math.PI / 2,
            value: percentage,
            thickness: 14,
            fill: { color: '#1B58B8' }
        }).on('circle-animation-progress', function(event,progress,stepValue) {
            $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
        }).stop();
    }
});

圆形进度条保持循环

1 个答案: