Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/413.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Jquery如何重置动画的对象属性_Javascript_Jquery - Fatal编程技术网

Javascript Jquery如何重置动画的对象属性

Javascript Jquery如何重置动画的对象属性,javascript,jquery,Javascript,Jquery,我有一个svg循环,它的动画类似于进度循环,有一个从0到大约845的数字,我希望它在一定时间后循环,但是当它循环时,计数器属性不会重置并添加到其以前的值 我想重置计数器属性,但是无论我尝试什么,它都会保持其以前的值 <script type="module" defer> function animateCircle(){ var CounterObj; var count = $(('#count'));

我有一个svg循环,它的动画类似于进度循环,有一个从0到大约845的数字,我希望它在一定时间后循环,但是当它循环时,计数器属性不会重置并添加到其以前的值

我想重置计数器属性,但是无论我尝试什么,它都会保持其以前的值


    <script type="module" defer>
     function animateCircle(){
        var CounterObj;
        var count = $(('#count'));
        CounterObj =  $({
            Counter: 0
        }).animate({
            Counter: count.text()
        }, {
            duration: 1500,
            easing: 'linear',
            step: function() {
                this.Counter = (this.Counter + 1) * 28.15;
                count.text(Math.ceil(this.Counter));
            },
            start: function(result){
                console.log(result)
                $(this)[0].Counter = 0;
                this.Counter = 0;
                result.props.Counter = 0;
                result.elem.Counter = 0;
                result.elem.originalProperties = 0;
                result.tweens[0].elem.Counter = 0;
            }
        });

        var s = Snap('#animated');
        // Green Blue Purple
        var g = s.gradient("l(0, 0, 1, 1)#00af6a-#00658a-#5b00ac");
        var progress = s.select('#progress');
        progress.attr({
            strokeDasharray: '0, 251.2',
            stroke: g

        });

        Snap.animate(0, 200, function(value) {

            progress.attr({
                'stroke-dasharray': value + ',251.2'
            });
        }, 1500);
        }
    animateCircle();
    setInterval(animateCircle, 5000);

    </script>

函数animateCircle(){
var CounterObj;
变量计数=$(“#计数”);
反目标=$({
柜台:0
}).制作动画({
计数器:count.text()
}, {
持续时间:1500,
“线性”,
步骤:函数(){
this.Counter=(this.Counter+1)*28.15;
count.text(Math.ceil(this.Counter));
},
开始:功能(结果){
console.log(结果)
$(此)[0]。计数器=0;
这个计数器=0;
result.props.Counter=0;
result.elem.Counter=0;
result.elem.originalProperties=0;
result.tweens[0].elem.Counter=0;
}
});
var s=捕捉('动画');
//绿蓝紫
var g=s梯度(“l(0,0,1,1)#00af6a-#00658a-#5b00ac”);
var progress=s.select(“#progress”);
progress.attr({
strokeDasharray:'0251.2',
行程:g
});
动画(0,200,函数(值){
progress.attr({
“stroke dasharray”:值+”,251.2”
});
}, 1500);
}
动画循环();
设置间隔(动画循环,5000);
正如您在Start函数中所看到的,它是我尝试过的所有功能


如果在某个地方我可以在动画开始时说计数器必须为0,并且如果我在step函数中将计数器设置为0,那么数字DoeSsent animate将是非常棒的

看看这部分:
animate({Counter:count.text()}
。它是计数器的目标值。因此,如果您希望它是845,那么您应该将此部分更改为
动画({Counter:845}
。在这种情况下,您根本不需要
启动
函数,您可以将其删除。但是……我不明白这个神奇之处:
this.Counter=(this.Counter+1)*28.15;