[UWP]用Shape做動畫(2):使用與擴展PointAnimation

来源:http://www.cnblogs.com/dino623/archive/2017/06/15/UWP_Shape_PointAnimation.html
-Advertisement-
Play Games

上一篇幾乎都在說DoubleAnimation的應用，這篇說說PointAnimation。 1. 使用PointAnimation 使用PointAnimation可以讓Shape變形，但實際上沒看到多少人會這麼用，畢竟WPF做的軟體多數不需要這麼花俏。 1.1 在XAML上使用PointAnim ...


上一篇幾乎都在說DoubleAnimation的應用，這篇說說PointAnimation。

1. 使用PointAnimation

使用PointAnimation可以讓Shape變形，但實際上沒看到多少人會這麼用，畢竟WPF做的軟體多數不需要這麼花俏。

1.1 在XAML上使用PointAnimation

<Storyboard x:Name="Storyboard2"
            RepeatBehavior="Forever"
            AutoReverse="True"
            Duration="0:0:4">
    <PointAnimation Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)"
                    Storyboard.TargetName="Path2"
                    To="0,0"
                    EnableDependentAnimation="True" />
    <PointAnimation Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"
                    Storyboard.TargetName="Path2"
                    To="100,0"
                    EnableDependentAnimation="True" />
    <ColorAnimation To="#FF85C82E"
                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                    Storyboard.TargetName="Path2" />
</Storyboard>


…


<Path Margin="0,20,0,0"
      x:Name="Path2"
      Fill="GreenYellow">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="50,0">
                <LineSegment Point="50,0" />
                <LineSegment Point="0,100" />
                <LineSegment Point="0,100" />
                <LineSegment Point="100,100" />
                <LineSegment Point="100,100" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

在這個例子里最頭痛的地方是Property-path 語法，如果不能熟記的話最好依賴Blend生成。

1.2 在代碼中使用PointAnimation

如果Point數量很多，例如圖表，通常會在C#代碼中使用PointAnimation：

_storyboard = new Storyboard();
Random random = new Random();

for (int i = 0; i < _pathFigure.Segments.Count; i++)
{
    var animation = new PointAnimation { Duration = TimeSpan.FromSeconds(3) };
    Storyboard.SetTarget(animation, _pathFigure.Segments[i]);
    Storyboard.SetTargetProperty(animation, "(LineSegment.Point)");
    animation.EnableDependentAnimation = true;
    animation.EasingFunction = new QuarticEase { EasingMode = EasingMode.EaseOut };
    animation.To = new Point((_pathFigure.Segments[i] as LineSegment).Point.X, (i % 2 == 0 ? 1 : -1) * i * 1.2 + 60);
    _storyboard.Children.Add(animation);
}
_storyboard.Begin();

因為可以直接SetTarget，所以Property-path語法就可以很簡單。

2. 擴展PointAnimation

上面兩個例子的動畫都還算簡單，如果更複雜些，XAML或C#代碼都需要寫到很複雜。我參考了這個網頁 想做出類似的動畫，但發現需要寫很多XAML所以放棄用PointAnimation實現。這個頁面的動畫核心是這段HTML：

<polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
    67.2,60.9">
      
      <animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 
    71.1,116.7"/>
            
      <animate id="animation-to-star" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
    67.2,60.9"/>
      
    </polygon>

只需一組Point的集合就可以控制所有Point的動畫，確實比PointAnimation高效很多。 在WPF中可以通過繼承Timeline實現一個PointCollectionAnimamtion，具體可以參考這個項目。可惜的是雖然UWP的Timeline類並不封閉，但完全不知道如何繼承並派生一個自定義的Animation。

這時候需要稍微變通一下思維。可以將DoubleAnimation理解成這樣：Storyboard將TimeSpan傳遞給DoubleAnimation，DoubleAnimation通過這個TimeSpan（有時還需要結合EasingFunction）計算出目標屬性的當前值最後傳遞給目標屬性，如下圖所示：

既然這樣，也可以接收到這個計算出來的Double，再通過Converter計算出目標的PointCollection值：

假設告訴這個Converter當傳入的Double值（命名為Progress）為0的時候，PointCollection是{0,0 1,1 …}，Progress為100時PointCollection是{1,1 2,2 …}，當Progress處於其中任何值時的計算方法則是：

