UWP中如何使用CompositionAPI實(shí)現(xiàn)吸頂

小編給大家分享一下UWP中如何使用Composition API實(shí)現(xiàn)吸頂，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供新泰企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站建設(shè)、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為新泰眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

先做一個簡單的頁面，頁面有一個Grid當(dāng)Header，一個去掉了頭部的Pivot，Pivot內(nèi)有三個ListView，ListView設(shè)置了和頁面Header高度一致的空白Header。

<Pagex:Class="TestListViewHeader.TestHeader2"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:TestListViewHeader"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Pivot ItemsSource="{x:Bind ItemSource}" x:Name="_pivot" SelectionChanged="_pivot_SelectionChanged" ><Pivot.Template>　　             <!--太長在這兒就不貼了--></Pivot.Template><Pivot.HeaderTemplate><DataTemplate></DataTemplate></Pivot.HeaderTemplate><Pivot.ItemTemplate><DataTemplate><ListView ItemsSource="{Binding }"><ListView.Header><Grid Height="150" /></ListView.Header><ListView.ItemTemplate><DataTemplate><TextBlock Text="{Binding }" /></DataTemplate></ListView.ItemTemplate></ListView></DataTemplate></Pivot.ItemTemplate></Pivot><Grid Height="150" VerticalAlignment="Top" x:Name="_header"><Grid.RowDefinitions><RowDefinition Height="100" /><RowDefinition Height="50" /></Grid.RowDefinitions><Grid Background="LightBlue"><TextBlock FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center">我會被隱藏</TextBlock></Grid><Grid Grid.Row="1"><ListBox SelectedIndex="{x:Bind _pivot.SelectedIndex,Mode=TwoWay}" ItemsSource="{x:Bind ItemSource}"><ListBox.ItemTemplate><DataTemplate><Grid><TextBlock Text="{Binding Title}" /></Grid></DataTemplate></ListBox.ItemTemplate><ListBox.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Horizontal" /></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox></Grid></Grid></Grid></Page>

Pivot的模板太長在這兒就不寫了，需要的話，找個系統(tǒng)內(nèi)置的畫筆資源按F12打開generic.xaml，然后搜索Pivot就是了，其他控件的模板也能通過這個方法獲取。

模板里修改這幾句就能去掉頭部：

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch"><Grid x:Name="PivotLayoutElement"><Grid.RowDefinitions><RowDefinition Height="0" /><RowDefinition Height="*" /><!--太長不寫--></Grid.RowDefinitions>

然后是后臺代碼，這里還會用到上一篇的FindFirstChild方法，在這兒就不貼出來了。

老樣子，全局的_headerVisual，最好在Page的Loaded事件里初始化我們所需要的這些變量，我偷懶了，直接放到了下面的UpdateAnimation方法里。
然后我們寫一個UpdateAnimation方法，用來在PivotItem切換的時(shí)候更新動畫的參數(shù)。

先判斷下如果未選中頁就return，然后獲取到當(dāng)前選中項(xiàng)的容器，再像上次一樣從容器里獲取ScrollViewer，不過這里有個坑，稍后再說。

void UpdateAnimation()
{if (_pivot.SelectedIndex == -1) return;var SelectionItem = _pivot.ContainerFromIndex(_pivot.SelectedIndex) as PivotItem;if (SelectionItem == null) return;var _scrollviewer = FindFirstChild<ScrollViewer>(SelectionItem);if (_scrollviewer != null)
    {
        _headerVisual = ElementCompositionPreview.GetElementVisual(_header);var _manipulationPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollviewer);var _compositor = Window.Current.Compositor;var line = _compositor.CreateCubicBezierEasingFunction(new System.Numerics.Vector2(0, 0), new System.Numerics.Vector2(0.6f, 1));var _headerAnimation = _compositor.CreateExpressionAnimation("_manipulationPropertySet.Translation.Y > -100f ? _manipulationPropertySet.Translation.Y: -100f");
        _headerAnimation.SetReferenceParameter("_manipulationPropertySet", _manipulationPropertySet);
        _headerVisual.StartAnimation("Offset.Y", _headerAnimation);
    }
}

然后在Pivot的SelectionChanged事件里更新動畫:

private void _pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    UpdateAnimation();
}

點(diǎn)下運(yùn)行，上下滑一下，并沒有跟著動。左右切換一下之后，發(fā)現(xiàn)在第二次切換到PivotItem的時(shí)候就可以跟著動了，下斷看到第一次運(yùn)行到"var _scrollviewer = FindFirstChild<ScrollViewer>(SelectionItem);"的時(shí)候_scrollviewer為null。想了好久才意識到，是不是控件沒有Loaded的問題，所以才取不到子控件？說改就改。

