Animations in UWP Community Toolkit - Overview

来源:https://www.cnblogs.com/shaomeng/archive/2018/04/17/8678641.html
-Advertisement-
Play Games

概述 UWP Community Toolkit 中有一個 Animations 的集合，它們可以幫助開發者實現很多的動畫，本篇我們先來看一下 Animations 的功能都有哪些，再後面會針對每一種 Animations 做詳細的代碼分析。 Animations 集合涵蓋了很多種類的動畫，我們先來 ...


概述

UWP Community Toolkit  中有一個 Animations 的集合，它們可以幫助開發者實現很多的動畫，本篇我們先來看一下 Animations 的功能都有哪些，再後面會針對每一種 Animations 做詳細的代碼分析。

Animations 集合涵蓋了很多種類的動畫，我們先來看一下官方示例的截圖：

下麵我們分別來看一下每一種動畫的調用過程和展示效果。

 

調用示例

1. Blur

模糊動畫，可以通過增加或減少像素尺寸來使 XAML 元素變模糊，可以應用在所有 XAML 元素上，不影響控制項的功能本身。

來看一個簡單的調用示例：

我們針對一張圖片做 Blur 處理，動畫開始前如圖一所示，動畫後如圖二所示；

<Page ...
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors">
...
<Border Background="Gray" Width="400" Height="300">
    <Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/01.jpg" Height="300" Width="400" />
    <interactivity:Interaction.Behaviors>
        <behaviors:Blur x:Name="BlurBehavior"
                Value="1"
                Duration="3000"
                Delay="0"
                EasingType="Linear"
                AutomaticallyStart="True"/>
    </interactivity:Interaction.Behaviors>
</Border>
using Microsoft.Toolkit.Uwp.UI.Animations;
...
await ToolkitLogo.Blur(value: 10, duration: 10, delay: 0).StartAsync();

 

2. Connected Animations

連接動畫，可以通過讓一個元素在兩種不同視圖的動畫來創建一個動態並且引人註目的導航體驗。連接動畫的 XAML 附加屬性可以通過簡單的添加允許動畫的元素鍵值來在 XAML 中直接定義，同樣定位動畫和 lists 中的動畫也可以通過附加屬性來定義。簡單來說，就是在頁面導航時，指定導航前和導航後的元素，讓後者在前者的位置開始做動畫，平移至最後的位置，這會讓頁面導航更加動態和豐富；

幾個重要的屬性：

  • Connected.Key - 通過 ConnectedAnimationsService 來註冊元素，為了讓動畫生效，導航前後頁面的元素必須使用同一個鍵值；導航後頁面的對應元素會從導航前頁面元素的位置開始動畫；
  • Connected.AnchorElement - 為了啟用 Connected Animation，在應該和 Connected Animation 元素並肩出現的元素上使用 AnchorElement 附加屬性；
  • Connected.ListItemKey - 為 ListView 或 GridView 註冊 Connected Animation，當頁面導航中使用了這個屬性，那麼導航後頁面的對應元素，會根據導航傳入的參數，選擇 List 中選中的元素作為動畫基準進行動畫；必須配合 Connected.ListItemElementName 屬性來使用。
  • Connected.ListItemElementName - 指定 item 的 DateTemplate 中對應名字的元素應該執行動畫，必須配合 Connected.ListItemKey 屬性來使用；

來看一個簡單的調用示例：

我們有三個頁面，第一個頁面指定一個按鈕，第二個頁面的 Header 元素指定從按鈕開始動畫，第三個頁面根據第二個頁面選擇的元素開始動畫；

第一個頁面代碼：

指定 Connected.Key，定義 Navigate 操作；

<Button Click="Button_Click" Content="Start Connected Animations" animations:Connected.Key="item" 
HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
this.Frame.Navigate(typeof(MainPage));

第二個頁面代碼：

指定 Connected.Key，Connected.AnchorElement，Connected.ListItemElementName 和 Connected.ListItemKey，定義 Navigate 操作，傳入當前點擊元素；

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Border x:Name="HeroElement"
                Height="300" 
                Width="300"
                Background="Purple"
                animations:Connected.Key="item"></Border>
        <StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500" animations:Connected.AnchorElement="{x:Bind HeroElement}">
            <TextBlock Text="Header" FontSize="50"></TextBlock>
            <TextBlock TextWrapping="WrapWholeWords">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend ex sit amet blandit lobortis. Curabitur ut diam fringilla, interdum massa sit amet, facilisis erat. Donec vulputate sed ex vel pellentesque. In sodales odio non felis interdum viverra. Morbi in mi mollis, ullamcorper nibh sit amet, sagittis ex. Maecenas dapibus commodo venenatis. Donec at egestas est.</TextBlock>
        </StackPanel>
    </StackPanel>
    <GridView x:Name="listView" 
                Margin="0, 40, 0, 0" 
                SelectionMode="None" 
                Grid.Row="1"
                ItemClick="listView_ItemClick" 
                IsItemClickEnabled="True"
                animations:Connected.ListItemElementName="ItemThumbnail"
                animations:Connected.ListItemKey="listItem">
        <GridView.ItemTemplate .../ >
    </GridView>
</Grid>
Frame.Navigate(typeof(ThirdPage), e.ClickedItem);

第三個頁面代碼：

指定 Connected.AnchorElement 和 Connected.Key，定義 OnNavigatedTo 事件接受第二個頁面傳遞的參數；

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
    <StackPanel x:Name="HeroDetailsElement" 
                Margin="20,0" 
                VerticalAlignment="Bottom" 
                MaxWidth="500" 
                animations:Connected.AnchorElement="{x:Bind ItemHeroElement}">
        <TextBlock Text="Test" FontSize="50"></TextBlock>
        <TextBlock TextWrapping="WrapWholeWords">...</TextBlock>
    </StackPanel>
    <Border x:Name="ItemHeroElement" 
            Height="300" Width="300" 
            Background="Purple" 
            animations:Connected.Key="listItem"></Border>
</StackPanel>
<TextBlock x:Name="Content" Margin="0,40" TextWrapping="WrapWholeWords" > ...</TextBlock>
item = e.Parameter as DataItem;
base.OnNavigatedTo(e);

3. Fade

淡入淡出動畫，可以隨著時間的推移對 XAML 元素進行淡入淡出的動畫處理，不會影響元素本身的功能；

來看一個簡單的調用示例：

我們針對一張圖片做 Fade 處理，動畫開始前如圖一所示，動畫後如圖二所示；

<Border Background="Gray" Width="400" Height="300">
    <Image x:Name="ToolkitLogo" Source="ms-appx:///Assets/01.jpg" Height="400" Width="300" >
        <interactivity:Interaction.Behaviors>
            <behaviors:Fade x:Name="Fade" Value="0" Duration="1000" Delay="2000" EasingType="Linear" AutomaticallyStart="False"/>
        </interactivity:Interaction.Behaviors>
    </Image>
</Border>

 

4. FadeHeader

Header 淡入淡出動畫可以在滾動時讓 ListView 和 GridView 的 Header 元素實現淡入淡出，當 Header 達到顯示邊界的時候，透明度漸變為 0；

來看一個簡單的調用示例：

我們創建了一個 GridView 控制項，指定它的 Header 執行 FadeHeader 動畫，可以看到當沒有滾動時，Header 是藍色沒有透明度變化；當滾動到約一半位置時，Header 執行動畫導致透明度變低，有淡出效果；

<GridView x:Name="listView" 
            Margin="0, 40, 0, 0" 
            SelectionMode="None" 
            Grid.Row="1">
        <interactivity:Interaction.Behaviors>
            <behaviors:FadeHeaderBehavior />
        </interactivity:Interaction.Behaviors>
        <GridView.Header>
            <Grid x:Name="MyHeaderGrid" MinHeight="250" Background="Blue">
                <StackPanel VerticalAlignment="Center"
                    HorizontalAlignment="Center">
                    <TextBlock Text="This Is The Header" TextAlignment="Center"
                        FontWeight="Bold" FontSize="48" Foreground="White" Margin="12" />
                    <TextBlock Text="It starts with 100% opacity but will fade to 0% as you scroll up."
                    Foreground="White" Margin="12,0,12,12" VerticalAlignment="Center" TextAlignment="Center" />
                </StackPanel>
            </Grid>
        </GridView.Header>
        ...
</GridView/>

 

5. Implicit Animations

隱式動畫，是一種合成動畫，用於在屬性變化時描述動畫應該怎麼和何時發生，比如透明度和偏移。Show 和 Hide 動畫用於描述在元素可見屬性改變時的動畫；使用附加屬性可以在 XAML 中進行定義，包括 XAML resources 和 element；而且它可以和我們前面說過的 VisualExtensions 一起使用。

以下幾個重要屬性需要關註：

  • Implicit.Animations - 制定一個動畫集合，當屬性變化時會執行動畫；如果一個動畫集合不包含 keyFrame 信息，則這個動畫會被定義為一個針對 Target 的動畫，當 Target 對應屬性變化時，會觸發這個動畫從現有值到變化後的值的動畫；當動畫包含 ImplicitTarget 屬性時，當可視化屬性變化時會觸發動畫；動畫需要指定 To From 動畫屬性；
  • Implicit.ShowAnimations and Implicit.HideAnimations - 當元素添加或刪除，或者 Visibility 變化時觸發；

來看一個簡單的調用示例：

我們對 Border 執行 Implicit 動畫，看一下包含了哪些組合的動畫：Show 動畫，包括平移和透明度變化；Hide 動畫類似；以及 Animations，包含三種不同的動畫，一是針對 Target Offset 的動畫，二是針對 ImplicitTarget Offset 的動畫，三是針對 Target Scale 的動畫；我們操作讓 Border 隱藏和顯示，看一下動畫效果：

<Canvas>
    <Border x:Name="Element" Height="100" Width="100" Background="Red" Canvas.Top="100" Canvas.Left="100" extensions:VisualEx.CenterPoint="50,50,0">
        <animations:Implicit.ShowAnimations>
            <animations:TranslationAnimation Duration="0:0:1" From="0, -200, 0" To="0" ></animations:TranslationAnimation>
            <animations:OpacityAnimation Duration="0:0:1" From="0" To="1.0"></animations:OpacityAnimation>
        </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:ScalarAnimation Target="Opacity" Duration="0:0:1" To="0.0"></animations:ScalarAnimation>
                    <animations:ScalarAnimation Target="Translation.Y" Duration="0:0:1" To="-200">
                        <animations:ScalarKeyFrame Key="0.1" Value="30"></animations:ScalarKeyFrame>
                        <animations:ScalarKeyFrame Key="0.5" Value="0.0"></animations:ScalarKeyFrame>
                    </animations:ScalarAnimation>
                </animations:Implicit.HideAnimations>
                <animations:Implicit.Animations>
                    <!-- Notice this animation does not have a From/To value or any KeyFrames. In this case, an ExpressionKeyFrame will be added of Value=this.FinalValue -->
                    <animations:Vector3Animation Target="Offset"  Duration="0:0:1"></animations:Vector3Animation>

                    <!-- Notice this animation specifies an ImplicitTarget different from Target. In this case, the animation will run when the Offset is changed -->
                    <animations:ScalarAnimation Target="RotationAngleInDegrees" ImplicitTarget="Offset"  Duration="0:0:1.2" From="0" To="0">
                        <animations:ScalarKeyFrame Key="0.9" Value="80"></animations:ScalarKeyFrame>
                    </animations:ScalarAnimation>

                    <animations:Vector3Animation Target="Scale" Duration="0:0:1"></animations:Vector3Animation>
                </animations:Implicit.Animations>
            </Border>
</Canvas>

6. Light

光效動畫，展示了一個點光源出現在元素中間的動畫效果；distance 屬性決定了光源的亮度，光源越近，元素越暗；

幾個重要屬性需要關註：

  • Distance - 點光源的距離，0 是最遠的；
  • Color - 點光源的顏色畫刷；

來看一個簡單的調用示例：

在 Logo 圖片上實現一個 Light Animation，DIstance 是 10，Color 是紅色；

<Image x:Name="logo" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Height="100" Width="100" >
    <interactivity:Interaction.Behaviors>
        <behaviors:Light x:Name="LightBehavior" Distance="10" Duration="500" Delay="0" AutomaticallyStart="False" EasingType="Linear" Color="Red" />
    </interactivity:Interaction.Behaviors>
</Image>

7. Offset

偏移動畫，用於把控制項從一個地方移動到另一個地方，也是應用於所有的 XAML 元素，不影響控制項本身的功能；

其中 EasingType 需要重點關註，它會決定偏移動畫的動畫形式，具體的動畫類型可以在這裡看到：Offset Animation - Easing Type.

來看一個簡單的調用示例：

我們讓一個 Image X 和 Y 方向都偏移 25 像素，EasingType 是 Elastic；看下動畫效果。

<Image x:Name="logo" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Height="100" Width="100" >
    <interactivity:Interaction.Behaviors>
        <behaviors:Offset x:Name="OffsetBehavior" OffsetX="25.0" OffsetY="25.0" Duration="2500" Delay="250" EasingType="Elastic" AutomaticallyStart="True"/>
    </interactivity:Interaction.Behaviors>
</Image>

8. ReorderGridAnimation

Grid 重排序動畫，當 GridView 尺寸變化時，ReorderGridAnimation 動畫可以讓元素通過動畫移動到新的位置；只需要在 GridView 中通過附加屬性指定 ReorderGridAnimation 的 Duration 就可以實現動畫的定義；

來看一個簡單的調用示例：

<GridView x:Name="ImageView"
        animations:ReorderGridAnimation.Duration="100">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Image Width="200"
                Height="200"
                Source="{Binding Thumbnail}"
                Stretch="UniformToFill" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

9. Rotate

旋轉動畫允許用戶修改和定義控制項旋轉動畫，也是應用於所有的 XAML 元素，不影響控制項本身的功能；

其中 EasingType 需要重點關註，它會決定旋轉動畫的動畫形式，具體的動畫類型可以在這裡看到：Rotate Animation - Easing Type.

來看一個簡單的調用示例：

<Border Background="Gray" Width="400" Height="300">
    <Image x:Name="logo" Source="ms-appx:///Assets/01.jpg" Height="400" Width="300" >
        <interactivity:Interaction.Behaviors>
            <behaviors:Rotate x:Name="Rotate" Value="100" CenterX="200" CenterY="150" Duration="2000" Delay="0" EasingType="Linear" AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>
    </Image>
</Border>

10. Saturation

飽和度動畫可以有選擇的對 XAML 元素的飽和度執行動畫，也是應用於所有的 XAML 元素，不影響控制項本身的功能；

來看一個簡單的調用示例：

<Border Background="Gray" Width="400" Height="300">
    <Image x:Name="logo" Source="ms-appx:///Assets/01.jpg" Height="400" Width="300" >
        <interactivity:Interaction.Behaviors>
            <behaviors:Saturation x:Name="SaturationBehavior" Value="0.24" Duration="3000" Delay="0" EasingType="Linear" AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>
    </Image>
</Border>

11. Scale

縮放動畫允許用戶修改和定義控制項縮放動畫，也是應用於所有的 XAML 元素，不影響控制項本身的功能；

其中 EasingType 需要重點關註，它會決定縮放動畫的動畫形式，具體的動畫類型可以在這裡看到：Scale Animation - Easing Type.

來看一個簡單的調用示例：

