javascript - RaphaelJS 切换转换

Question

有什么方法可以切换您在 RaphaelJS 中所做的转换吗？截至目前，以下代码可以在单击时使圆圈变大。我需要的是切换转换，以便我可以再次单击，然后圆圈缩小并移回原位。

window.onload = function() {
    centerX = 300;
    centerY = 300;
    var paper = new Raphael(document.getElementById('canvas_container'), 900, 900);

    //setup main circle
    var mainCircle = paper.circle(centerX,centerY,90);
    mainCircle.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: -90  
        }  
    );


    //when clicking main circle
    mainCircle.click( function(e) {

        //move and grow the main circle
        mainCircle.animate({cx:00, cy:00, r:100}, 1000, "easeout");
        mainCircle.animate({
                "transform": "s " + (s = 3)}, 1000, "easeout"
    });

});

Answer 1

您可以应用一个简单的技巧来切换动画属性(或与此相关的任何对象)；将它们放在一个数组中，并通过引用一个数字开关作为索引来交替调用它们:

var animAttrArr = [{
    "transform": "s 3"
}, {
    "transform": "s 1"
}],
    now = 1;

mainCircle.click(function (e) {
    this.animate(animAttrArr[+(now = !now)], 1000, "easeout");
});

我们只是为了自己的利益而使用 JavaScript 中的软类型——数字可以计算为 bool 值并充当标志。

查看live demo on jsFiddle .

---

• 作为旁注，我建议在触发任何动画之前添加对 stop() 的调用，以防止重叠动画，例如:

  this.stop().animate(animAttrArr[+(now = !now)], 1000, "easeout");
  

• 另一方面，可以通过提取计数器的模数和数组长度来更新代码以支持切换 n > 2 转换，然后递增它(谢谢， @gion_13):

  this.stop().animate(animAttrArr[now++ % animAttrArr.length], 1000, "easeout");
  

  模运算将优先于增量，所以不用担心会碰到 +Infinity(以防您真的担心 :))。