Question

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

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

我用它来创造一个＆＃34;触觉装载＆＃34;效果。

在这个小提琴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选择器进行开发。

破碎的小提琴： http://jsfiddle.net/4mftq2eq/2/

Answer 1

如果requestAnimationFrame()为真，您需要再次拨打is_backward。通过将它们包装到变量中，您可以调用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的动画圆环图

1 个答案: