在 Swift 中做一個垂直翻轉 animation

Question

我目前正在嘗試在我的項目子視圖中為我的卡獲取垂直翻轉 animation。 我正在使用一些依賴項（Shuffle Cocoapod），我嘗試了一切嘗試從卡的右到左翻轉 animation。 似乎我可以更改每張卡片的背景和其他簡單的東西，但是嘗試對其進行動畫處理時沒有任何反應。 目標是“顯示卡片的背面”，其中包含另一個單詞（基本上每張卡片都有一個“前面的單詞”和一個“后面的單詞”。我錯了什么？

import UIKit
import Shuffle


class CardsViewController: UIViewController, SwipeCardStackDataSource, SwipeCardStackDelegate {
    
    let cardStack = SwipeCardStack()
    var actualIndex : Int = 0

    var showingBack = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(cardStack)
        cardStack.frame.size.height = 512
        cardStack.frame.size.width = 384
        cardStack.center.y =  CGFloat(cardStack.frame.size.height/2)
        cardStack.center.x =  CGFloat(cardStack.frame.size.width/2)
        cardStack.center = view.center
        cardStack.dataSource = self
    }
    
    
    func card(fromImage word: String) -> SwipeCard {
        let card = SwipeCard()
        card.swipeDirections = [.left, .right]
        for direction in card.swipeDirections {
          card.setOverlay(CardOverlay(direction: direction), forDirection: direction)
        }
        card.content = CardContentView(withWord: word)
            return card
    }
    
    
    func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {
        let  theCard = card(fromImage: cardWords[actualIndex].word)
        actualIndex = actualIndex + 1
        return theCard
    }

    func numberOfCards(in cardStack: SwipeCardStack) -> Int {
        return cardWords.count
    }

    
     let cardWords = [
           DataOfWord(word: "comme", translation: "as"),
           DataOfWord(word: "je", translation: "I"),
           DataOfWord(word: "son", translation: "his"),
           DataOfWord(word: "que", translation: "that")]
    }

Answer 1

您可以使用 UIView 的transition(with:duration:options:animations:completion:)方法創建 animation 的翻轉類型

這是我自己的一個應用程序中的一些代碼，我在其中翻轉游戲板以在“另一側”顯示關卡完成分數：

UIView.transition(with: gameBoardCollectionView, duration: 0.75, options: [.transitionFlipFromRight]) {
     self.loadLevelEndArcadeView()
  } completion: { (complete) in
     self.animateLevelEndArcadeLabelViews()
  }

因此，在轉換代碼塊中，您只需加載所需的視圖，當 animation 完成時，您將顯示代表視圖背面的內容。 如果需要，您還可以調用其他過渡動畫。