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中的软类型用于我们的好处 - 数字可以被评估为布尔值并充当标志。

查看live demo on jsFiddle。

作为旁注，我建议在触发任何动画之前添加对stop()的调用，以防止重叠动画，例如：
```
this.stop().animate(animAttrArr[+(now = !now)], 1000, "easeout");
```
另一方面，可以通过提取计数器的模数和数组长度来更新代码以支持切换n > 2转换，然后递增它（谢谢，@ gion_13）：< / p>
```
this.stop().animate(animAttrArr[now++ % animAttrArr.length], 1000, "easeout");
```
模运算优先于增量，所以不要担心命中+Infinity（如果你真的担心:)）。

RaphaelJS Toggle Transformation

1 个答案: