WPF 實現圖片瀏覽的偽 3D 橢圓旋轉效果

專案需以「炫麗」方式展示圖片，嘗試真 3D 僅能做出旋轉立方體，因時程緊迫轉向偽 3D：圖片依橢圓軌道排列並旋轉，配合縮放、透明度變化產生立體感。

數學基礎

• 橢圓參數方程：x = a * cos(θ), y = b * sin(θ)
• 透視縮放：scale = k / (z + d)，z 由 cos(θ) 推導
• Z-index 依縮放大小排序，近大遠小
• 透明度隨深度遞減

資料模型

public class ImageInfo : INotifyPropertyChanged
{
    public string ImagePath { get; set; }
    public double Left { get; set; }      // Canvas.Left
    public double Top { get; set; }       // Canvas.Top
    public double Width { get; set; }
    public double Height { get; set; }
    public double Opacity { get; set; }
    public int ZIndex { get; set; }
    // INotifyPropertyChanged 實作略
}

ViewModel 核心邏輯

1. 建立 ObservableCollection<ImageInfo>，載入圖片路徑。
2. DispatcherTimer 每 50ms 更新角度 θ += Δθ。
3. 遍歷集合，依索引計算各項目角度 θ_i = θ + i * (2π / N)。
4. 套用橢圓公式計算 Left、Top、Width、Height、Opacity、ZIndex，觸發屬性通知。

XAML 繫結

<ItemsControl ItemsSource="{Binding Images}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate><Canvas/></ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding Left}"/>
            <Setter Property="Canvas.Top" Value="{Binding Top}"/>
            <Setter Property="Width" Value="{Binding Width}"/>
            <Setter Property="Height" Value="{Binding Height}"/>
            <Setter Property="Opacity" Value="{Binding Opacity}"/>
            <Setter Property="Panel.ZIndex" Value="{Binding ZIndex}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate><Image Source="{Binding ImagePath}" Stretch="UniformToFill"/></DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

效果調整參數

• a, b：橢圓長短軸，控制扁平度
• minScale, maxScale：最近/最遠縮放比
• opacityRange：透明度區間
• timer.Interval：旋轉速度

心得

偽 3D 只需 2D 變換即可達到視覺效果，效能極佳，且數學邏輯清晰易維護。參考了 JavaScript 版本的橢圓排列算法移植而來。