Windows 10是美國(guó)微軟公司研發(fā)的跨平臺(tái)及設(shè)備應(yīng)用的操作系統(tǒng)。是微軟發(fā)布的最后一個(gè)獨(dú)立Windows版本。Windows 10共有7個(gè)發(fā)行版本，分別面向不同用戶(hù)和設(shè)備。截止至2018年3月7日，Windows 10正式版已更新至秋季創(chuàng)意者10.0.16299.309版本，預(yù)覽版已更新至春季創(chuàng)意者10.0.17120版本

　　

 

1、“連續(xù)體驗(yàn)動(dòng)畫(huà)”是什么

若干周前，微軟發(fā)布了Windows應(yīng)用新的UI設(shè)計(jì)語(yǔ)言：Fluent Design（流暢設(shè)計(jì)）。這個(gè)設(shè)計(jì)理念包含四個(gè)要素：Material（材質(zhì)），Motion（動(dòng)感），Depth（深度）和Lighting（光影）。本文要講解的連續(xù)體驗(yàn)動(dòng)畫(huà)旨在實(shí)現(xiàn)Motion。

連續(xù)體驗(yàn)動(dòng)畫(huà)是一類(lèi)旨在幫助用戶(hù)理解下一組UI和上一組UI中直接相關(guān)的部分的動(dòng)畫(huà)，一般發(fā)生于頁(yè)面間導(dǎo)航的時(shí)候：比如從物品列表頁(yè)面導(dǎo)航至列表中某物品的詳細(xì)信息頁(yè)面。下面這個(gè)來(lái)自官方的gif比較直觀地展示了這個(gè)動(dòng)畫(huà)的效果：

2、創(chuàng)建連續(xù)體驗(yàn)動(dòng)畫(huà)（使用C#）

一般地，創(chuàng)建連續(xù)體驗(yàn)動(dòng)畫(huà)有下面兩步：

①準(zhǔn)備（Prepare）源頁(yè)面上的元素，通知系統(tǒng)這些元素將參與連續(xù)體驗(yàn)動(dòng)畫(huà)；

②開(kāi)始（Start）連續(xù)體驗(yàn)動(dòng)畫(huà)，并向目標(biāo)頁(yè)面的目標(biāo)元素傳遞一個(gè)引用；

在準(zhǔn)備階段完畢之后，系統(tǒng)將不會(huì)析構(gòu)指定的元素，并讓它始終顯示在最頂層。按照MSDN的建議，連續(xù)體驗(yàn)動(dòng)畫(huà)應(yīng)該開(kāi)始于250毫秒之內(nèi)，否則這個(gè)一直在頂層顯示的元素就會(huì)給人一種遲滯感。如果超過(guò)3000毫秒都沒(méi)有啟動(dòng)這個(gè)動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)和涉及到的元素就會(huì)被系統(tǒng)析構(gòu)，這之后任何嘗試啟動(dòng)這個(gè)動(dòng)畫(huà)的操作就會(huì)拋出異常。

為了演示這個(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)動(dòng)畫(huà)都是由連續(xù)體驗(yàn)動(dòng)畫(huà)服務(wù)來(lái)管理的。我們可以通過(guò)ConnectedAnimationService.GetForCurrentView()方法來(lái)獲得當(dāng)前視圖的連續(xù)體驗(yàn)動(dòng)畫(huà)服務(wù)的實(shí)例，注意需要引用名稱(chēng)空間Windows.UI.Xaml.Media.Animation。這個(gè)實(shí)例的類(lèi)型是ConnectedAnimationService，它提供方法PrepareToAnimate()用來(lái)準(zhǔn)備一個(gè)元素，GetAnimation()用來(lái)獲取準(zhǔn)備好的動(dòng)畫(huà)對(duì)象，其返回值是ConnectedAnimation類(lèi)型；這個(gè)類(lèi)型提供TryStart()方法來(lái)啟動(dòng)動(dòng)畫(huà)。為了更好地演示這個(gè)實(shí)例，我們進(jìn)一步完善MainPage.xaml：

和DestinationPage.xaml：

給MainPage中的Button_Click編寫(xiě)代碼：

在這段代碼中，我們將SourceImage元素列為連續(xù)動(dòng)畫(huà)的準(zhǔn)備對(duì)象，并導(dǎo)航到第二個(gè)頁(yè)面。記得引用名稱(chēng)空間：