void UpdateAnimation()
{if (_pivot.SelectedIndex == -1) return;var SelectionItem = _pivot.ContainerFromIndex(_pivot.SelectedIndex) as PivotItem;if (SelectionItem == null) return;var _scrollviewer = FindFirstChild<ScrollViewer>(SelectionItem);if (_scrollviewer != null)
    {
        _headerVisual = ElementCompositionPreview.GetElementVisual(_header);var _manipulationPropertySet = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollviewer);var _compositor = Window.Current.Compositor;var line = _compositor.CreateCubicBezierEasingFunction(new System.Numerics.Vector2(0, 0), new System.Numerics.Vector2(0.6f, 1));var _headerAnimation = _compositor.CreateExpressionAnimation("_manipulationPropertySet.Translation.Y > -100f ? _manipulationPropertySet.Translation.Y: -100f");
        _headerAnimation.SetReferenceParameter("_manipulationPropertySet", _manipulationPropertySet);
        _headerVisual.StartAnimation("Offset.Y", _headerAnimation);
    }elseSelectionItem.Loaded += (s, a) =>{
            UpdateAnimation();
        };
}

再次運(yùn)行，跟著動了。但是還有個問題，在每次切換的時(shí)候，Header都會回歸原位一次。這又是一個坑。
猜想在切換PivotItem的時(shí)候，_manipulationPropertySet.Translation.Y會有一個瞬間變成0。我踩過的坑大家就不要再踩了。
嘗試更新動畫前先停止動畫。

private void _pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    _headerVisual?.StopAnimation("Offset.Y");
    UpdateAnimation();
}

運(yùn)行，果然失敗了。
這時(shí)靈光一閃，動畫播放時(shí)需要時(shí)間的??！這個切換的動畫大概是五步:

觸發(fā)SelectionChanged；
頁面左移并且逐漸消失；
卸載頁面；
裝載新頁面；
頁面從右側(cè)移動到中心并且逐漸顯現(xiàn)。

第一步開始之前觸發(fā)了SelectionChanged，然后停止動畫，更新動畫，我表達(dá)式動畫都開始播放了，他的第一步還慢悠悠的沒有走完...
簡單，在SelectionChanged里加延時(shí)，就能解決(是嗎)Header歸位的問題(這里又埋下一個坑):

private async void _pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    _headerVisual?.StopAnimation("Offset.Y");await Task.Delay(180);
    UpdateAnimation();
}

運(yùn)行，很完美。然后在手機(jī)上試了一下，差點(diǎn)哭了。
對于點(diǎn)擊和觸摸兩種操作方式，切換頁時(shí)觸發(fā)事件和播放動畫的順序不一樣！
觸摸造成的切換頁，大概是如下幾步:

滑動造成頁面位移，松手后頁面左移并且逐漸消失
觸發(fā)SelectionChanged；
卸載頁面；
裝載新頁面；
頁面從右側(cè)移動到中心并且逐漸顯現(xiàn)。

