標(biāo)簽: 雜談 |
T1-17 卷軸動(dòng)畫(huà)界面
1、窗口設(shè)計(jì)
新建項(xiàng)目中MainWindow的Window屬性:
“外觀”欄目中,WindowStyle-None,窗口最上方的控制條被去除;
“布局”欄目中,Height=600,Width=800;
“公共屬性”欄目中,WindowStartupLocation-CenterScreen。
LayoutRoot屬性設(shè)置為:
“畫(huà)筆”欄目中,Background-純色畫(huà)筆,深紫色。
2、畫(huà)面
畫(huà)面由3部分元素組成。1是圖片Image控件(pict1),2是背景(實(shí)際上是1個(gè)被填充圖形的Rectangle控件,名為bj),3是白色矩形邊框,也是Rectangle控件,名為rectanle。圖片pict1“裱”在有背景圖案的“矩形”上,矩形圖案這樣完成:在項(xiàng)目中“添加現(xiàn)有項(xiàng)”插入圖片“背景2.jpg”、拖入【設(shè)計(jì)面板】并選中,選擇菜單“工具”-“生成畫(huà)筆資源”(ImageBrish資源),用此資源作為背景“矩形”屬性“Fill”的“畫(huà)筆資源”,具體操作可以參考“設(shè)計(jì)基礎(chǔ)”。
這3部分元素用Grid組合在一起。
3、卷軸
共2個(gè)卷軸,每個(gè)卷軸由2個(gè)矩形組成,其中1個(gè)矩形構(gòu)成軸面,選擇紅色漸變畫(huà)筆,畫(huà)筆設(shè)置如圖T1-18所示。為了使白色光線沿軸向伸展,需要使用【工具】面板中的“漸變工具”調(diào)整漸變方向。
另1個(gè)矩形構(gòu)成軸心,選擇黑色漸變畫(huà)筆,設(shè)置同前,長(zhǎng)度略長(zhǎng),同時(shí)矩形邊角調(diào)成“弧形”,如圖T1-19所示。
T1-18 軸面畫(huà)筆設(shè)置
T1-19 軸心畫(huà)筆設(shè)置
將這2個(gè)矩形用Grid組合,名為zhouLeft,復(fù)制又生成1個(gè)卷軸zhouRight。
4、遮罩
動(dòng)畫(huà)的初始狀態(tài)是2個(gè)卷軸??吭谧蠖耍床坏疆?huà)面,這實(shí)際上是被1個(gè)矩形(Rectangle控件,名為zhezhao)遮罩,此矩形的Fill顏色和窗口的Background顏色一樣(可以設(shè)置1個(gè)畫(huà)筆資源,窗口的background和遮罩矩形的Fill屬性都采用此畫(huà)筆資源)。
左邊軸不動(dòng),右邊軸平移到右端8秒,停止8秒,再以同樣時(shí)間返回到左端;同時(shí)拖動(dòng)遮罩矩形左邊做同步運(yùn)動(dòng)(矩形的X方向變換,Y軸不動(dòng)),這樣動(dòng)畫(huà)就完成了。故事板設(shè)計(jì)如T1-19a所示。
T1-19a 卷軸動(dòng)畫(huà)故事板設(shè)計(jì)
T1-19b 卷軸動(dòng)畫(huà)觸發(fā)器設(shè)計(jì)
6、鼠標(biāo)點(diǎn)擊右邊的卷軸
鼠標(biāo)點(diǎn)擊右邊的卷軸zhouRight,無(wú)論用鼠標(biāo)的左鍵或右鍵,引發(fā)動(dòng)畫(huà)重復(fù)一次,使用觸發(fā)器設(shè)計(jì),如圖t1-19b。
7、關(guān)閉按鈕
“關(guān)閉”按鈕,其Click事件代碼:
Application.Current.Shutdown();
(或this.Close();)聯(lián)系客服