Question

我有以下代码产生一个从左到右反复弹回的点。当我单击停止时，它从左向右移动时停止，但在从右向左移动时不会停止。有更好的方法吗？

var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 100, 20);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

var captured = false;
anim = Raphael.animation({cx: 270, cy: 100},2000,'ease-in-out',function(){
    this.animate({cx: 50, cy: 100},2000,'ease-in-out', function(){
        circle.animate(anim);
    });
});

circle.animate(anim);

circle.mouseover(function(){
    circle.attr("fill", "#0f0");
});

circle.mouseout(function(){
    if (captured){
        circle.attr("fill", "#00f");
    } else {
        circle.attr("fill", "#f00");
    }
})

circle.mousedown(function(){
    captured = true;
    circle.attr("fill", "#00f");
    circle.stop(anim);
})

Answer 1

我猜你可以把它分成2个动画，这样你就可以阻止它们。这取决于这是否是更复杂问题的一部分。例如......

包含2个动画的回调方法。


animBack =  Raphael.animation({cx: 50, cy: 100},2000,'ease-in-out', function(){
        circle.animate(animTo);
    });
animTo = Raphael.animation({cx: 270, cy: 100},2000,'ease-in-out',function(){
        circle.animate(animBack);
    });

circle.animate(animTo);

...later 

    circle.stop(animTo);
    circle.stop(animBack);

jsfiddle

因为总有不止一种方法可以做到这一点，这里有一种稍微有点奇怪的方式可能更有意义，但最初会“感觉”更复杂！我包括它，因为它可能为人们提供一些有趣的解决方法。

自定义缓解方法（可能看起来很奇怪，但值得一看）

假设我们尝试将其制作成一个动画。要做到这一点，我们可以创建我们的自定义缓动，使球在一次缓和中反弹到AND。我们可以修改一个Raphaels缓入方法并将动画时间分成2个...... Raphael有一个我们可以扩展的easing_formulas哈希。

让我们创建一个新的缓和公式，它将一直在那里，并一路回来。

Raphael.easing_formulas["easeInOutReturn"] = function(n) {
        if( n > 0.5 ) { n = (1 - n)*2  }
        else { n = n * 2 };
        var q = .48 - n / 1.04,
            Q = Math.sqrt(.1734 + q * q),
            x = Q - q,
            X = Math.pow(Math.abs(x), 1 / 3) * (x < 0 ? -1 : 1),
            y = -Q - q,
            Y = Math.pow(Math.abs(y), 1 / 3) * (y < 0 ? -1 : 1),
            t = X + Y + .5;
        return (1 - t) * 3 * t * t + t * t * t;
};

注意，原始缓动公式中缺少if / then行。我们将时间分割为上半部分的动画，然后返回到下半部分的缓动（因为缓动只是从0-> 1的值插值，取决于当前时间的流逝）。然后我们使用自定义缓动，我们可以使用一次停止。

anim = Raphael.animation({cx: 270, cy: 100},4000,'easeInOutReturn')
              .repeat(Infinity);

...
circle.stop(anim);

jsfiddle 2

Raphael顺序动画

1 个答案: