Question

我正在创建customAttributes in Raphaeljs。我试图将其他参数传递给animate方法 - 每次调用都不应该增加。

目前，我正在使用Element.data（）方法，但这很容易出现一些严重的问题，因为它本质上是全局的，并且无法在一次排队多个动画时存活（幅度总是代表排队的最后一个动画））。

我显然无法想到这个角落。

var paper = new Raphael(document.getElementById('paper'), 500, 500);

// draw a line for reference
paper.path('M100,100 l300,0').attr({stroke: 'black', 'stroke-width': 1, opacity: .5});

/**
 * move a graphic, but with some swagger
 *
 * @param {number} step the raphael increment
 * @param {int}    magnitude a fixed number representing the amount of swagger to apply
 */
paper.customAttributes.swagger = function(step) {
    var mag = this.data('magnitude');
    var x = 0;
    var y = mag*Math.sin(step);
    return { transform: 't' + x + ',' + y };
}

var rect = paper.rect(100,100, 50,50).attr({
    fill: 'red',
    swagger: [0,0]  // initialize swagger so we avoid the nasty NaN issue
}) 
.data('magnitude', 100); // declare our additional argument, other ways to do this?

rect.animate({
    swagger: [10]
}, 1000);

Answer 1

为什么不为此采取customAttributes？

只需使用

创建自定义属性即可

paper.customAttributes.magnitude = function() {}; // that's enough

然后使用

在其他自定义属性中使用它

this.attr('magnitude');

使用.customAttributes代替.data

的多个动画

Here's a fiddle

将参数传递给Raphael customAttributes方法

1 个答案: