2012-10-05

[Windows Phone 7] Mango 密記 - Flipboard 的翻頁效果 (3)- 製作翻頁效果

 

這篇是 Flipboard 翻頁效果 clone 實作 最後一個階段,上一篇文章 Flipboard 的翻頁效果 (2)- 重新繪製圖形,對 WriteableBitmap 操作

我們擷取了左半邊的圖出來了,接下來就是讓他翻頁..

sshot-17_2 (1)

 

其實我以前寫過一篇文章 [Silverlight] 使用 PlaneProjection 做 X,Y,Z 軸旋轉範例

我就是利用這一篇原理來進行翻轉..

首先我得先對翻轉的那張圖 在 XAML 中加入 PlaneProjection

sshot-17_4

使得 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 軸旋轉範例


再來就是看我們 按下翻轉之後的 處理了..


sshot-22_2



private void bdnFlip_Click(object sender, RoutedEventArgs e)
{
    this.imgOutput.Visibility = Visibility.Visible;
   
    imgprojImgOutput.CenterOfRotationX = 1;
 
    tmrLefPartFlip.Start();
 
}

翻轉按鈕按下去之後的 Code 就很簡單了,只需要啟動 Timer 就好了…


其中你會感覺到弔詭的是 CenterOfRotationX 為什麼要設定是 1 ..


因為這考慮翻轉的時候軸心的問題..


samplePP_2


因為那張圖,我們必須讓的軸心在最右邊,所以設定為 1 如果沒有特別去設定他,他是 0.5 就會在中間旋轉


這就不是我們要的效果了..


之後把位置調整一下,就可以做出這樣的效果:



之後加入手勢,就可以做出 Flipboard 的效果了..


下面有附件,如果有興趣就可以下載玩一下..