可是頁面消失后_manipulationPropertySet.Translation.Y會有一瞬間變成0??！這時(shí)候的我真的是崩潰的，不過最后還是給我想出了解決方案。
_manipulationPropertySet.Translation.Y變成0的時(shí)候不理他不就好了，不能再機(jī)智。這樣也不需要SelectionChanged里寫延時(shí)了，感覺自己的代碼一下子變得優(yōu)雅了很多呢。
修改_headerAnimation的表達(dá)式:

 _headerAnimation = _compositor.CreateExpressionAnimation(

注:其中max，min，clamp都是表達(dá)式動畫中內(nèi)置的函數(shù)，相關(guān)的信息可以查看附錄。

再進(jìn)行測試，完美通過，又填好一個坑。玩弄了這個Demo一會兒后，總覺得還有些不足，左右切換頁的時(shí)候，頭部上下移動太生硬了。我的設(shè)想是在調(diào)整頭部位置動畫的Complate事件里開始頭部的表達(dá)式動畫，說干咱就干:

var line = _compositor.CreateCubicBezierEasingFunction(new System.Numerics.Vector2(0, 0), new System.Numerics.Vector2(0.6f, 1));var MoveHeaderAnimation = _compositor.CreateScalarKeyFrameAnimation();
MoveHeaderAnimation.InsertExpressionKeyFrame(0f, "_headerVisual.Offset.Y", line);
MoveHeaderAnimation.InsertExpressionKeyFrame(1f, "_manipulationPropertySet.Translation.Y > -100f ? _manipulationPropertySet.Translation.Y: -100f", line);
MoveHeaderAnimation.SetReferenceParameter("_headerVisual", _headerVisual);
MoveHeaderAnimation.SetReferenceParameter("_manipulationPropertySet", _manipulationPropertySet);
MoveHeaderAnimation.DelayTime = TimeSpan.FromSeconds(0.18d);
MoveHeaderAnimation.Duration = TimeSpan.FromSeconds(0.1d);

創(chuàng)建一個關(guān)鍵幀動畫，line是緩動效果。關(guān)鍵幀動畫ScalarKeyFrameAnimation可以插入兩種幀，一種是InsertKeyFrame(float,float,easingfunctuin)，插入一個數(shù)值幀；一種是InsertExpressionKeyFrame(float,string,easingfunctuin)，插入一個表達(dá)式幀，兩者的第一個參數(shù)是進(jìn)度，最小是0最大是1；第三個參數(shù)都是函數(shù)，可以設(shè)置為線性，貝塞爾曲線函數(shù)和步進(jìn)。

這時(shí)候就又發(fā)現(xiàn)了一個驚！天！大！秘！密！
CompositionAnimation和CompositionAnimationGroup是沒有Complated事件的！
只能手動給延時(shí)了。然后...
表達(dá)式動畫不！支！持！延！時(shí)！好尷尬。

同樣是動畫，看看隔壁家的StoryBoard，CompositionAnimation你們羞愧不羞愧。

經(jīng)過一番必應(yīng)之后，我發(fā)現(xiàn)我錯怪了他們，CompositionAnimation也可以做到Complated事件，只是方法有些曲折而已。

動畫完成事件
通過使用關(guān)鍵幀動畫，開發(fā)人員可以在完成精選動畫（或動畫組）時(shí)使用動畫批來進(jìn)行聚合。僅可以批處理關(guān)鍵幀動畫完成事件。表達(dá)式動畫沒有一個確切終點(diǎn)，因此它們不會引發(fā)完成事件。如果表達(dá)式動畫在批中啟動，該動畫將會像預(yù)期那樣執(zhí)行，并且不會影響引發(fā)批的時(shí)間。
當(dāng)批內(nèi)的所有動畫都完成時(shí)，將引發(fā)批完成事件。引發(fā)批的事件所需的時(shí)間取決于該批中時(shí)長最長的動畫或延遲最為嚴(yán)重的動畫。在你需要了解選定的動畫組將于何時(shí)完成以便計(jì)劃一些其他工作時(shí)，聚合結(jié)束狀態(tài)非常有用。
批在引發(fā)完成事件后釋放。還可以隨時(shí)調(diào)用 Dispose() 來盡早釋放資源。如果批處理的動畫結(jié)束較早，并且你不希望繼續(xù)完成事件，你可能會想要手動釋放批對象。如果動畫已中斷或取消，將會引發(fā)完成事件，并且該事件會計(jì)入設(shè)置它的批。

在動畫開始前，新建一個ScopedBatch對象，然后播放動畫，緊接著關(guān)閉ScopedBatch，動畫運(yùn)行完之后就會觸發(fā)ScopedBatch的Completed事件。在ScopedBatch處于運(yùn)行狀態(tài)時(shí)，會收集所有動畫，關(guān)閉后開始監(jiān)視動畫的進(jìn)度。說的云里來霧里去的，還是看代碼吧。

var Betch = _compositor.CreateScopedBatch(Windows.UI.Composition.CompositionBatchTypes.Animation);
_headerVisual.StartAnimation("Offset.Y", MoveHeaderAnimation);
Betch.Completed += (s, a) =>{var _headerAnimation = _compositor.CreateExpressionAnimation("_manipulationPropertySet.Translation.Y > -100f ? (_manipulationPropertySet.Translation.Y == 0?This.CurrentValue :_manipulationPropertySet.Translation.Y) : -100f");//_manipulationPropertySet.Translation.Y是ScrollViewer滾動的數(shù)值，手指向上移動的時(shí)候，也就是可視部分向下移動的時(shí)候，Translation.Y是負(fù)數(shù)。_headerAnimation.SetReferenceParameter("_manipulationPropertySet", _manipulationPropertySet);
    _headerVisual.StartAnimation("Offset.Y", _headerAnimation);
};
Betch.End();

我們把構(gòu)造和播放_headerAnimation的代碼放到了ScopedBatch的Complated事件里，這時(shí)再運(yùn)行一下，完美。

UWP中如何使用Composition API實(shí)現(xiàn)吸頂

其實(shí)還是有點(diǎn)小問題，比如Header沒有設(shè)置Clip，上下移動的時(shí)候有時(shí)會超出預(yù)期的范圍之類的，有時(shí)間我們會繼續(xù)討論，這篇已經(jīng)足夠長，再長會嚇跑人的。
Demo已經(jīng)放到Github，里面用到了一個寫的很糙的滑動返回控件，等忙過這段時(shí)間整理下代碼就開源，希望能有大牛指點(diǎn)一二。

Github:

總結(jié)一下，實(shí)現(xiàn)吸頂最核心的代碼就是獲取到ScrollViewer，不一定要是ListView的，明白了這一點(diǎn)，所有含有ScrollViewer的控件都可以放到這個這個頁面使用。

滑動返回:

UWP中如何使用Composition API實(shí)現(xiàn)吸頂

以上是UWP中如何使用Composition API實(shí)現(xiàn)吸頂?shù)乃袃?nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：UWP中如何使用CompositionAPI實(shí)現(xiàn)吸頂
文章地址：http://aaarwkj.com/article18/iiddgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、軟件開發(fā)、服務(wù)器托管、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

UWP中如何使用CompositionAPI實(shí)現(xiàn)吸頂