Raphael setting transparent png opacity loses alpha channel

问题

I'm using Raphael 2.1.0.

When I animate the opacity of a transparent PNG under IE8, the transparency animates well. ie: 'from' an opacity of 0.0 'to' an opacity of 1.0.

After the opacity animation has ended, I want to set/restore the image's position/opacity to a pre-animation state, but the alpha channel of the image becomes opaque. Where there was once a transparent background there is now a white square.

With an SVG renderer - Chrome and Firefox - things are fine. I've tried chaining the image, translation and alpha to no avail.

Here's the code:

var element = this._paper.image(image.Url(), 0, 0, width, height);
var removeOnStop = true;
var fromParams = {}
var toParams = {};

// From options
fromParams.opacity = options.from.alpha;
// ...
element.attr(fromParams);

// To options
toParams.transform = 'T300,300';
toParams.opacity = options.to.alpha;      

// Animate
var anim = Raphael.animation(toParams, duration, 'linear', function() {  
    if (removeOnStop) {
        element.attr({ opacity: defaultProperties.alpha });
        element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
    }
}).repeat(repeat);

element.animate(anim);

Any help would be greatly appreciated.

回答1:

I tried the following

Animating the alpha, everywhere, but this causes null reference issues within Raphael
Chaining translate()/transform() and attr()
Applying filters directly to the object
Changing the order (attr before transform and vice versa)

In the end, the working solution is to translate AND set the opacity using attr:

if (removeOnStop) {
    element.attr({ opacity: defaultProperties.alpha });
    element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
}

became

if (removeOnStop) {                        
    element.attr({ transform: 'T' + defaultProperties.left + ',' + defaultProperties.top, 
                     opacity: defaultProperties.alpha });
}

Importantly, you must do this when initially creating the image and setting the initial opacity.

I hope this will save people future trouble.

来源：https://stackoverflow.com/questions/13741654/raphael-setting-transparent-png-opacity-loses-alpha-channel

标签

javascript

internet-explorer

svg

raphael

vml