連續(xù)體驗(yàn)動畫是一類旨在幫助用戶理解下一組UI和上一組UI中直接相關(guān)的部分的動畫，一般發(fā)生于頁面間導(dǎo)航的時(shí)候：比如從物品列表頁面導(dǎo)航至列表中某物品的詳細(xì)信息頁面。下面這個(gè)來自官方的gif比較直觀地展示了這個(gè)動畫的效果，下面本文要講解的利用C#創(chuàng)建連續(xù)體驗(yàn)動畫旨在實(shí)現(xiàn)Motion。
2、創(chuàng)建連續(xù)體驗(yàn)動畫（使用C#）
一般地，創(chuàng)建連續(xù)體驗(yàn)動畫有下面兩步：
①準(zhǔn)備（Prepare）源頁面上的元素，通知系統(tǒng)這些元素將參與連續(xù)體驗(yàn)動畫；
②開始（Start）連續(xù)體驗(yàn)動畫，并向目標(biāo)頁面的目標(biāo)元素傳遞一個(gè)引用；
在準(zhǔn)備階段完畢之后，系統(tǒng)將不會析構(gòu)指定的元素，并讓它始終顯示在最頂層。按照MSDN的建議，連續(xù)體驗(yàn)動畫應(yīng)該開始于250毫秒之內(nèi)，否則這個(gè)一直在頂層顯示的元素就會給人一種遲滯感。如果超過3000毫秒都沒有啟動這個(gè)動畫，這個(gè)動畫和涉及到的元素就會被系統(tǒng)析構(gòu)，這之后任何嘗試啟動這個(gè)動畫的操作就會拋出異常。
為了演示這個(gè)操作，我們創(chuàng)建一個(gè)叫Connected Animation Test的工程，適當(dāng)增刪修改MainPage.xaml，使其內(nèi)容如下：
記得在你的Assets目錄下放一個(gè)Test.png，內(nèi)容是你喜歡的任何圖片。這里我用的是灰色的純色圖片。
同時(shí)創(chuàng)建一個(gè)DestinationPage，并修改其XAML為下面的內(nèi)容：
注意，這里就是我們涉及到的兩個(gè)元素：源元素SourceImage和目標(biāo)元素DestinationImage。
連續(xù)體驗(yàn)動畫都是由連續(xù)體驗(yàn)動畫服務(wù)來管理的。我們可以通過ConnectedAnimationService.GetForCurrentView()方法來獲得當(dāng)前視圖的連續(xù)體驗(yàn)動畫服務(wù)的實(shí)例，注意需要引用名稱空間Windows.UI.Xaml.Media.Animation。這個(gè)實(shí)例的類型是ConnectedAnimationService，它提供方法PrepareToAnimate()用來準(zhǔn)備一個(gè)元素，GetAnimation()用來獲取準(zhǔn)備好的動畫對象，其返回值是ConnectedAnimation類型；這個(gè)類型提供TryStart()方法來啟動動畫。為了更好地演示這個(gè)實(shí)例，我們進(jìn)一步完善MainPage.xaml：
和DestinationPage.xaml：
給MainPage中的Button_Click編寫代碼：
在這段代碼中，我們將SourceImage元素列為連續(xù)動畫的準(zhǔn)備對象，并導(dǎo)航到第二個(gè)頁面。記得引用名稱空間：
在目標(biāo)頁面DestinationPage的代碼中，override掉其基類的OnNavigateTo()方法，用于在頁面被導(dǎo)航至的時(shí)候啟動動畫：
本段代碼的作用，是獲取上個(gè)頁面創(chuàng)建的“image”動畫，并在目標(biāo)元素為DestinationImage的情況下啟動動畫。
現(xiàn)在啟動應(yīng)用程序，觀察頁面間的導(dǎo)航動畫：
可以看到，除了圖像之外的元素是按照常規(guī)的導(dǎo)航方式：第一個(gè)頁面的Button消失了，第二個(gè)頁面的TextBlock出現(xiàn)了；但是我們設(shè)置了連續(xù)動畫的對象，卻是按照我們的設(shè)想進(jìn)行動畫的。這意味著我們初步構(gòu)建的平滑動畫完成了。
另外需要提及的是，有時(shí)侯在動畫啟動時(shí)，目標(biāo)對象未必被創(chuàng)建，這就會產(chǎn)生異常。這時(shí)應(yīng)該使用類似的TryStartConnectedAnimationAsync()方法，來異步等待目標(biāo)對象被創(chuàng)建，再執(zhí)行動畫。
同時(shí)，如果你只希望設(shè)定某元素的一部分為動畫對象（比如某ListViewItem中的一個(gè)Image），你可以使用PrepareToAnimate()方法的另一個(gè)重載版本來指定源元素的一部分為動畫對象。IntelliSence功能會詳細(xì)講解它的作用。
還有最后一點(diǎn)提示：某些情況下，我們可能需要讓新頁面上的部分元素隨著連續(xù)動畫運(yùn)動，比如下面gif中，動畫元素右側(cè)的介紹信息：
我們可以通過TryStart()方法的另一個(gè)重載，在第二個(gè)參數(shù)的位置傳遞一個(gè)由希望隨著動畫運(yùn)動的元素組成的UIElement數(shù)組，就像這樣：
在上面的例子中，數(shù)組內(nèi)的DescriptionRoot元素就會跟隨動畫而移動了。
3、不適合使用連續(xù)體驗(yàn)動畫的情況
目標(biāo)元素需要等待網(wǎng)絡(luò)加載：這會使動畫產(chǎn)生嚴(yán)重的遲滯感和斷裂感；
目標(biāo)元素與源元素沒有直接關(guān)聯(lián)；
不要使元素四處亂飛。
以上就是關(guān)于利用C#創(chuàng)建連續(xù)體驗(yàn)動畫的具體方法，連續(xù)體驗(yàn)動畫是使用戶產(chǎn)生“流暢”感覺的重點(diǎn)，正確使用連續(xù)體驗(yàn)動畫來進(jìn)行頁面導(dǎo)航，并結(jié)合Fluent Design的其它部分，就可以大幅提升用戶體驗(yàn)。