[Windows Phone 7] Mango 密記 - Flipboard 的翻頁效果 (3)- 製作翻頁效果
這篇是 Flipboard 翻頁效果 clone 實作 最後一個階段，上一篇文章 Flipboard 的翻頁效果 (2)- 重新繪製圖形，對 WriteableBitmap 操作
我們擷取了左半邊的圖出來了，接下來就是讓他翻頁..
其實我以前寫過一篇文章 [Silverlight] 使用 PlaneProjection 做 X,Y,Z 軸旋轉範例
我就是利用這一篇原理來進行翻轉..
首先我得先對翻轉的那張圖 在 XAML 中加入 PlaneProjection
使得 XAML Code 如下:
<Image Height="314.4" HorizontalAlignment="Left" Margin="23,268,0,0" Name="imgOutput" Stretch="Fill" VerticalAlignment="Top" Width="120" >
<Image.Projection>
<PlaneProjection x:Name="imgprojImgOutput" ></PlaneProjection>
</Image.Projection>
</Image>
之後翻轉的部分，我只需要對 imgprojImgOutput 動手腳就可以了…
因為我們要讓他翻轉的時候看起來是很順暢的動畫，所以我必須要在程式中宣告一 DispatcherTimer
/// <summary>/// 為了讓他執行翻頁起來的動畫效果 /// 必須調用一個 DispatcherTimer 來處理 /// </summary> DispatcherTimer tmrLefPartFlip = new DispatcherTimer();在 LayoutRoot 的 loaded 中將他初始化起來..
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{ tmrLefPartFlip = new DispatcherTimer(); tmrLefPartFlip.Tick += new EventHandler(tmrLefPartFlip_Tick); tmrLefPartFlip.Interval = new TimeSpan(10);}
則 tmrLefPartFlip 每一 tick 的事件處理為
void tmrLefPartFlip_Tick(object sender, EventArgs e)
{this.imgprojImgOutput.RotationY = (this.imgprojImgOutput.RotationY - 4);
if (imgprojImgOutput.RotationY <= -180) {tmrLefPartFlip.Stop();
this.imgOutput.Visibility = Visibility.Collapsed; this.imgprojImgOutput.RotationY = 0;}
}
這時候我相信你一定有疑惑…就是 簡單的說程式碼 是控制 RotationY
從 0~ -180 其實 就是從右邊翻到左邊的意思，視覺效果為翻至上頁
如果是 0~ 180 則是從左邊翻到右邊，視覺效果為翻至下頁
需要參考翻的狀況，可以參考這一篇.. [Silverlight] 使用 PlaneProjection 做 X,Y,Z 軸旋轉範例
再來就是看我們 按下翻轉之後的 處理了..
private void bdnFlip_Click(object sender, RoutedEventArgs e)
{ this.imgOutput.Visibility = Visibility.Visible;imgprojImgOutput.CenterOfRotationX = 1;
tmrLefPartFlip.Start();
}
翻轉按鈕按下去之後的 Code 就很簡單了，只需要啟動 Timer 就好了…
其中你會感覺到弔詭的是 CenterOfRotationX 為什麼要設定是 1 ..
因為這考慮翻轉的時候軸心的問題..
因為那張圖，我們必須讓的軸心在最右邊，所以設定為 1 如果沒有特別去設定他，他是 0.5 就會在中間旋轉
這就不是我們要的效果了..
之後把位置調整一下，就可以做出這樣的效果:
之後加入手勢，就可以做出 Flipboard 的效果了..
下面有附件，如果有興趣就可以下載玩一下..