Flip Card – 翻轉圖片

我們可以通過 Core Animation 來對圖片做各種翻轉的操作。

這次想要讓使用者可以通過手勢來翻轉卡片。


FlipCard

當使用者在畫面上滑動的時候,根據使用者手指所在的位置來180度翻轉卡片。

當翻轉超過 90度的時候,會看得見背面那張圖片。


CALayer

在 ViewController 中建立一個繼承於 CALayer 的 cardLayer 並放在 view.layer 上

在 cardLayer 上我們會先放上一張圖片 ( img-card )

後面會提到為什麼要改變 anchorPoint.

UIPanGesture

通過 UIPanGesture 來獲取手勢在 view 上拖動的情況


翻卡片的實作

通過 panHandler 拿到 UIPanGestureRecognizer 事件以後,

我們就可以使用 sender.location(in:view) 方法知道使用者在 view 上當前的座標。

架設使用者滑動到(點到)畫面的最中央時,卡牌就要正好 90度垂直於畫面,也就是手指到最右邊的時候卡片 180度翻開。

而為了讓圖片有翻動的效果:

  • 通過 CATransform3DIdentity m34 來實現透視。
  • 通過 CATransation 來實現翻轉


CATransform3D & m34 透視

m34 默認值是 0, 我們可以通過設置 m34 為 1.0 / d 來實現透視效果,d 代表視角相機和屏幕之間的距離。

  • 左圖:未使用透視
  • 右圖:使用透視

CATransform3DRotate

旋轉圖片的方法,通過參數就能夠同時對 x,y,z 軸旋轉指定的度數,還能做形狀變化(比如透視)


錨點 (AnchorPoint)

不論是 View 的 Center 又或者 Layer 的 Position 都指定了 AnchorPoint 相對於父 Layer 的位置,Layer 的 AnchorPoint 通過 Position 來控制它的 frame 位置。

AnchorPoint 默認是在 Layer 的正中間 (0.5, 0.5) 所以 Layer 會以這裏為中心,Layer 的左上角為 (0,0) 右下角為(1,1)

通過圖片來解釋看看

  • 有個 View 它的 frame 是 (50, 50, 100, 100)
  • 它的 AnchorPoint 默認是 (0.5, 0.5)
  • 我們把它的 AnchorPoint 移動到 (1.0, 1.0)

看到結果顯示,position 並沒有改變,但是 frame 卻移動了位置。

改變 Anchor Point 前後的翻拍情況

 

  • 左圖:當我們尚未移動錨點的時候
  • 右圖:將錨點移動到  CGPoint(x: 1.0, y: 0.5) 的位置後。

右圖中,由於圖像的 Anchor Point 移動到了原本圖片右邊的中間 (1.0,0.5),所以能看到完整的翻卡的效果了。


參考

2 thoughts on “Flip Card – 翻轉圖片

  1. AnchorPoint那張圖 好像有點怪怪的
    左邊那張frame如果是(50,50,100,100) position應該是(100,100)
    右邊那張如果維持position(100,100), anchor point (1,1) frame應該是(0,0,100,100)
    就我的觀察啦~

    1. 粉絲大人你說的沒錯,我也發現這張圖上的數字有寫錯的地方….這就馬上改 QQ

      我來重新畫一下圖 Orz….

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *