上一篇爛文中,老周給大伙伴們介紹過了幾個比較好玩的動畫。本篇咱們深化主題,說一說基於表達式的動畫。這名字好理解,就是你可以用公式 / 等式來產生動畫的目標值。比如,你想讓某個可視化對象的高度減半,你的表達可以這樣寫: width / 2,其中,width 表示某對象的寬度。
既然說到基於表達式的動畫了,就得介紹一個重要的類型:ExpressionAnimation,它專用來實現表達式動畫的。它有一個 Expression 屬性,字符串類型,用來設置計算動畫目標值的等式。
有關表達式的語法,老周就不廢話了,其實語法和 C 類語言差不多。大伙在用的時候,也不用去記的,你只要查看 ExpressionAnimation 類的文檔,就能看到完整的幫助內容了。不記得怎么寫的時候查看一下幫助文檔就可以了。
注意,ExpressionAnimation 產生的動畫,你是不能控制其時間長度的,它會由系統來進行計算,而且這個動畫很好玩,它可以跟蹤參數的變化,當引用參數發生變化時,會更新動畫。這類似於數據綁定的功能。
下面我們舉個例子。
XAML 代碼很簡單。
<Grid Name="root" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Rectangle Name="rect" Fill="Green" Width="200" Height="200"/> </Grid>
頁面的根元素是 Grid,然后在里面放一個矩形。
待會兒我們用動畫來旋轉這個矩形,怎么轉呢,計算公式如下:
Grid的寬度 ÷ Grid的高度 × 360
這個公式會得出矩形要旋轉的角度(單位為度)。Grid 的寬度和高度不需要我們寫代碼去設置,因為默認是填充對齊的,所以,只要我們調整窗口的大小,Grid 的大小就會跟着變。
轉到代碼文件,在頁面類的構造函數中,輸入這些代碼。
public MainPage() { this.InitializeComponent(); Visual v_root = ElementCompositionPreview.GetElementVisual(root); Visual v_rect = ElementCompositionPreview.GetElementVisual(rect); var compositor = v_rect.Compositor; // 旋轉動畫 ExpressionAnimation anmitRot = compositor.CreateExpressionAnimation(); anmitRot.Expression = "360 * container.Size.X / container.Size.Y"; anmitRot.SetReferenceParameter("container", v_root); v_rect.StartAnimation(nameof(Visual.RotationAngleInDegrees), anmitRot); }
請你注意看那個表達式:360 * container.Size.X / container.Size.Y,可能你會疑問,這個 container 是什么鬼?這個不是鬼,是我隨便取的名字,你愛取其他名字都行,比如,你可以寫成 360 * dog.Size.X / dog.Size.Y。這其實是個占位符,它實際上是指向代表 Grid 的可視化對象,在運行時,會用真實的對象替換掉這個占位符。那么,這個參數占位符怎么替換呢?
你有沒有發現,CompositionAnimation 類有一堆方法,命名很 TMD 有規律,全是一家人,都叫 Set*****Parameter,看到了沒?
你以前是不是不知道這些方法有毛用,現在你應該猜它們有什么用了。對啊,就是用來設置替換占位符的實際值的。比如,我們這個示例子,它的表達式是這樣的:
360 * container.Size.X / container.Size.Y
其實這個 container 就是指代碼中的 v_root 對象,所以我們用這一行代碼,就可以在運行階段,用 v_root把 container 占位符替換掉,變成:
360 * v_root.Size.X / v_root.Size.Y
anmitRot.SetReferenceParameter("container", v_root);
而 v_root 就是 XAML 中的 Grid 對象,所以,這樣就實現了Grid的寬度除以Grid的高度的計算了,再乘以 360 就完事了。
現在你明白了吧,世上很多事情,別想得太復雜,其實人生中很多事情是很簡單,就是人總喜歡搞復雜了。
這個表達式計算出來的結果是 float 類型的值,這個你應該能理解的,因為它計算之后就是一個數值,不可能會產生一個 Vector2 值的。接着,我們把這個動畫與 v_rect,注意是rect,因為我們要旋轉的是矩形,不是Grid,用 StartAnimation 方法使之與 RotationAngleInDegrees 屬性綁定就好了,RotationAngleInDegrees 表示的角度,不是弧度。
v_rect.StartAnimation(nameof(Visual.RotationAngleInDegrees), anmitRot);
好,現在這個東東已經可以運行的了,試試看。
只要調整窗口的大小就可以了,Grid 的大小會自動更新。
你是不是對這個效果不太滿意?你會看到,媽的,旋轉的中心怎么不是在矩形中央?看着不爽。對的,默認是在左上角的,你懂的。所以,我們可以再加一個 Expression 動畫,把旋轉中心點移到矩形中央。
public MainPage() { …… Visual v_root = ElementCompositionPreview.GetElementVisual(root); Visual v_rect = ElementCompositionPreview.GetElementVisual(rect); var compositor = v_rect.Compositor; // 中心點 ExpressionAnimation anmtCP = compositor.CreateExpressionAnimation("Vector3(this.Target.Size.X / 2, this.Target.Size.Y / 2, 0)"); v_rect.StartAnimation("CenterPoint", anmtCP); …… }
這個表達式里面,用到了一個函數,叫 Vector3,它類似於調用 Vector3 結構的構造函數 new Vector3(...),所以這個表達式計算后會返回一個 Vector3 類型的值,它需要 X,Y,Z 三個值,因為Visual 類要修改中心點,是設置 CenterPoint 屬性的,而 CenterPoint 屬性是 Vector3 類型的,所以我們動畫產生的值,必須與目標值的類型匹配。
Z軸上我們不必理它,默認 0 就可以了,主要是把矩形的寬度和高度分別除以 2。
各位可能注意到了,表達式中用了 this.Target,它指向的是 v_rect,因為這個動畫是應用到 v_rect 上的(它調用了 StartAnimation 方法),所以,這個target 就是應用動畫的對象,這就等於,CenterPoint 的值取自 Size / 2。
現在,我們再運行一下,旋轉中心就在矩形的中央了。
好玩吧,其實啊,還有一件事要告訴你,表達式不僅在 ExpressionAnimation 動畫中可用,在關鍵幀動畫中也能用的。只是有個區別,ExpressionAnimation 動畫它會對計算進行跟蹤,能做到 “綁定” 的效果,但關鍵幀動畫中是不會跟蹤計算的,即所設置的表達式是一次性的。
下面給大伙們演示一下如何在關鍵幀動畫中使用表達式。
在 XAML 文檔中,放一個矩形,寬度不要設置得太大,后面咱們用動畫來放大它。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Rectangle Name="rect" Width="20" Height="120" Fill="Red" HorizontalAlignment="Left"/> <Button Grid.Row="1" Margin="12" Content="Play" Width="300" Click="OnClick" HorizontalAlignment="Center"/> </Grid>
現在處理一個按鈕的 Click 事件。用關鍵幀動畫來對矩形進行橫向(X軸)放大。
private void OnClick(object sender, RoutedEventArgs e) { Visual vs_rect = ElementCompositionPreview.GetElementVisual(rect); Compositor compositor = vs_rect.Compositor; ScalarKeyFrameAnimation animat = compositor.CreateScalarKeyFrameAnimation(); animat.Duration = TimeSpan.FromSeconds(1d); // 插入關鍵幀 animat.InsertExpressionKeyFrame(0f, "this.Target.Scale.X"); animat.InsertExpressionKeyFrame(1f, "this.Target.Scale.X >= max ? min : this.Target.Scale.X + val"); // max、min、val 都是占位符 // 替換占位符 animat.SetScalarParameter("max", 30f); animat.SetScalarParameter("min", 1f); animat.SetScalarParameter("val", 3f); vs_rect.StartAnimation("Scale.X", animat); }
這個關鍵幀動畫有兩個關鍵幀,第一幀位於動畫開始處,目標值就是矩形在X軸上的當前縮放倍數。第二個關鍵幀在動畫的結尾處,表達式有點復雜。老周單獨寫一遍給你看看。
this.Target.Scale.X >= max ? min : this.Target.Scale.X + val
這里用到了三目運算符,其實和C類語言一樣,condition ? ifTrue : ifFalse,如果矩形的X軸上的縮放值大於/等於 max 的話,那就直接返回 min ,否則就把縮放倍數加上 val。Visual 類的 Scale 屬性類型為 Vector3 ,它有 X,Y,Z 三個值,表示對象在三個軸方向上的縮放倍數。在這個例子中,咱們只處理 X 軸上的縮放。
其中,max、min、val 三個值都是我隨便命名的占位符。所以要用具體的值去替換。
animat.SetScalarParameter("max", 30f); animat.SetScalarParameter("min", 1f); animat.SetScalarParameter("val", 3f);
替換之后,這個表達式在運行時就像這樣:
this.Target.Scale.X >= 30 ? 1 : this.Target.Scale.X + 3
故,當矩形放大到 30 倍以后,會跳回到 1 倍。可以看看運行效果。
好玩吧。本篇的最后一環,老周必須再給大伙介紹一個類,因為這個類在動畫應用中也相當重要的。它叫 CompositionPropertySet,由於它是從 CompositionObject 類派生,所以,如果調用動畫對象的 SetReferenceParameter 方法去設置命名參數時,ExpressionAnimation 動畫能夠自動跟蹤 CompositionPropertySet 對象的更新。
CompositionPropertySet 用法有點像字典,Key 是字符串,你可以使用 Insert**** 方法來插入各種類型的值,可以用 TryGet**** 方法來檢索。
有些時候,動畫所跟蹤的對象不一定都是 Visual 對象的,可能是一些不可見的對象,比如某個顏色,某個數值,這種情形下,使用 CompositionPropertySet 類是一個很高大上的選擇。
不知道咋用?沒事,下面還是老規矩,動手做,學編程不動手,學三輩子也學不會。
先看看 XAML 代碼。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Border Width="300" Height="300" BorderBrush="Blue" BorderThickness="5" Name="bd" Padding="15" PointerMoved="bd_PointerMoved"> <Ellipse Name="ell" Fill="Orange"/> </Border> </Grid>
很簡單,當鼠標在 Border 上移動時,用動畫改變 Ellipse 的不透明度。計算方法很簡單,就是用當前的指針坐標的 X 值除以 Y 值,即 x / y,得出 Opacity 的值。
轉到代碼文件,要在頁面類級別聲明一個變量。
public sealed partial class MainPage : Page { CompositionPropertySet compPropset = null; …… }
因為后面我們在代碼中要動態修改它,所以要放到類級別。
然后,在頁面類的構造函數中設置一下動畫。
public MainPage() { this.InitializeComponent(); // 獲取相應的 Visual 對象 Visual vs_ell = ElementCompositionPreview.GetElementVisual(ell); // 創建 PropertySet 實例 compPropset = vs_ell.Compositor.CreatePropertySet(); // 設置默認值 compPropset.InsertVector2("MyValue", new Vector2(1f, 1f)); // 創建動畫 ExpressionAnimation animat = vs_ell.Compositor.CreateExpressionAnimation(); animat.Expression = "p.MyValue.X / p.MyValue.Y"; // 設置參數 animat.SetReferenceParameter("p", compPropset); // 啟動動畫 vs_ell.StartAnimation("Opacity", animat); }
調用 Compositor.CreatePropertySet 方法創建 CompositionPropertySet 的實例。為了稍后我們在設置動畫表達式時能夠訪問到里面的值,要先設置一個默認的值。
compPropset.InsertVector2("MyValue", new Vector2(1f, 1f));
這個值的名字就叫 MyValue,在動畫表達式中,可以直接用 . 運算符來訪問,如上面代碼中。
p.MyValue.X / p.MyValue.Y
p 稍后會用實際參數替換。
處理 PointerMoved 事件。
private void bd_PointerMoved(object sender, PointerRoutedEventArgs e) { // 獲取相對於 Border 的當前坐標 var pt = e.GetCurrentPoint(bd).Position; // 更新 CompositionPropertySet 中的值 compPropset.InsertVector2("MyValue", new Vector2((float)pt.X, (float)pt.Y)); }
首先要獲取到指針相對於 Border 元素的坐標,然后更新 PropertySet 中的 MyValue 的值,更新方法直接用 InsertVector2 方法來替換原來的值就可以了,注意,屬性名稱 MyValue 不要寫錯,一定要前后一致。
只要在程序代碼中更新 CompositionPropertySet 對象,動畫就能夠自動更新了。
看看效果。
好了,本篇咱們就聊到這里了,相信你學會使用表達式后,你就能弄出各種強大的動畫效果。