Question

我正在使用Raphael 2.1.0。

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

不透明度动画结束后，我想将图像的位置/不透明度设置/恢复到动画前的状态，但图像的Alpha通道变得不透明。曾经有过透明背景的地方现在有一个白色方块。

使用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，反之亦然）

最后，工作解决方案是使用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 });
}

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

我希望这能为将来的人们带来麻烦。

拉斐尔设置透明png不透明度失去alpha通道

1 个答案: