[UWP小白日記-10]程序啟動屏（ios解鎖既視感） 原文:[UWP小白日記-10]程序啟動屏（ios解鎖既視感）

講一下

微軟爸爸的開發者大會2016又暴了個表達式動畫和Windows.UI.Composition的API，好叼的樣子。
官方示例庫GitHub
目前是懵逼狀態，好復雜。腦細胞已經在地府排隊了。

（有沒有IOS解鎖的既視感？）上圖的效果是照搬了微軟爸爸的代碼實現的。示例項目中有一個SurfaceLoader.cs類這玩意完全可以復制到任何項目中使用

提示

當然我這里沒有改Package.appxmanifest中SplashScreen圖片的背景色，改到和擴展初始屏一致的顏色就沒違和感了

這里有個坑爹的問題，在圖上的背景色位置多次改顏色編譯都不會修改為當前設置的顏色，還是前一次的顏色，得打開Package.appxmanifest在xml中修改，不知道是不是最新的更新導致的，以前沒太注意。

不得不吐槽：你說你越更新越回去，簡體中文版還在清單中變英文，搞的我都不確定是不是下成英文版了
搞的和以前windows mobile 10 上一樣簡體中文系統設置一水的英文，

準備

1.需要添加一個內褲:Win2D。
2.把示例中的SurfaceLoader.cs類復制到自己的項目中。

第一步修改過APP.xaml.cs中的OnLaunched方法

 if (rootFrame.Content == null)
{//rootFrame.Navigate(typeof(MainPage), e.Arguments);ExtendedSplashScreen ess = new ExtendedSplashScreen(e.SplashScreen);rootFrame.Content = ess;
}

看名字就知道這個是GIF中出現的大概是橘紅色的啟動屏，就是原來的啟動屏的擴展（我無恥的連名字都照搬了

），
然后新建一個ExtendedSplashScreen.xaml頁面，后退CS中的代碼如下

        private Rect _splashImageBounds;public ExtendedSplashScreen(SplashScreen ss){this.InitializeComponent();if (ss != null){_splashImageBounds = ss.ImageLocation;}}private void Page_Loaded(object sender, RoutedEventArgs e){//創建MainPageMainPage mainPage = new MainPage(_splashImageBounds);//導航到MainPagevar rootFrame = Window.Current.Content as Frame;if (rootFrame == null){Window.Current.Content = rootFrame = new Frame();}rootFrame.Content = mainPage;}

現在到了MainPage.cs了然后復制示例代碼中

MainPage構造函數

    SurfaceLoader.Initialize(ElementCompositionPreview.GetElementVisual(this).Compositor);//顯示初始屏幕ShowCustomSplashScreen(imageBounds);

SurfaceLoader.Initialize(ElementCompositionPreview.GetElementVisual(this).Compositor);
這一句必須有,不然下面代碼暴異常
CompositionDrawingSurface surface = await SurfaceLoader.LoadFromUri(new Uri("ms-appx:///Assets/SplashScreen.png"));

顯示動畫

        private async void ShowCustomSplashScreen(Rect imageBounds){Compositor compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;Vector2 windowSize = new Vector2((float)Window.Current.Bounds.Width, (float)Window.Current.Bounds.Height);//1.創建ContainerVisual實例填充背景色和圖片；//2.設置中心縮放ContainerVisual cv = compositor.CreateContainerVisual();cv.Size = windowSize;cv.CenterPoint = new Vector3(windowSize.X, windowSize.Y, 0) * 0.5f;ElementCompositionPreview.SetElementChildVisual(this,cv);//創建sprite的背景色為APP的主題色SpriteVisual backgroundSprite = compositor.CreateSpriteVisual();backgroundSprite.Size = windowSize;backgroundSprite.Brush = compositor.CreateColorBrush((Application.Current.Resources["日間主色"] as SolidColorBrush).Color);cv.Children.InsertAtBottom(backgroundSprite);//創建包含初始屏圖像的sprite的尺寸和位置CompositionDrawingSurface surface = await SurfaceLoader.LoadFromUri(new Uri("ms-appx:///Assets/SplashScreen.png"));SpriteVisual imageSprite = compositor.CreateSpriteVisual();imageSprite.Brush = compositor.CreateSurfaceBrush(surface);imageSprite.Offset = new Vector3((float)imageBounds.X, (float)imageBounds.Y, 0f);imageSprite.Size = new Vector2((float)imageBounds.Width, (float)imageBounds.Height);cv.Children.InsertAtTop(imageSprite);}

隱藏動畫

   private void HideCustomSplashScreen(){ContainerVisual container = (ContainerVisual)ElementCompositionPreview.GetElementChildVisual(this);Compositor compositor = container.Compositor;// 設置縮放和動畫const float ScaleFactor = 20f;TimeSpan duration = TimeSpan.FromMilliseconds(1200);LinearEasingFunction linearEase = compositor.CreateLinearEasingFunction();CubicBezierEasingFunction easeInOut = compositor.CreateCubicBezierEasingFunction(new Vector2(.38f, 0f), new Vector2(.45f, 1f));// 創建淡出動畫ScalarKeyFrameAnimation fadeOutAnimation = compositor.CreateScalarKeyFrameAnimation();fadeOutAnimation.InsertKeyFrame(1, 0);fadeOutAnimation.Duration = duration;// Grid的動畫Vector2KeyFrameAnimation scaleUpGridAnimation = compositor.CreateVector2KeyFrameAnimation();scaleUpGridAnimation.InsertKeyFrame(0.1f, new Vector2(1 / ScaleFactor, 1 / ScaleFactor));scaleUpGridAnimation.InsertKeyFrame(1, new Vector2(1, 1));scaleUpGridAnimation.Duration = duration;// 初始屏動畫Vector2KeyFrameAnimation scaleUpSplashAnimation = compositor.CreateVector2KeyFrameAnimation();scaleUpSplashAnimation.InsertKeyFrame(0, new Vector2(1, 1));scaleUpSplashAnimation.InsertKeyFrame(1, new Vector2(ScaleFactor, ScaleFactor));scaleUpSplashAnimation.Duration = duration;// 設置Grid的中心縮放視覺Visual gridVisual = ElementCompositionPreview.GetElementVisual(MainFrame);gridVisual.Size = new Vector2((float)MainFrame.ActualWidth, (float)MainFrame.ActualHeight);gridVisual.CenterPoint = new Vector3(gridVisual.Size.X, gridVisual.Size.Y, 0) * .5f;// 創建一個視覺組，當改組所有視覺執行完后不再顯示CompositionScopedBatch batch = compositor.CreateScopedBatch(CompositionBatchTypes.Animation);container.StartAnimation("Opacity", fadeOutAnimation);container.StartAnimation("Scale.XY", scaleUpSplashAnimation);gridVisual.StartAnimation("Scale.XY", scaleUpGridAnimation);batch.Completed += Batch_Completed;batch.End();}

動畫完成

        private void Batch_Completed(object sender, CompositionBatchCompletedEventArgs args){// 動畫完成后處理自定義視覺效果ElementCompositionPreview.SetElementChildVisual(this, null);}

mainPage加載完成

private void Page_Loaded(object sender, RoutedEventArgs e){MainFrame.Navigate(typeof(HomePage));HideCustomSplashScreen();}

最后這個叫Widonw UI Dev Labs的示例

SurfaceLoader.cs

哈哈又水了一波

posted on 2018-03-16 10:03 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/8578876.html

總結

以上是生活随笔為你收集整理的[UWP小白日记-10]程序启动屏（ios解锁既视感）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。