Javascript mousedown上的动画环图

我正在使用一个名为Circriful的jquery库：

我用它来创造一个“触觉负荷”的效果

在这把小提琴中，你可以看到它目前是如何工作的。但是，我试图使动画在

mousedown

上发生，然后在

mouseup

上反转动画

我只是稍微更改了库中的动画功能。（第213、242-256行）

我只是出于开发目的使用astrick选择器。

坏小提琴：

---

如果

为向后

为真，则需要编写另一个调用

requestAnimationFrame（）

。 通过将它们包装成变量，可以调用该方法

var向前、向后；
函数动画（当前，向后）{
[...]
如果（是向后的）{
取消动画帧（前进）；
如果（curPerc>0）{
curPerc-=1；
向后=requestAnimationFrame（函数（）{
动画（Math.max（curPerc/100，0），真）；
}，obj）；
}否则{
curPerc=0；
//这里命名你的animationFrame
向后=requestAnimationFrame（函数（）{
设置动画（0，真）；
}，obj）；
}
}
否则{
取消动画帧（向后）；
如果（curPerc<100）{
curPerc+=1；
//这里命名你的animationFrame
forward=requestAnimationFrame（函数（）{
设置动画（数学最小值（curPerc，100）/100）；
}，obj）；
}否则{
curPerc=100；
forward=requestAnimationFrame（函数（）{
动画（Math.min（0））；
}，obj）；
}
}

function animate(current, is_backward) {

     // original code here

     if(is_backward == true) {
         curPerc = 100;
     }

     if (curPerc < 100) {
         curPerc += 1;
         requestAnimationFrame(function () {
             animate(Math.min(curPerc, 100) / 100);
         }, obj);
     } else {
         curPerc -= 1;
            requestAnimationFrame(function () {
               animate(Math.min(0));
            }, obj);
     }

$('*').on('mousedown', function() {
     animate(curPerc / 100, false);
});
$('*').on('mouseup', function() {
     animate(curPerc / 100, true);
});

var forward, backward;

function animate(current, is_backward) {
     [...]
            if(is_backward) {
                cancelAnimationFrame(forward);
             if (curPerc > 0) {
                curPerc -= 1;
                backward= requestAnimationFrame(function () {
                    animate(Math.max(curPerc / 100, 0), true);
                }, obj);
            } else {

                curPerc =0;
                //here name your animationFrame
                backward= requestAnimationFrame(function () {
                    animate(0, true);
                }, obj);
            }
            }
           else{
                cancelAnimationFrame(backward);
            if (curPerc < 100) {
                curPerc += 1;
               //here name your animationFrame
               forward= requestAnimationFrame(function () {
                    animate(Math.min(curPerc, 100) / 100);
                }, obj);
            } else {
                curPerc =100;
                forward= requestAnimationFrame(function () {
                    animate(Math.min(0));
                }, obj);
            }
           }