Question

如何将一堆Raphael对象的不透明度设置为一个对象，同时保持各个元素的不透明度状态？我不能在不影响每个单独元素的情况下对集合进行动画处理，因此如何创建一个要处理的对象 - 如果这有助于回答，我会在jQuery思维模式中思考。

Answer 1

一般解决方案适用于任意数量的元素，任意数量的更改和任意数量的集合是使用.customAttributes来计算和存储根据附加到该单个元素的值和该集合的值，为集合中的每个元素更正不透明度级别。

例如（在演示中，单击多次以查看三个圆的集合的不透明度改变一个方向，单个圆圈单击改变另一个方式）：

http://jsbin.com/oxeyih/9/edit

使用类似的东西，这实际上将此功能添加到此Raphael论文实例中的所有现有和未来的集合和元素中：

// apply this using .attr or .animate to sets or each in a set
// to set the opacity of the set as a whole, maintaining relative opacity
paper.customAttributes.setOpacity = function( setOpacity ){
  // elemOpacity might not be set yet
  if (typeof this.attr('elemOpacity') == 'undefined') {
    this.attr('elemOpacity', this.attr('opacity'));
  }
  return {opacity: setOpacity * this.attr('elemOpacity')};
}    

// apply this using .attr or .animate to indiviual elements
// to set that element's opacity, factoring in the opacity of the set
paper.customAttributes.elemOpacity = function( elemOpacity ){
  // setOpacity might not be set yet; setting it could create infinite loop
  var setOpacity = this.attr('setOpacity');
  setOpacity = typeof setOpacity == 'undefined' ? 1 : setOpacity;
  return {opacity: setOpacity * elemOpacity };
}

如果自定义属性中的任何一个低于0.0或高于1.0，则可能需要添加某种验证。

每当您设置元素的不透明度时，请使用animate({elemOpacity: xx}, time);（或.attr()），并且会将设置的不透明度考虑在内，并且只要您想设置一组的不透明度，在集合上调用animate({setOpacity: xx}, time);，并且会考虑每个元素的不透明度。

在某些情况下使用复杂的设置，而不是在许多浏览器中设置很多可能很慢的元素的动画，它的性能要好得多，而且更简单，只是在顶部覆盖 ...这个如果可以安全地发送有问题的元素.toBack()并且您不需要进一步与它们进行交互（点击，悬停），这是一个好主意。

只需添加一个叠加矩形，设置为匹配容器元素的继承颜色（here's a way to get inherited background colour dynamically），然后将其发送给集合.toBack()，并为该叠加层的不透明度设置动画。

Answer 2

如果保留全局变量，则可以执行此操作。请查看 DEMO 。

var p = new Raphael(10,10, 500, 500);
var x = 0.5;

var r = p.rect(20, 20, 100, 80, 5).attr({fill: 'red', opacity: x}),
    c = p.circle(200, 200, 80).attr({fill: 'orange'}),
    s = p.set(r, c);

s.click(function() {
    s[0].attr({opacity: x - 0.3});
    s[1].attr({opacity: 0.3});
});

Raphael js - 动画组的不透明度，同时保留单个元素的不透明度

2 个答案:

http://jsbin.com/oxeyih/9/edit