mousedown 上的动画环形图

Question

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

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

我正在使用它来创建 "tactile loading" 效果。

在此 fiddle http://jsfiddle.net/4mftq2eq/1/ 中，您可以了解它目前的运作方式。但是，我试图让动画在 mousedown 上发生，然后在 mouseup 上反转它。

我稍微更改了库中的动画功能。（第 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

mousedown 上的动画环形图

Animated ring graph on mousedown

javascript

jquery

animation

canvas