private PointCollection GetCurrentPoints(PointCollection fromPoints, PointCollection toPoints, double percentage)
{
    var result = new PointCollection();
    for (var i = 0;
        i < Math.Min(fromPoints.Count, toPoints.Count);
        i++)
    {
        var x = (1 - percentage / 100d) * fromPoints[i].X + percentage / 100d * toPoints[i].X;
        var y = (1 - percentage / 100d) * fromPoints[i].Y + percentage / 100d * toPoints[i].Y;

        result.Add(new Point(x, y));
    }
    return result;
}

這樣就完成了從TimeSpan到PointCollection的轉換過程。然後就是定義在XAML上的使用方式。參考上面PointCollectionAnimation，雖然多了個Converter，但XAML也應該足夠簡潔：

<local:ProgressToPointCollectionBridge x:Name="ProgressToPointCollectionBridge">
    <PointCollection>97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9</PointCollection>
    <PointCollection>110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7</PointCollection>
</local:ProgressToPointCollectionBridge>

<Storyboard x:Name="Storyboard1"
            FillBehavior="HoldEnd">
    <DoubleAnimation Duration="0:0:2"
                        To="100"
                        FillBehavior="HoldEnd"
                        Storyboard.TargetProperty="(local:ProgressToPointCollectionBridge.Progress)"
                        Storyboard.TargetName="ProgressToPointCollectionBridge"
                        EnableDependentAnimation="True"/>
</Storyboard>


…


<Polygon x:Name="polygon"
            Points="{Binding Source={StaticResource ProgressToPointCollectionBridge},Path=Points}"
            Stroke="DarkOliveGreen"
            StrokeThickness="2"
            Height="250"
            Width="250"
            Stretch="Fill" />

最終我選擇了將這個Converter命名為ProgressToPointCollectionBridge。可以看出Polygon 將Points綁定到ProgressToPointCollectionBridge，DoubleAnimation 改變ProgressToPointCollectionBridge.Progress，從而改變Points。XAML的簡潔程度還算令人滿意，如果需要操作多個點的話相對於PointAnimation的優勢就很大。

運行結果如下：

完整的XAML：

<UserControl.Resources>
    <local:ProgressToPointCollectionBridge x:Name="ProgressToPointCollectionBridge">
        <PointCollection>97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9</PointCollection>
        <PointCollection>110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7</PointCollection>
    </local:ProgressToPointCollectionBridge>
    <Storyboard x:Name="Storyboard1"
                FillBehavior="HoldEnd">
        <DoubleAnimation Duration="0:0:2"
                            To="100"
                            FillBehavior="HoldEnd"
                            Storyboard.TargetProperty="(local:ProgressToPointCollectionBridge.Progress)"
                            Storyboard.TargetName="ProgressToPointCollectionBridge"
                            EnableDependentAnimation="True">
            <DoubleAnimation.EasingFunction>
                <ElasticEase EasingMode="EaseInOut" />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <ColorAnimation Duration="0:0:2"
                        To="#FF48F412"
                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                        Storyboard.TargetName="polygon"
                        d:IsOptimized="True">
            <ColorAnimation.EasingFunction>
                <ElasticEase EasingMode="EaseInOut" />
            </ColorAnimation.EasingFunction>
        </ColorAnimation>
    </Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
        Background="White">
    <Polygon x:Name="polygon"
                Points="{Binding Source={StaticResource ProgressToPointCollectionBridge},Path=Points}"
                Stroke="DarkOliveGreen"
                StrokeThickness="2"
                Height="250"
                Width="250"
                Stretch="Fill"
                Fill="#FFEBF412" />
</Grid>

ProgressToPointCollectionBridge:

[ContentProperty(Name = nameof(Children))]
public class ProgressToPointCollectionBridge : DependencyObject
{
    public ProgressToPointCollectionBridge()
    {
        Children = new ObservableCollection<PointCollection>();
    }


    /// <summary>
    ///     獲取或設置Points的值
    /// </summary>
    public PointCollection Points
    {
        get { return (PointCollection) GetValue(PointsProperty); }
        set { SetValue(PointsProperty, value); }
    }


    /// <summary>
    ///     獲取或設置Progress的值
    /// </summary>
    public double Progress
    {
        get { return (double) GetValue(ProgressProperty); }
        set { SetValue(ProgressProperty, value); }
    }

