WPF 進階案例（三）：模擬 QQ 「快速換裝」3D 翻頁動畫

本案例以 WPF 3D 技術複刻 QQ 空間「快速換裝」介面：按 Ctrl+←/→ 觸發圖片平滑左右滑動切換，具備立體透視與動畫緩動效果。

原始碼下載：Switch.rar

3D 場景構建

使用 ModelVisual3D 容器承載 Model3DGroup，內含 3 個 GeometryModel3D 分別對應左、中、右三張圖片：

• 中間圖：Angle=0, OffsetZ=0.5 (最近觀察者)
• 右側圖：Angle=-45°, OffsetX=1.8, OffsetZ=-2.5
• 左側圖：Angle=+45°, OffsetX=-1.8, OffsetZ=-2.5

所有模型共用同一 MeshGeometry3D (矩形幾何體)，材質為 DiffuseMaterial + ImageBrush。

C# 動畫驅動邏輯

核心方法 AnimationVisualElement 對 TranslateTransform3D (OffsetX/Y/Z) 與 AxisAngleRotation3D (Angle) 同時套用 DoubleAnimation，透過 AccelerationRatio/DecelerationRatio 實現緩入緩出：

private void AnimationVisualElement(TranslateTransform3D translate, AxisAngleRotation3D rotate,
    double targetX, double targetY, double targetZ, double angel, bool forward)
{
    var duration = new Duration(TimeSpan.FromSeconds(0.4));
    
    // OffsetX 動畫
    var animX = new DoubleAnimation { To = targetX, Duration = duration,
        AccelerationRatio = forward ? 0 : 1, DecelerationRatio = forward ? 1 : 0 };
    translate.BeginAnimation(TranslateTransform3D.OffsetXProperty, animX);
    
    // OffsetY 動畫 (不同緩動參數)
    var animY = new DoubleAnimation { To = targetY, Duration = duration,
        AccelerationRatio = forward ? 0.7 : 0.3, DecelerationRatio = forward ? 0.3 : 0.7 };
    translate.BeginAnimation(TranslateTransform3D.OffsetYProperty, animY);
    
    // OffsetZ 動畫
    var animZ = new DoubleAnimation { To = targetZ, Duration = duration,
        AccelerationRatio = forward ? 0.3 : 0.7, DecelerationRatio = forward ? 0.7 : 0.3 };
    translate.BeginAnimation(TranslateTransform3D.OffsetZProperty, animZ);
    
    // 旋轉角度動畫
    var animAngle = new DoubleAnimation { To = angel, Duration = duration,
        AccelerationRatio = forward ? 0.3 : 0.7, DecelerationRatio = forward ? 0.7 : 0.3 };
    rotate.BeginAnimation(AxisAngleRotation3D.AngleProperty, animAngle);
}

切換邏輯：集合重排 + 同步動畫

// 向右滑動 (下一張)
public void MoveCurrentToNext()
{
    var current = model3DGroup.Children[0] as GeometryModel3D; // 中間
    var left = model3DGroup.Children[2] as GeometryModel3D;    // 左側
    var right = model3DGroup.Children[1] as GeometryModel3D;   // 右側
    
    model3DGroup.Children.RemoveAt(0);
    model3DGroup.Children.Add(current); // 當前移至尾端(新左側)
    
    // 右側→中間
    AnimationVisualElement(right.Translate, right.Rotate, 0, 0, 0, 0, true);
    // 當前(中間)→左側
    AnimationVisualElement(current.Translate, current.Rotate, -1.8, 0, -2.5, 45, true);
    // 左側→右側(最遠)
    AnimationVisualElement(left.Translate, left.Rotate, 1.8, 0, -2.5, -45, true);
}

// 向左滑動 (上一張) - 邏輯對稱
public void MoveCurrentToPrevious() { ... }

鍵盤快捷鍵綁定

private void Window_KeyDown(object sender, KeyEventArgs e)
{
    if (Keyboard.Modifiers == ModifierKeys.Control)
    {
        if (e.Key == Key.Left) MoveCurrentToPrevious();
        else if (e.Key == Key.Right) MoveCurrentToNext();
    }
}

三張圖片循環切換，配合 3D 透視與緩動動畫，完美還原 QQ 風格換裝體驗。