AS3過濾器輝光不補間

Question

我正在做一個帶有兩個過濾器的按鈕，當用戶將鼠標懸停在其上時（鼠標懸停），當光標退出時，又進行兩個過濾器補間。 很基本的東西。

過濾器是Glow和DropShadow。 發光應用於文本，而DropShadow應用於按鈕背景（一個簡單的矩形）。

這里的問題是GlowIn的過渡不起作用。 鼠標懸停在濾鏡上時，它將立即以全alpha值應用濾鏡。 雖然GlowOut有效。

盡管將其設置為0.25時間，但為確保可以確定，我嘗試用了整整5秒鍾的時間，但仍然無法正常工作，因此這不是計時問題。

這是我的代碼：

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
import flash.filters.GlowFilter;
FilterShortcuts.init();

texto.mouseEnabled = false;

this.addEventListener(MouseEvent.MOUSE_OVER, FiltersIn);
this.addEventListener(MouseEvent.MOUSE_OUT, FiltersOut);

var glow = new GlowFilter(0xFFFFFF, 0, 5, 5, 3, 250);
texto.filters = [glow];

function FiltersIn(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:5, _DropShadow_alpha:1, _DropShadow_blurX:5, _DropShadow_blurY:5, time:0.25, transition:"easeOutCubic"});
    Tweener.addTween(texto, {_Glow_alpha:100, time:0.25, transition:"easeOutCubic"});
}
function FiltersOut(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:0, _DropShadow_alpha:0, _DropShadow_blurX:0, _DropShadow_blurY:0, time:0.25, transition:"EaseInCubic"});
    Tweener.addTween(texto, {_Glow_alpha:0, time:0.25, transition:"easeInCubic"});
}

Answer 1

問題在於，輝光濾鏡的alpha屬性的范圍是0到1，而不是0到100。但是Tweener仍然尊重您提供的值-因此在插值alpha值時，它會跳到1以上。到100，可能在第一幀。 所以這就是為什么您看到它立即變為完全alpha。 如果將100換成1，就可以解決它。

反向補間仍然按預期工作的原因是因為alpha值被限制為1，所以即使試圖將其設置為50、60等，也將其設置為100，當輝光濾鏡存儲實際值時，它也會設置上限它在1處允許反向補間在1和0之間平滑插值。

修改如下：

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
import flash.filters.GlowFilter;
FilterShortcuts.init();

texto.mouseEnabled = false;

this.addEventListener(MouseEvent.MOUSE_OVER, FiltersIn);
this.addEventListener(MouseEvent.MOUSE_OUT, FiltersOut);

var glow = new GlowFilter(0xFFFFFF, 0, 5, 5, 3, 250);
texto.filters = [glow];

function FiltersIn(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:5, _DropShadow_alpha:1, _DropShadow_blurX:5, _DropShadow_blurY:5, time:0.25, transition:"easeOutCubic"});
    Tweener.addTween(texto, {_Glow_alpha:1, time:0.25, transition:"easeOutCubic"});
}
function FiltersOut(MouseEvent):void{
    Tweener.addTween(this, {_DropShadow_distance:0, _DropShadow_alpha:0, _DropShadow_blurX:0, _DropShadow_blurY:0, time:0.25, transition:"EaseInCubic"});
    Tweener.addTween(texto, {_Glow_alpha:0, time:0.25, transition:"easeInCubic"});
}

Answer 2

編輯：由於混雜因素，先前的答案不正確！ 請查看新答案。

Answer 3

專家提示：不用擔心使用Tweener :)使用GreenSock的Tweenmax或Starling的Juggler-它們只是最好的