Expression Blend實(shí)例中文教程(8) - 動(dòng)畫設(shè)計(jì)快速入門S.docx

Expression Blend實(shí)例中文教程(8) - 動(dòng)畫設(shè)計(jì)快速入門StoryBoard 2010-03-30 02:23:59標(biāo)簽：曬文章 silverlight wpf blend 中文教程 原創(chuàng)作品，允許轉(zhuǎn)載，轉(zhuǎn)載時(shí)請(qǐng)務(wù)必以超鏈接形式標(biāo)明文章 原始出處 、作者信息和本聲明。否則將追究法律責(zé)任。/1037293/289332 上一篇，介紹了Silverlight動(dòng)畫設(shè)計(jì)基礎(chǔ)知識(shí)，Silverlight動(dòng)畫是基于時(shí)間線的，對(duì)于動(dòng)畫的實(shí)現(xiàn)，其實(shí)也就是對(duì)對(duì)象屬性的修改過程。 而Silverlight動(dòng)畫分類兩種類型，F(xiàn)rom/To/By 動(dòng)畫和關(guān)鍵幀動(dòng)畫。 對(duì)于Silverlight動(dòng)畫設(shè)計(jì)，StoryBoard是非常重要的一個(gè)功能，StoryBoard不僅僅可以對(duì)動(dòng)畫的管理，而且還可以對(duì)動(dòng)畫的細(xì)節(jié)進(jìn)行控制，例如控制動(dòng)畫的播放，暫停，停止以及跳轉(zhuǎn)動(dòng)畫位置等。 為了簡(jiǎn)化開發(fā)人員和設(shè)計(jì)人員的設(shè)計(jì)過程，Blend提供了專門的工具對(duì)StoryBoard進(jìn)行設(shè)計(jì)和管理，通過該工具可以讓設(shè)計(jì)人員和開發(fā)人員輕松的完成一個(gè)Silverlight動(dòng)畫設(shè)計(jì)，甚至不用編寫一句代碼。本篇將介紹如何在Blend中使用StoryBoard設(shè)計(jì)動(dòng)畫。從上文我們知道，Silverlight動(dòng)畫類型分兩種，F(xiàn)rom/To/By 動(dòng)畫和關(guān)鍵幀動(dòng)畫。需要注意的是Blend使用StoryBoard設(shè)計(jì)動(dòng)畫僅能支持設(shè)計(jì)和管理關(guān)鍵幀動(dòng)畫。下面使用一個(gè)簡(jiǎn)單的實(shí)例來講述StoryBoard在Blend中的使用方法。描述實(shí)例：我們想實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Image控件移動(dòng)過程，Silverlight頁面運(yùn)行后，控件會(huì)按照指定軌跡移動(dòng)。首先建立一個(gè)演示項(xiàng)目，StoryBoardDemo。項(xiàng)目創(chuàng)建完畢后，在Blend設(shè)計(jì)窗口左邊有一個(gè)Tab，“Objects and Timeline”對(duì)象和時(shí)間線，從字面意思也能看得出，是設(shè)計(jì)動(dòng)畫的選項(xiàng)，選中“Objects and Timeline”，在設(shè)計(jì)窗口可以看到，新創(chuàng)建的UserControl中只有一個(gè)LayoutRoot布局控件?，F(xiàn)在，我們添加一個(gè)新的Image控件，選中新添加的Image控件，從右邊Properties屬性欄，指定圖片來源。Image控件創(chuàng)建后，在Objects and Timeline中會(huì)看到LayoutRoot下添加了新控件。從上面可以看出，當(dāng)前控件“No StoryBoard open”，也就是說沒有任何動(dòng)畫效果，我們開始創(chuàng)建一個(gè)新的StoryBoard，選擇“New”新建一個(gè)StoryBoard，命名為myFirstStoryboard點(diǎn)擊“Ok”后，Objects and Timeline編輯框?qū)⑤d入剛剛創(chuàng)建的StoryBoard，在右邊出現(xiàn)了動(dòng)畫控制按鈕，關(guān)鍵幀設(shè)置按鈕以及時(shí)間線顯示面板。而在設(shè)計(jì)主窗口，會(huì)看到一個(gè)紅色框，這代表著控件處于動(dòng)畫錄制狀態(tài)。在紅色框左上角，有提示信息，“myFirstStoryboard timeline recording is on”，點(diǎn)擊前面紅色按鈕可以切換動(dòng)畫錄制開關(guān)“on/off”，默認(rèn)使用ON完成上面的步驟，也就完成了最簡(jiǎn)單的StoryBoard定義，下面，我們將創(chuàng)建Image控件動(dòng)畫。在Objects and Timeline中選擇Image控件，在時(shí)間線面板中，每個(gè)對(duì)象會(huì)對(duì)應(yīng)著一條陰影線，選中Image控件后，以下操作將僅對(duì)Image控件有效。在黃色進(jìn)程線為“0:00:00”的位置，點(diǎn)擊添加一個(gè)KeyFrame關(guān)鍵幀，然后移動(dòng)黃色進(jìn)程線到“0:01:000”位置，回到主設(shè)計(jì)頁面，當(dāng)前Image控件狀態(tài)是被選中的，直接拖動(dòng)Image控件到任意要移動(dòng)的位置，在設(shè)計(jì)頁面會(huì)出現(xiàn)移動(dòng)軌跡。創(chuàng)建移動(dòng)軌跡后，回到Objects and Timeline時(shí)間線設(shè)計(jì)面板，會(huì)發(fā)現(xiàn)新的關(guān)鍵幀在“0:01:000”位置已經(jīng)創(chuàng)建，而從“0:00:00”到“0:01:000”出現(xiàn)一條淺灰色的連接線。到此，一個(gè)簡(jiǎn)單的動(dòng)畫已經(jīng)創(chuàng)建，點(diǎn)擊播放按鈕，即可看到動(dòng)畫效果，Image控件，按照剛才設(shè)定的軌跡移動(dòng)。隨后，我們可以按照以上步驟快速的多添加幾個(gè)關(guān)鍵幀，讓Image控件按照不同軌跡移動(dòng)。一個(gè)簡(jiǎn)單的動(dòng)畫效果完成了。下面我們?cè)贠bjects and Timeline中，選中myFirstStoryboard，看看右邊Properties屬性欄，在屬性欄中，有“Common Properties”，常規(guī)屬性，其中AutoReverse是自動(dòng)反序運(yùn)行。RepeatBehavior是動(dòng)畫重復(fù)播放次數(shù)。當(dāng)你選中AutoReverse后，運(yùn)行動(dòng)畫，會(huì)發(fā)現(xiàn)Image控件正序移動(dòng)完，會(huì)自動(dòng)反序移動(dòng)直到起點(diǎn)。而設(shè)置RepeatBehavior將改變動(dòng)畫播放的次數(shù)。Storyboard的動(dòng)畫快速入門暫時(shí)介紹到這里了，下篇