javascript - 拉斐尔设置透明png不透明度失去alpha channel

Question

我正在使用 Raphael 2.1.0。

当我在 IE8 下为透明 PNG 的不透明度设置动画时，透明度动画效果很好。即:“从”0.0 的不透明度“到”1.0 的不透明度。

不透明度动画结束后，我想将图像的位置/不透明度设置/恢复到动画前的状态，但图像的 alpha channel 变得不透明。曾经有透明背景的地方现在变成了白色方 block 。

使用 SVG 渲染器 - Chrome 和 Firefox - 一切都很好。我试过将图像、翻译和 alpha 链接起来，但无济于事。

代码如下:

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);

如有任何帮助，我们将不胜感激。

Answer 1

我尝试了以下方法

• 在所有地方为 alpha 设置动画，但这会导致 Raphael 中出现空引用问题
• 链接 translate()/transform() 和 attr()
• 直接对对象应用过滤器
• 改变顺序(attr 在 transform 之前，反之亦然)

最后，可行的解决方案是使用 attr 转换和设置不透明度:

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

成为

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

重要的是，您必须在最初创建图像和设置初始不透明度时执行此操作。

我希望这能为人们省去 future 的麻烦。