Question

I’m creating customAttributes in Raphaeljs. I’m attempting to pass additional arguments into an animate method–ones which should not increment with each call.

Currently, I’m using the Element.data() method, but this is prone to some some serious issues as its essentially global and won’t survive queuing multiple animations at once (the magnitude would always represent the last animation queued).

I’m apparently unable to think around this corner.

Here is what I’m doing now:

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

Why don’t you take customAttributes for this too?

Just create the custom attribute with

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

And then use it in your other custom attribute with

this.attr('magnitude');

Here’s a fiddle with more than one animation using .customAttributes instead of .data