Рафаэль, устанавливающий прозрачную прозрачность png, теряет альфа-канал

Question

Я использую Raphael 2.1.0.

Когда я анимирую непрозрачность прозрачного PNG под IE8, прозрачность хорошо анимируется. то есть: "от" непрозрачности 0,0 "до" непрозрачности 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);

Любая помощь будет принята с благодарностью.

Answer 1

Я попробовал следующее

• Анимация альфы повсюду, но это вызывает проблемы с нулевыми ссылками в Рафаэле
• Цепной 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 });
}

Важно то, что вы должны сделать это при первоначальном создании изображения и установке начальной непрозрачности.

Я надеюсь, что это спасет людей от неприятностей в будущем.