[UWP]使用CompositionAPI的翻轉動畫

1. 運行效果

在使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow) 這篇文章裏我介紹了一個包含長陰影的番茄鍾，這個番茄鍾在狀態切換時用到了翻轉動畫，效果如上所示，還用到了彈簧動畫，可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的，但火火已經寫好了這個FlipSide控件，Github地址在這裏，這篇文章就介紹下這個控件的部分原理。

2. TransformMatrix

Visual的 TransformMatrix 屬性是一個 Matrix4x4 的struct，它是應用於元素的轉換矩陣，可以進行動畫處理。它的默認值如下：

這時候動畫效果如下：

要使Visual可以正確旋轉需要按以下方式處理：

private void UpdateTransformMatrix(FrameworkElement element)
{
    var host = ElementCompositionPreview.GetElementVisual(element);
    var size = element.RenderSize.ToVector2();
    if (size.X == 0 || size.Y == 0) return;
    var n = -1f / size.X;

    Matrix4x4 perspective = new Matrix4x4(
        1.0f, 0.0f, 0.0f, 0.0f,
        0.0f, 1.0f, 0.0f, 0.0f,
        0.0f, 0.0f, 1.0f, n,
        0.0f, 0.0f, 0.0f, 1.0f);

    host.TransformMatrix =
        Matrix4x4.CreateTranslation(-size.X / 2, -size.Y / 2, 0f) *
        perspective *
        Matrix4x4.CreateTranslation(size.X / 2, size.Y / 2, 0f);
}

講真我也不明白爲什麼要這麼寫，只知道是從微軟的例子裏抄的。每當SizeChanged事件發生時都需要調用這個函數重新設置TransformMatrix。

3. RotationAngleInDegrees

Visual包含兩個相似的屬性，RotationAngleInDegrees 和 RotationAngle，它們的定義如下：

//
// 摘要:
//     視覺對象的旋轉角度（以度爲單位）。 可動畫處理。
//
// 返回結果:
//     The rotation angle of the visual in degrees.
public float RotationAngleInDegrees { get; set; }
//
// 摘要:
//     視覺對象的旋轉角度（以弧度爲單位）。 可動畫處理。
//
// 返回結果:
//     The rotation angle in radians of the visual.
public float RotationAngle { get; set; }

這兩個屬性都用於控制Visua圍繞着RotationAxis和CenterPoint旋轉。在FlipSide這個控件裏RotationAngleInDegrees比較適用：

float f1 = 0f, f2 = 0f;
if (IsFlipped)
{
    f1 = 180f;
    f2 = 360f;
    VisualStateManager.GoToState(this, "Slide2", false);
}
else
{
    f1 = 0f;
    f2 = 180f;
    VisualStateManager.GoToState(this, "Slide1", false);
}
if (springAnimation1 != null && springAnimation2 != null)
{
    springAnimation1.FinalValue = f1;
    springAnimation2.FinalValue = f2;
    s1Visual.StartAnimation("RotationAngleInDegrees", springAnimation1);
    s2Visual.StartAnimation("RotationAngleInDegrees", springAnimation2);
}

這段代碼用到了SpringAnimatin，所以有彈一下的效果。

4. RotationAxis

RotationAxis 用於指定Visual旋轉的軸。FlipSide可以通過設置RotationAxis改變翻轉的角度，例如火火的Demo裏使用根據鼠標改變RotationAxis：

private void OnFlipSidePointerReleased(object sender, PointerRoutedEventArgs e)
{
    var position = e.GetCurrentPoint(_FlipSide).Position;
    var v2 = (position.ToVector2() - _FlipSide.RenderSize.ToVector2() / 2);
    _FlipSide.Axis = new Vector2(-v2.Y, v2.X);
}

5. ExpressionAnimation

<controls:FlipSide x:Name="FlipSide" IsFlipped="True">
    <controls:FlipSide.Side1>
        <Grid Background="#FFE87A69" x:Name="InworkElement" CornerRadius="1">

        </Grid>
    </controls:FlipSide.Side1>
    <controls:FlipSide.Side2>
        <Grid Background="#FF5271c2" x:Name="BreakElement" CornerRadius="1">

        </Grid>
    </controls:FlipSide.Side2>
</controls:FlipSide>

上面XAML爲FlipSide的調用代碼，它將Side1和Side2（這個命名超讓高達迷興奮）作爲內容顯示在UI上，當IsFlipped爲False時顯示Side1的內容，當IsFlipped爲True時代表翻轉過去，此時顯示Side2的內容。在翻轉動畫的過程中，何時隱藏Side1並顯示Side2是個麻煩事。幸好UWP有強大的表達式動畫（ExpressionAnimation），FlipSide只用了下面幾句代碼處理這個問題：

s1Visual = ElementCompositionPreview.GetElementVisual(Side1Content);
s2Visual = ElementCompositionPreview.GetElementVisual(Side2Content);

var opacity1Animation = compositor.CreateExpressionAnimation("this.Target.RotationAngleInDegrees > 90 ? 0f : 1f");
var opacity2Animation = compositor.CreateExpressionAnimation("(this.Target.RotationAngleInDegrees - 180) > 90 ? 1f : 0f");

s1Visual.StartAnimation("Opacity", opacity1Animation);
s2Visual.StartAnimation("Opacity", opacity2Animation);

這段代碼的意思是當Side1的RotationAngleInDegrees大於90度時隱藏，否則顯示；Side2則相反。其中，表達式中的this.Target表示使用這個表達式動畫的Vsual。

表達式動畫的話題很大，這篇文章就割愛了，可以參考下面給出的鏈接瞭解更多內容：

基於關係的動畫 - Windows UWP applications Microsoft Docs

【Win 10 應用開發】UI Composition 札記（七）：基於表達式的動畫 - 東邪獨孤 - 博客園