2

我正在使用拉斐尔 2.1.0。

当我在 IE8 下对透明 PNG 的不透明度进行动画处理时，透明度动画效果很好。即：“从”0.0 的不透明度“到”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);

任何帮助将不胜感激。

4

1 回答 1

3

我尝试了以下

  • 到处为 alpha 设置动画，但这会导致 Raphael 中出现空引用问题
  • 链接translate()/transform()和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 });
}

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

我希望这将为人们节省未来的麻烦。

于 2012-12-06T11:36:36.267 回答