1

有什么方法可以切换您在 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"
    });

});
4

1 回答 1

3

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

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

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

我们只是在 JavaScript 中使用软类型来为我们带来好处——数字可以被评估为布尔值并充当标志。

在 jsFiddle 上查看现场演示。

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

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

  • 作为另一个说明，可以通过提取计数器的模数和数组长度来更新代码以支持n > 2转换的切换，然后将其递增（感谢@gion_13）：

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

    模运算将优先于增量，所以不要担心命中+Infinity（如果你真的很担心:)）。

于 2013-02-07T23:07:20.353 回答