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

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