Windows Phone開發（19）：三維透視效果

標籤：角度   如何   關係   練習   能力   為什麼   one   nbsp   express   

立體效果也可以叫透視效果，所以，我乾脆叫三維透視效果。理論知識少講，直接用例開場吧，因為這個立體效果其實很簡單，比上一節中的變換更省事，不信？一起來做一做練習吧。

練習一：把對象沿Y軸旋轉45度。

預設情況下，旋轉中心都是在中心位置上，如Y軸中心。而至於旋轉的角度，哪個方向是正值，哪個方向是負值，嘿，你自己動手試一下就知道了，我相信你能理解的，不然，Hello Kitty嘲笑你的。

好的，由於是第一個練習，我們先來說說X、Y、Z三個座標軸到底在哪，X軸不用說了，就橫著放的那個了，Y軸呢，當然是豎著的，那Z軸呢？你猜？知道這三個軸是互相垂直的，你會猜的，在哪？在圖上看不到？為什麼呢？
是啊，Z軸正指向你呢，你怎麼會看到呢？對著你那個就是了，所以，在三維透視裡面，如果你希望把對象拉遠一點，就把Z值設小一點了，如果希望對象跟你“親密”一點，那就把Z的平移值設定大一點，知道不，Z軸平稱也叫“親密指數”，呵呵。

簡直的透視效果用PlaneProjection類就可以輕鬆完成，如果要複雜的3D模型，就要求你具備灰常強大的空間思維能力了，建議使用其它的3D建模軟體如3D Max等，Express Blend支援匯入，複雜的3D 模型還是推薦使用Express Blend來圖形化操作，這樣會直觀一點，當然，如果你用PlaneProjection類，就沒必要，因為它還算比較簡單的。

好，現在我們就來做做把對象沿X軸旋轉45度吧，也就是上面圖片在的效果，當然，PlaneProjection類可以用於許多UI元素中，不一定是圖片，為了直觀和美觀，我用圖片，也順便找兩位MM來熱鬧一下。

1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"  
2.         Width="320">  
3.     <Image.Projection>  
4.         <PlaneProjection RotationY="45"/>  
5.     </Image.Projection>  
6. </Image>  

 

OK，就這麼簡單，可能在設計器裡沒有看到效果，沒關係，你現在輕輕按下F5，馬上你就會看到奇蹟發生。

這裡我提示一下，所有UI元素對PlaneProjection的使用方法都是一樣的，下文的例子中你會看到，就是設定對象的Projection屬性
。

 

練習二：沿X軸旋轉-60度。

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationX="-60"/>
            </Image.Projection>
        </Image>

和上面沒什麼區別，只是Y變成X罷了。

 

 

 

練習三：沿Z軸旋轉180度。

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationZ="180"/>
            </Image.Projection>
        </Image>

 

剛才說了，Z軸是指向你自己，可能這明顯，現在你把它改為35度，相信效果就明顯了。
        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationZ="35"/>
            </Image.Projection>
        </Image>

 

 

 

練習四：綜合旋轉。

上面的例子都是單獨旋轉某的軸的，那麼能不能X、Y、Z三軸同時幹活呢？當然可以了，XYZ搭配，幹活不累！

現在，我們把對象沿X軸旋轉15度，沿Y軸旋轉-65度，沿Z軸旋轉40度，看看會如何？

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection 
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"/>
            </Image.Projection>
        </Image>

 

 

 

 

練習五：心變中心點位置。

預設中心點位於中對象的中線上，但我們可以通過CenterOfRotationX，CenterOfRotationY，CenterOfRotationZ三個屬性來改變中心位置，值範圍0到1，兩個極端，不是在這一側就是那一側，如果是0和1之間的值就按比例計算了，如0.5就是預設的中間位置。

下面我們同時把X軸的中心改為0.2，Y軸中心改為0.7，Z軸中心改為1，看看有什麼事情發生。

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection 
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"
                    CenterOfRotationX="0.2"
                    CenterOfRotationY="0.7"
                    CenterOfRotationZ="1"/>
            </Image.Projection>
        </Image>

 

 

明顯看到，位置不在中間了，認真觀察一下，你會發現的。

 

 

練習六：本地位移。

我說的本地平移只是為了相對於螢幕平移，其實這樣翻譯有點難聽。涉及的屬性同樣有三個——LocalOffsetX, LocalOffsetY, LocalOffsetZ，相信不用我多說了，你自己玩幾下就明白，關鍵是多動手，多對比。

        <Image Source="2.jpg" Stretch="Uniform" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    LocalOffsetX="12"
                    LocalOffsetY="5"
                    LocalOffsetZ="24"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

 

 

 

練習七：全域位移。

這個全域偏就是移動螢幕座標，如果你願意去總結的話，你會發現它和解析幾何中的座標系平移的規律一樣。
即：左加右減，上加下減。
你可以不斷地改變數值來測試，相信你一定能找到規律的，呵呵，放心，Hello Kitty會鼓勵你的。

        <Image Source="2.jpg" Stretch="Uniform" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    GlobalOffsetX="8"
                    GlobalOffsetY="55"
                    GlobalOffsetZ="800"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

研究這個透視效果，還是老方法——亂來，不斷地用數值去測試，想一想，有時候亂來是很有價值的。

 

Windows Phone開發（19）：三維透視效果