WPF實現漸變淡入淡出的動畫效果

2022-07-12 02:36:11 字數 3450 閱讀 7220

1.1 利用uielement.opacitymask屬性，用於改變物件區域的不透明度的畫筆。可以使元素的特定區域透明或部分透明，從而實現比較新穎的效果。

1.2 opacitymask屬性接受任何畫刷，可利用lineargradientbrush線性漸變畫刷，通過對漸變畫刷中各顏色點加以動畫處理即可。

漸變淡入效果，可通過事件觸發器觸發loaded事件實現，所以可以僅用前端xaml語言實現。

2.1 設定物件的opacitymask屬性

<


grid.opacitymask


>


<


lineargradientbrush 


startpoint


="0.5,1"


endpoint


="0.5,0"


>


<


gradientstop 


color


="#00000000"


offset


="0"


/>


<


gradientstop 


color


="#00000000"


offset


="1"


/>


<


gradientstop 


color


="#00000000"


offset


="1"


/>


lineargradientbrush


>


grid.opacitymask


>
2.2 設定物件的事件觸發器

<


grid.triggers


>


<


eventtrigger 


routedevent


="loaded"


>


<


eventtrigger.actions


>


<


beginstoryboard


>


<


storyboard


>


<


doubleanimation 


from


="1"


to="0"


duration


="0:0:1.5"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[1].offset"


/>


<


doubleanimation from="1"to="0"


duration


="0:0:1"


begintime


="0:0:0.5"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[2].offset"


/>


<


coloranimation to="#ff000000"


duration


="0"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[2].color"


/>


storyboard


>


beginstoryboard


>


eventtrigger.actions


>


eventtrigger


>


grid.triggers


>
漸變淡出效果，由於事件觸發器事件需要路由事件觸發，所以需要使用後端**實現。

3.1 準備漸變淡出的動畫和畫刷資源

<


window.resources


>


<


storyboard 


x:key


="closedstoryboard"


storyboard.targetname


="logingrid"


>


<


doubleanimation 


from


="1"


to="0"


duration


="0:0:2"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[1].offset"


/>


<


doubleanimation from="1"to="0"


duration


="0:0:1.5"


begintime


="0:0:0.5"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[2].offset"


/>


<


coloranimation to="#00000000"


duration


="0"


storyboard.targetproperty


="opacitymask.(gradientbrush.gradientstops)[2].color"


/>


storyboard


>


<


lineargradientbrush 


x:key


="closedbrush"


startpoint


="0.5,0"


endpoint


="0.5,1"


>


<


gradientstop 


color


="#ff000000"


offset


="0"


/>


<


gradientstop 


color


="#ff000000"


offset


="1"


/>


<


gradientstop 


color


="#ff000000"


offset


="1"


/>


lineargradientbrush


>


window.resources


>
3.2 後端通過繫結按鈕的click事件實現

private


void btncancel_click(object


sender, routedeventargs e)


;    std.begin();


}
4.1 效果圖如下

WPF實現漸變淡入淡出的動畫效果

原文 wpf實現漸變淡入淡出的動畫效果 1.1 利用uielement.opacitymask屬性，用於改變物件區域的不透明度的畫筆。可以使元素的特定區域透明或部分透明，從而實現比較新穎的效果。1.2 opacitymask屬性接受任何畫刷，可利用lineargradientbrush線性漸變畫刷，...

視窗淡入淡出效果的實現

1.簡介 函式 setlayeredwindowattributes header declared in winuser.h,include windows.h import library user32.lib minimum operating systems windows 2000 所以在...

視窗淡入淡出效果的實現

1.簡介 函式 setlayeredwindowattributes header declared in winuser.h,include windows.h import library user32.lib minimum operating systems windows 2000 所以在...