[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 的效果了..

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