    /// <summary>
    ///     獲取或設置Children的值
    /// </summary>
    public Collection<PointCollection> Children
    {
        get { return (Collection<PointCollection>) GetValue(ChildrenProperty); }
        set { SetValue(ChildrenProperty, value); }
    }


    protected virtual void OnProgressChanged(double oldValue, double newValue)
    {
        UpdatePoints();
    }


    protected virtual void OnChildrenChanged(Collection<PointCollection> oldValue, Collection<PointCollection> newValue)
    {
        var oldCollection = oldValue as INotifyCollectionChanged;
        if (oldCollection != null)
            oldCollection.CollectionChanged -= OnChildrenCollectionChanged;

        var newCollection = newValue as INotifyCollectionChanged;
        if (newCollection != null)
            newCollection.CollectionChanged += OnChildrenCollectionChanged;

        UpdatePoints();
    }

    private void OnChildrenCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        UpdatePoints();
    }

    private void UpdatePoints()
    {
        if (Children == null || Children.Any() == false)
        {
            Points = null;
        }
        else if (Children.Count == 1)
        {
            var fromPoints = new PointCollection();
            for (var i = 0; i < Children[0].Count; i++)
                fromPoints.Add(new Point(0, 0));
            var toPoints = Children[0];
            Points = GetCurrentPoints(fromPoints, toPoints, Progress);
        }
        else
        {
            var rangePerSection = 100d / (Children.Count - 1);
            var fromIndex = Math.Min(Children.Count - 2, Convert.ToInt32(Math.Floor(Progress / rangePerSection)));
            fromIndex = Math.Max(fromIndex, 0);
            var toIndex = fromIndex + 1;
            PointCollection fromPoints;
            if (fromIndex == toIndex)
            {
                fromPoints = new PointCollection();
                for (var i = 0; i < Children[0].Count; i++)
                    fromPoints.Add(new Point(0, 0));
            }
            else
            {
                fromPoints = Children.ElementAt(fromIndex);
            }
            var toPoints = Children.ElementAt(toIndex);
            var percentage = (Progress / rangePerSection - fromIndex) * 100;

            Points = GetCurrentPoints(fromPoints, toPoints, percentage);
        }
    }

    private PointCollection GetCurrentPoints(PointCollection fromPoints, PointCollection toPoints, double percentage)
    {
        var result = new PointCollection();
        for (var i = 0;
            i < Math.Min(fromPoints.Count, toPoints.Count);
            i++)
        {
            var x = (1 - percentage / 100d) * fromPoints[i].X + percentage / 100d * toPoints[i].X;
            var y = (1 - percentage / 100d) * fromPoints[i].Y + percentage / 100d * toPoints[i].Y;

            result.Add(new Point(x, y));
        }
        return result;
    }

    #region DependencyProperties

        
    #endregion
}

3. 結語

如果將DoubleAnimation說成“對目標的Double屬性做動畫”，那PointAnimation可以說成“對目標的Point.X和Point.Y兩個Double屬性同時做動畫”，ColorAnimation則是“對目標的Color.A、R、G、B四個Int屬性同時做動畫”。這樣理解的話PointAnimation和ColorAnimation只不過是DoubleAnimation的延伸而已，進一步的說，通過DoubleAnimation應該可以延伸出所有類型屬性的動畫。不過我並不清楚怎麼在UWP上自定義動畫，只能通過本文的折衷方式擴展。雖然XAML需要寫複雜些，但這樣也有它的好處：

  • 不需要瞭解太多Animation相關類的知識，只需要有依賴屬性、綁定等基礎知識就夠了。
  • 不會因為動畫API的改變而更改，可以相容WPF、Silverlight和UWP（大概吧，我沒有真的在WPF上測試這些代碼）。
  • 代碼足夠簡單，省去了計算TimeSpan及EasingFunction的步驟。 稍微修改下還可以做成泛型的AnimationBridge < T >，提供PointCollection以外數據類型的支持。

結合上一篇文章再發散一下，總覺得將來遇到什麼UWP沒有提供的功能都可以通過變通的方法實現，Binding和DependencyProperty真是UWP開發者最好的朋友。

4. 參考

How SVG Shape Morphing Works
Gadal MetaSyllabus


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

-Advertisement-
Play Games
更多相關文章
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類