Windows Phone開發(fā)(19):三維透視效果
三維效果也可以叫透視效果,所以,我干脆叫三維透視效果。理論知識少講,直接用例開場吧,因為這個三維效果其實很簡單,比上一節(jié)中的變換更省事,不信?一起來做一做練習(xí)吧。
練習(xí)一:把對象沿Y軸旋轉(zhuǎn)45度。
默認情況下,旋轉(zhuǎn)中心都是在中心位置上,如Y軸中心。而至于旋轉(zhuǎn)的角度,哪個方向是正值,哪個方向是負值,嘿,你自己動手試一下就知道了,我相信你能理解的,不然,Hello Kitty嘲笑你的。
好的,由于是第一個練習(xí),我們先來說說X、Y、Z三個坐標軸到底在哪,X軸不用說了,就橫著放的那個了,Y軸呢,當然是豎著的,那Z軸呢?你猜?知道這三個軸是互相垂直的,你會猜的,在哪?在圖上看不到?為什么呢?
是啊,Z軸正指向你呢,你怎么會看到呢?對著你那個就是了,所以,在三維透視里面,如果你希望把對象拉遠一點,就把Z值設(shè)小一點了,如果希望對象跟你“親密”一點,那就把Z的平移值設(shè)置大一點,知道不,Z軸平稱也叫“親密指數(shù)”,呵呵。
簡直的透視效果用PlaneProjection類就可以輕松完成,如果要復(fù)雜的3D模型,就要求你具備灰常強大的空間思維能力了,建議使用其它的 3D建模軟件如3D Max等,Express Blend支持導(dǎo)入,復(fù)雜的三維模型還是推薦使用Express Blend來圖形化操作,這樣會直觀一點,當然,如果你用PlaneProjection類,就沒必要,因為它還算比較簡單的。
好,現(xiàn)在我們就來做做把對象沿X軸旋轉(zhuǎn)45度吧,也就是上面圖片在的效果,當然,PlaneProjection類可以用于許多UI元素中,不一定是圖片,為了直觀和美觀,我用圖片,也順便找兩位MM來熱鬧一下。
- <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
- Width="320">
- <Image.Projection>
- <PlaneProjection RotationY="45"/>
- </Image.Projection>
- </Image>
OK,就這么簡單,可能在設(shè)計器里沒有看到效果,沒關(guān)系,你現(xiàn)在輕輕按下F5,馬上你就會看到奇跡發(fā)生。
這里我提示一下,所有UI元素對PlaneProjection的使用方法都是一樣的,下文的例子中你會看到,就是設(shè)置對象的Projection屬性。
練習(xí)二:沿X軸旋轉(zhuǎn)-60度。
- <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
- Width="320">
- <Image.Projection>
- <PlaneProjection RotationX="-60"/>
- </Image.Projection>
- </Image>
和上面沒什么區(qū)別,只是Y變成X罷了。
練習(xí)三:沿Z軸旋轉(zhuǎn)180度。
- <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
- Width="320">
- <Image.Projection>
- <PlaneProjection RotationZ="180"/>
- </Image.Projection>
- </Image>
剛才說了,Z軸是指向你自己,可能這明顯,現(xiàn)在你把它改為35度,相信效果就明顯了。
- <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
- Width="320">
- <Image.Projection>
- <PlaneProjection RotationZ="35"/>
- </Image.Projection>
- </Image>
別走開,下頁內(nèi)容更精彩
#p#
練習(xí)四:綜合旋轉(zhuǎn)。
上面的例子都是單獨旋轉(zhuǎn)某的軸的,那么能不能X、Y、Z三軸同時干活呢?當然可以了,XYZ搭配,干活不累!
現(xiàn)在,我們把對象沿X軸旋轉(zhuǎn)15度,沿Y軸旋轉(zhuǎn)-65度,沿Z軸旋轉(zhuǎn)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>
練習(xí)五:心變中心點位置。
默認中心點位于中對象的中線上,但我們可以通過 CenterOfRotationX,CenterOfRotationY,CenterOfRotationZ三個屬性來改變中心位置,值范圍0到1, 兩個極端,不是在這一側(cè)就是那一側(cè),如果是0和1之間的值就按比例計算了,如0.5就是默認的中間位置。
下面我們同時把X軸的中心改為0.2,Y軸中心改為0.7,Z軸中心改為1,看看有什么事情發(fā)生。
- <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>
明顯看到,位置不在中間了,認真觀察一下,你會發(fā)現(xiàn)的。
練習(xí)六:本地偏移。
我說的本地平移只是為了相對于屏幕平移,其實這樣翻譯有點難聽。涉及的屬性同樣有三個——LocalOffsetX, LocalOffsetY, LocalOffsetZ,相信不用我多說了,你自己玩幾下就明白,關(guān)鍵是多動手,多對比。
- <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>
練習(xí)七:全局偏移。
這個全局偏就是移動屏幕坐標,如果你愿意去總結(jié)的話,你會發(fā)現(xiàn)它和解析幾何中的坐標系平移的規(guī)律一樣。
即:左加右減,上加下減。
你可以不斷地改變數(shù)值來測試,相信你一定能找到規(guī)律的,呵呵,放心,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>
研究這個透視效果,還是老方法——亂來,不斷地用數(shù)值去測試,想一想,有時候亂來是很有價值的。