[UWP]使用CompositionAPI的翻轉動畫

1. 運行效果

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

2. TransformMatrix

Visual的 屬性是一個 的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包含兩個相似的屬性， 和 ，它們的定義如下：

//
// 摘要:
//     視覺對象的旋轉角度（以度為單位）。 可動畫處理。
//
// 返回結果:
//     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

用於指定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。

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

6. 結語

感謝火火提供了這個控件，讓我可以省下了不少功夫。其實我對TransformMatrix真的不理解，所以這部分只是用，沒辦法詳細介紹。而且我以前對UI里使用3D不感興趣，所以這方面真的沒法寫更多內容。期待火火為這方面補充一些博客。

7. 參考

8. 源碼

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!