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

贊助區

itCoin:

3ExcHdua3crim67XdnGhTVMq6hTRawgkCu

Ethereum:

0xb1f6c1880c058a4b7d1ee06d325411c1c1de3573

Crypto.com(虛擬貨幣入門選擇，用我連結註冊馬上送 $25美金)

派網 (網格交易第一選擇，新手必推)

幣安 Binance (第一名交易所，點擊註冊，送獎勵)

ByBit (體驗最好的交易所，點擊註冊送獎勵)

幣託 BitoPro (台灣虛擬貨幣換成台幣必備，點擊註冊) :

數字貨幣貪婪恐慌指數

2012-10-05

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

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

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

首先我得先對翻轉的那張圖在 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 則是從左邊翻到右邊，視覺效果為翻至下頁

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

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

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