<Border Background="Gray" Width="400" Height="300">
    <Image x:Name="logo" Source="ms-appx:///Assets/01.jpg" Height="400" Width="300" >
        <interactivity:Interaction.Behaviors>
            <behaviors:Scale x:Name="Scale" ScaleX="0.53" ScaleY="0.31" CenterX="200" CenterY="150" Duration="2000" EasingType="Linear" AutomaticallyStart="True"/>
        </interactivity:Interaction.Behaviors>
    </Image>
</Border>

 

 

總結

到這裡我們就把 UWP Community Toolkit 中的 Animations 的種類和簡單的代碼調用講解完成了，希望這些擴展對大家開發 UWP 應用有所幫助，如果大家有更好用的動畫類，也歡迎大家給 UWPCommunityToolkit 做 PR，貢獻自己的代碼，歡迎大家多多交流！

而在後面，我會針對每種 Animation 做詳細的代碼分析和講解，謝謝大家支持！

最後，再跟大家安利一下 UWPCommunityToolkit 的官方微博：https://weibo.com/u/6506046490, 大家可以通過微博關註最新動態。

衷心感謝 UWPCommunityToolkit 的作者們傑出的工作，Thank you so much, UWPCommunityToolkit authors!!!

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [原創軟體]PC端與移動端文件信息互通工具
    一個不小心，花了幾個小時，就做出來了一個專利，這不科學啊。。。 軟體主要功能： 跨平臺（已適配Mac、Windows）遠程連接手機端和PC端 遠程執行shell命令 遠程和本地文件實現互通傳輸共用 顯示執行日誌 軟體界面截圖： 開發環境及語言： Python3.6 PyQt5.10 更新日誌： v1 ...
  • （二）數據類型基礎
    基本數據類型 一、數字 int整型 定義：age=10 age=int(10) 用於標識：年齡，等級，身份證號，qq號，個數 二、float浮點型 定義：salary=3.1 salary=float(3.1) 用於標識：工資，身高，體重， 字元串 三、字元串類型 在python中，加了引號的字元就 ...
  • (一)變數與input
    變數、用戶交互input 一、什麼是變數 可以變化的值都稱為變數，變數用於存儲數據並且更主要的是調用。 每生成一個變數，都會開闢一塊兒新的記憶體空間，將數據放入其中，並將變數名當做引線。如果把記憶體看做一幢樓，變數相當於其中分配的一個房間，變數名相當於門牌號。 常量即指不變的量 如pai 3.14159 ...
  • CI中的資料庫操作
    要使用CI中的資料庫操作，首先我們應該在CI的 application/config/databass.php 文件中配置資料庫信息，通常就是配置主機名，用戶名，密碼,資料庫名，表首碼（dbprefix）； CI提供了一個database的類，但是並不預設裝載，需要手動載入；$this -> loa ...
  • 【Python3.6+Django2.0+Xadmin2.0系列教程之一】環境搭建及項目創建
    由於工作需要，接觸了大半年時間的Django+xadmin框架，一直沒空對這塊對進行相關的梳理。最近在同事的慫恿下，就在這分享下筆者的學習及工作經驗吧。 好了，話不多說，下麵開始進入正題： 環境需求： 筆者的工作系統環境：Mac 10.13.4+Python3.6.x+Django2.0.x+Xad ...
  • Java中Set集合是如何實現添加元素保證不重覆的？
    Java中Set集合是如何實現添加元素保證不重覆的？ Set集合是一個無序的不可以重覆的集合。今天來看一下為什麼不可以重覆。 ...
  • 簡單的海龜繪圖
    import turtlet=turtle.Pen()for i in range(100): t.forward(i) t.left(45) ...
  • 鐵樂學python_day20_面向對象編程2
    面向對象的組合用法 軟體重用的重要方式除了繼承之外還有另外一種方式，即：組合 組合指的是，在一個類中以另外一個類的對象作為數據屬性，稱為類的組合。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類