2

Raphael 2.1.0 を使用しています。

IE8 で透過 PNG の不透明度をアニメーション化すると、透明度がうまくアニメーション化されます。つまり、「from」不透明度 0.0 から「to」不透明度 1.0 です。

不透明度アニメーションが終了した後、画像の位置/不透明度をアニメーション前の状態に設定/復元したいのですが、画像のアルファチャンネルが不透明になります。以前は透明な背景があった場所に、白い四角形が表示されます。

SVG レンダラー (Chrome と Firefox) を使用すると問題ありません。画像、翻訳、アルファを連鎖させようとしましたが、役に立ちませんでした。

コードは次のとおりです。

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

私は次のことを試しました

  • どこでもアルファをアニメーション化しますが、これにより Raphael 内で null 参照の問題が発生します
  • 連鎖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 に答える