javascript - mousedown 上的动画环形图

Question

我正在使用一个名为 circliful 的 jquery 库:

https://github.com/pguso/jquery-plugin-circliful

我用它来创建“触觉加载”效果。

在这个 fiddle 中 http://jsfiddle.net/4mftq2eq/1/你可以看到它目前是如何运作的。但是，我试图让动画发生在 mousedown 上，然后在 mouseup 上反转它。

我稍微更改了库中的 animate 函数。 (第 213、242-256 行)

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);
     }

到目前为止，我的尝试没有结果。 (第 267-274 行)

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

我仅将 astrick 选择器用于开发目的。

坏掉的 fiddle : http://jsfiddle.net/4mftq2eq/2/

Answer 1

如果 is_backward 为真，您将需要编写另一个对 requestAnimationFrame() 的调用。通过将它们包装到变量中，您可以调用 cancelAnimationFrame()方法。

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);
            }
           }

Updated Fiddle