Raphael js - live opacity on the group, retaining individual elements of opacity

Question

How can I animate opacity on a bunch of Raphael objects as a single object, while maintaining separate opacity states of the elements? I can’t animate on sets without affecting every single element, so how do I create one object for processing - I think in jQuery thinking if that helps answer.

Answer 1

A general solution that works for any number of elements, any number of changes and any number of sets should use .customAttributes , which calculate and maintain the correct opacity of the level for each element in the set based on the value applied to this individual element and the value for the set.

For example (in the demo, click several times to see that the opacity of a set of three circles changes in one direction, and a separate circle pressed on the other):

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

Using something like this, which essentially adds this function to all existing and future sets and elements in this Raphael paper example:

 // 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 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 }; } 

You might want to add some kind of check if your code may go wrong if any of the user attributes are below 0.0 or above 1.0.

Each time you set the opacity of an element, use animate({elemOpacity: xx}, time); (or .attr() ), and it takes into account the specified opacity, and anytime you want to set the opacity of the set, call animate({setOpacity: xx}, time); in the set, and it will take into account the opacity of each element.

---

In some cases, with complex sets, and not with animating many elements that can be slow in many browsers, this is much better for performance, but easier for just overlaying on top ... This is a good idea if the elements that are being talked about speech, .toBack() can be sent .toBack() , and you do not need to interact (click, hover) with them further.

Just add an overlay rectangle to match the inherited color of the container element ( here to dynamically inherit the background color ), send it, then set .toBack() and animate the opacity of that overlay.

Answer 2

If you save a global variable, you can do it. Take a look 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}); });