javascript - 将参数传递给 Raphael customAttributes 方法

Question

我在 Raphaeljs 创建 customAttributes。我正在尝试将其他参数传递给 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);

</p>

score 2 · Accepted Answer

你为什么不也接受customAttributes这个？

只需创建自定义属性

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

然后在您的其他自定义属性中使用它

this.attr('magnitude');

这是一个使用多个动画的小提琴.customAttributes而不是.data

javascript - 将参数传递给 Raphael customAttributes 方法

1 回答 1

Related

Reference