在目標(biāo)頁(yè)面DestinationPage的代碼中，override掉其基類(lèi)的OnNavigateTo()方法，用于在頁(yè)面被導(dǎo)航至的時(shí)候啟動(dòng)動(dòng)畫(huà)：

本段代碼的作用，是獲取上個(gè)頁(yè)面創(chuàng)建的“image”動(dòng)畫(huà)，并在目標(biāo)元素為DestinationImage的情況下啟動(dòng)動(dòng)畫(huà)。

現(xiàn)在啟動(dòng)應(yīng)用程序，觀察頁(yè)面間的導(dǎo)航動(dòng)畫(huà)：

可以看到，除了圖像之外的元素是按照常規(guī)的導(dǎo)航方式：第一個(gè)頁(yè)面的Button消失了，第二個(gè)頁(yè)面的TextBlock出現(xiàn)了；但是我們?cè)O(shè)置了連續(xù)動(dòng)畫(huà)的對(duì)象，卻是按照我們的設(shè)想進(jìn)行動(dòng)畫(huà)的。這意味著我們初步構(gòu)建的平滑動(dòng)畫(huà)完成了。

另外需要提及的是，有時(shí)侯在動(dòng)畫(huà)啟動(dòng)時(shí)，目標(biāo)對(duì)象未必被創(chuàng)建，這就會(huì)產(chǎn)生異常。這時(shí)應(yīng)該使用類(lèi)似的TryStartConnectedAnimationAsync()方法，來(lái)異步等待目標(biāo)對(duì)象被創(chuàng)建，再執(zhí)行動(dòng)畫(huà)。

同時(shí)，如果你只希望設(shè)定某元素的一部分為動(dòng)畫(huà)對(duì)象（比如某ListViewItem中的一個(gè)Image），你可以使用PrepareToAnimate()方法的另一個(gè)重載版本來(lái)指定源元素的一部分為動(dòng)畫(huà)對(duì)象。IntelliSence功能會(huì)詳細(xì)講解它的作用。

還有最后一點(diǎn)提示：某些情況下，我們可能需要讓新頁(yè)面上的部分元素隨著連續(xù)動(dòng)畫(huà)運(yùn)動(dòng)，比如下面gif中，動(dòng)畫(huà)元素右側(cè)的介紹信息：

我們可以通過(guò)TryStart()方法的另一個(gè)重載，在第二個(gè)參數(shù)的位置傳遞一個(gè)由希望隨著動(dòng)畫(huà)運(yùn)動(dòng)的元素組成的UIElement數(shù)組，就像這樣：

在上面的例子中，數(shù)組內(nèi)的DescriptionRoot元素就會(huì)跟隨動(dòng)畫(huà)而移動(dòng)了。

3、不適合使用連續(xù)體驗(yàn)動(dòng)畫(huà)的情況

目標(biāo)元素需要等待網(wǎng)絡(luò)加載：這會(huì)使動(dòng)畫(huà)產(chǎn)生嚴(yán)重的遲滯感和斷裂感；

目標(biāo)元素與源元素沒(méi)有直接關(guān)聯(lián)；

不要使元素四處亂飛。

4、總結(jié)

連續(xù)體驗(yàn)動(dòng)畫(huà)是使用戶(hù)產(chǎn)生“流暢”感覺(jué)的重點(diǎn)。正確使用連續(xù)體驗(yàn)動(dòng)畫(huà)來(lái)進(jìn)行頁(yè)面導(dǎo)航，并結(jié)合Fluent Design的其它部分，將大幅提升用戶(hù)體驗(yàn)。 

新技術(shù)融合：在易用性、安全性等方面進(jìn)行了深入的改進(jìn)與優(yōu)化。針對(duì)云服務(wù)、智能移動(dòng)設(shè)備、自然人機(jī)交互等新技術(shù)進(jìn)行融合。Windows 10所新增的Windows Hello功能將帶來(lái)一系列對(duì)于生物識(shí)別技術(shù)的支持。除了常見(jiàn)的指紋掃描之外，系統(tǒng)還能通過(guò)面部或虹膜掃描來(lái)讓你進(jìn)行登入。當(dāng)然，你需要使用新的3D紅外攝像頭來(lái)獲取到這些新功能。