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